缩放形状而不将其分开

Question

我正在尝试创建 2 个相似的尺寸形状（矩形），一个在另一个下方，具有缩放效果。但是，当缩放矩形时，这两个形状会相互重叠。这种行为不是预期的。

我希望矩形被缩放（缩放），此外，2 个矩形应该一个在另一个下方，中间没有任何间隙。如何实现？

一个选项是在组上提供缩放。但它会使里面的文本也缩放，这是不需要的。另一种选择是使用 VBox，但我想在 Pane 上实现此功能。

有人在这里建议我一个解决方案

我试图实现的代码如下

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.input.ScrollEvent;
import javafx.stage.Stage;


@SuppressWarnings("restriction")
public class TestRectScaling extends Application {

/**
 * @param args
 */
public static void main(final String[] args) {
  launch(args);
}

/**
 * {@inheritDoc}
 */
@Override
public void start(final Stage primaryStage) throws Exception {
  javafx.scene.layout.Pane p = new javafx.scene.layout.Pane();
  javafx.scene.Group g = new javafx.scene.Group(p);
  javafx.scene.control.ScrollPane sp = new javafx.scene.control.ScrollPane(g);

  javafx.scene.layout.StackPane stackPane1 = new javafx.scene.layout.StackPane();

  javafx.scene.shape.Rectangle rect1 = new javafx.scene.shape.Rectangle();
  stackPane1.getChildren().add(rect1);
  rect1.setWidth(100);
  rect1.setHeight(100);
  rect1.setFill(javafx.scene.paint.Color.BLUE);
  javafx.scene.text.Text text1 = new javafx.scene.text.Text("This is sample Text Rect 1");
  text1.setWrappingWidth(30);
  stackPane1.getChildren().add(text1);

  javafx.scene.layout.StackPane stackPane2 = new javafx.scene.layout.StackPane();
  javafx.scene.shape.Rectangle rect2 = new javafx.scene.shape.Rectangle();
  rect2.setWidth(100);
  rect2.setHeight(100);
  rect2.setFill(javafx.scene.paint.Color.BLUEVIOLET);
  javafx.scene.text.Text text2 = new javafx.scene.text.Text("This is sample Text Rect 2");
  text2.setWrappingWidth(30);
  stackPane2.getChildren().add(rect2);
  stackPane2.getChildren().add(text2);

  stackPane1.setLayoutX(30);
  stackPane1.setLayoutY(20);

  stackPane2.setLayoutX(30);
  stackPane2.setLayoutY(120);

  g.getChildren().add(stackPane1);
  g.getChildren().add(stackPane2);


  sp.addEventFilter(javafx.scene.input.ScrollEvent.ANY, new EventHandler<ScrollEvent>() {

    @Override
    public void handle(final ScrollEvent event) {
      double scaleDelta = 1.3d;
      double scaleFactor = 0;
      double deltaY = event.getDeltaY();
      if (deltaY < 0) {
        scaleFactor = 1 / scaleDelta;
      }
      else {
        scaleFactor = scaleDelta;
      }
      rect1.setScaleY(rect1.getScaleY() * scaleFactor);
      rect2.setScaleY(rect2.getScaleY() * scaleFactor);
    }
  });

  javafx.scene.Scene s = new javafx.scene.Scene(sp);
  primaryStage.setScene(s);
  primaryStage.show();
}
}

让我帮忙做个图片

所以主要目的是缩放矩形而不改变它们 2 之间的距离。这基本上意味着我需要一种方法来计算缩放后的新 Y 坐标。

Answer 1

无论您对实现的讨论如何，如果您仍在寻找当前方法的解决方案，则需要将以下侦听器包含到矩形 boundsInParent 属性.

想法是，当您缩放节点时，boundsInParent 会更新。如果你听那个属性，你可以更新第二个 stackPane 的 stackPanes 和 layoutY 的高度。

double gap = 15.0;
rect1.boundsInParentProperty().addListener((obs, old, bounds) -> {
    stackPane1.setPrefHeight(bounds.getHeight());
    stackPane2.setLayoutY(stackPane1.getLayoutY() + bounds.getHeight() + gap);
});

rect2.boundsInParentProperty().addListener((obs, old, val) -> {
    stackPane2.setPrefHeight(val.getHeight());
});

更新::

下面是限制 max/min 高度缩放的演示。

import javafx.application.Application;
import javafx.stage.Stage;

public class TestRectScaling extends Application {

    double defaultHeight = 100.0;
    double maxHeight = 400.0;
    double gap = 15.0;

