JavaFX 实现矩形缩放时不重叠、保持间距且不缩放内部文本

当前实现出现矩形重叠的核心原因：

• JavaFX节点的缩放变换默认以几何中心为锚点，单独给矩形设置scaleY时，矩形会以中心为原点上下双向扩张，直接侵占相邻节点的显示空间
• 两个矩形容器的Y坐标是硬编码的固定值，没有跟随矩形缩放后的实际高度动态调整，矩形扩张后超出原预留布局空间，必然引发重叠
• 之前尝试整体缩放Group的方案会连带缩放内部文本，本质是没有隔离矩形形状的缩放和容器、文本节点的变换

全程不引入VBox、不缩放Group容器、不改动文本大小，仅通过调整矩形缩放锚点、同步计算容器Y坐标实现效果，完全匹配需求约束。

核心Y坐标计算逻辑 #

先固定所有不随缩放变化的基准值，再推导动态坐标：

• 固定基准参数：
  • 第一个矩形的容器顶部固定Y坐标（本例初始值为20，缩放全程保持不变）
  • 矩形未缩放时的基准高度（本例初始值为100，基础高度不会随scaleY参数被修改）
  • 相邻关系约束：第一个矩形的下边界永远与第二个矩形的上边界对齐
• 动态坐标计算公式：
  每次矩形更新缩放比例后，第二个矩形的容器Y坐标 = 第一个矩形的容器Y坐标 + （矩形基准高度 * 当前矩形的垂直缩放比例）
• 缩放锚点配置：
  所有矩形的缩放枢轴统一设置为自身左上角坐标点，确保矩形缩放时仅从固定的顶部位置向下延伸高度，不会向上扩张占用上方空间

关键代码调整 #

在原有代码基础上修改以下内容即可：

1. 补充方位类导入：import javafx.geometry.Pos;
2. 给两个StackPane设置左上对齐，避免内部矩形被容器自动居中偏移位置：

   stackPane1.setAlignment(Pos.TOP_LEFT);
   stackPane2.setAlignment(Pos.TOP_LEFT);
   

3. 给两个矩形设置左上角为缩放枢轴，替换默认的中心锚点：

   rect1.setPivotX(0);
   rect1.setPivotY(0);
   rect2.setPivotX(0);
   rect2.setPivotY(0);
   

4. 重写滚轮事件处理逻辑，在更新矩形缩放比例后，动态调整第二个容器的Y坐标：

   @Override
   public void handle(final ScrollEvent event) {
       double scaleDelta = 1.3d;
       double scaleFactor;
       double deltaY = event.getDeltaY();
       scaleFactor = deltaY < 0 ? 1 / scaleDelta : scaleDelta;
       
       // 更新两个矩形的垂直缩放比例
       rect1.setScaleY(rect1.getScaleY() * scaleFactor);
       rect2.setScaleY(rect2.getScaleY() * scaleFactor);
       
       // 动态计算第二个矩形的顶部位置，始终紧接在第一个矩形的下边界
       stackPane2.setLayoutY(
           stackPane1.getLayoutY() + 
           rect1.getHeight() * rect1.getScaleY()
       );
   }
   

• 矩形放大/缩小时，仅形状本身的垂直高度发生变化，内部文本因为不参与缩放变换，字体大小、位置完全保持初始状态
• 两个矩形的上下边界始终依次衔接，无间隙、无重叠
• 所有布局操作都在原有Pane布局体系下完成，没有引入额外的布局容器

内容的提问来源于stack exchange，提问作者Deepak