    public static void main(final String[] args) {
        launch(args);
    }

    @Override
    public void start(final Stage primaryStage) throws Exception {
        javafx.scene.layout.Pane p = new javafx.scene.layout.Pane();
        javafx.scene.Group g = new javafx.scene.Group(p);
        javafx.scene.control.ScrollPane sp = new javafx.scene.control.ScrollPane(g);

        javafx.scene.layout.StackPane stackPane1 = new javafx.scene.layout.StackPane();

        javafx.scene.shape.Rectangle rect1 = new javafx.scene.shape.Rectangle();
        stackPane1.getChildren().add(rect1);
        rect1.setWidth(100);
        rect1.setHeight(defaultHeight);
        rect1.setFill(javafx.scene.paint.Color.BLUE);
        javafx.scene.text.Text text1 = new javafx.scene.text.Text("This is sample Text Rect 1");
        text1.setWrappingWidth(30);
        stackPane1.getChildren().add(text1);

        javafx.scene.layout.StackPane stackPane2 = new javafx.scene.layout.StackPane();
        javafx.scene.shape.Rectangle rect2 = new javafx.scene.shape.Rectangle();
        rect2.setWidth(100);
        rect2.setHeight(defaultHeight);
        rect2.setFill(javafx.scene.paint.Color.BLUEVIOLET);
        javafx.scene.text.Text text2 = new javafx.scene.text.Text("This is sample Text Rect 2");
        text2.setWrappingWidth(30);
        stackPane2.getChildren().add(rect2);
        stackPane2.getChildren().add(text2);

        rect1.boundsInParentProperty().addListener((obs, old, bounds) -> {
            stackPane1.setPrefHeight(bounds.getHeight());
            stackPane2.setLayoutY(stackPane1.getLayoutY() + bounds.getHeight() + gap);
        });

        rect2.boundsInParentProperty().addListener((obs, old, val) -> {
            stackPane2.setPrefHeight(val.getHeight());
        });

        stackPane1.setLayoutX(30);
        stackPane1.setLayoutY(20);

        stackPane2.setLayoutX(30);
        stackPane2.setLayoutY(120);

        g.getChildren().add(stackPane1);
        g.getChildren().add(stackPane2);

        sp.addEventFilter(javafx.scene.input.ScrollEvent.ANY, event -> {
            double scaleDelta = 1.3d;
            double scaleFactor = 0;
            double deltaY = event.getDeltaY();
            if (deltaY < 0) {
                scaleFactor = 1 / scaleDelta;
            } else {
                scaleFactor = scaleDelta;
            }

            double scale = rect1.getScaleY() * scaleFactor;

            // Determine the resultant height of this scale.
            double scaledHeight = scale * defaultHeight;
            if(scaledHeight > maxHeight){
                // If the target height is > max, then set the scale to max height.
                scale = maxHeight/defaultHeight;
            } else if(scaledHeight < defaultHeight){
                // If the target height is < default, then set the scale to default height.
                scale = 1;
            }
            rect1.setScaleY(scale);
            rect2.setScaleY(scale);
        });

        javafx.scene.Scene s = new javafx.scene.Scene(sp);
        primaryStage.setScene(s);
        primaryStage.show();
    }
}

Answer 2

通过删除下面的线，它不会真正满足比例缩放和相应地定位矩形

stackPane2.setLayoutY..

让我试着解释一下。

在问题中提供的程序中，进行以下更改

stackPane2.setLayoutX(170);

stackPane2.setLayoutY(100);

首先，现在矩形彼此相邻。然而，有一部分矩形在 y 轴值方面具有重叠区域。 refer attached image

所以现在的问题是，一旦我们开始缩放矩形，第二个矩形就不会以与最初放置的相同比例高度开始。要提供更多见解，请找到图片 representing the actual vs expected

最初，第二个矩形可能位于第一个矩形的下 1/4 高度。因此，预期的结果是，在缩放时，第二个矩形应放置在第一个矩形的 1/4 高度处。

如果我们删除线 stackPane2.setLayoutY..，第二个矩形向上移动并失去其最初可用的成比例的 y 坐标。

我能理解控制在stackPane2.setLayoutY..行。但面临的问题是，y 轴坐标计算不正确。因此第二个矩形/堆栈窗格未正确放置。

那么如何计算缩放时第二个矩形的 y 坐标？

缩放形状而不将其分开

Scale Shapes without moving it apart

javafx

scale

zoom-sdk