如何在不影响GridPane父级布局的情况下添加子节点

Question

我想使用javafx创建一个应用程序。它看起来像这样：

我想为图表添加缩放功能。当我点击“放大”按钮时，该应用程序将变为fig2。但是，我不知道要实现它。当我更改包含图表的窗格大小时，它将更改网格窗格大小，如下所示：

Answer 1

您不希望为网格窗格布局考虑缩放。这可以通过将变换应用于要修改的网格面板的子项来实现。

以下示例演示了如何在鼠标悬停在节点上时缩放节点：

private static Region createRegion(String background) {
    Region region = new Region();
    region.setStyle("-fx-background-color:"+background);
    region.setPrefSize(300, 100);
    return region;
}

@Override
public void start(Stage primaryStage) {
    GridPane gp = new GridPane();

    // create background
    gp.add(createRegion("green"), 0, 0);
    gp.add(createRegion("dodgerblue"), 0, 1);

    // create region to be zoomed
    Region zoomRegion = createRegion("red");
    GridPane.setFillWidth(zoomRegion, Boolean.FALSE);
    GridPane.setFillHeight(zoomRegion, Boolean.FALSE);
    zoomRegion.setPrefWidth(100);
    Scale scale = new Scale();
    zoomRegion.getTransforms().add(scale);

    // keep pivot at bottom left corner
    scale.pivotYProperty().bind(zoomRegion.heightProperty());

    zoomRegion.hoverProperty().addListener((observable, oldValue, newValue) -> {
        // adjust scale when hover state is changed
        double scaleFactor = newValue ? 1.5 : 1;
        scale.setX(scaleFactor);
        scale.setY(scaleFactor);
    });

    gp.add(zoomRegion, 0, 1);

    Scene scene = new Scene(gp);

    primaryStage.setScene(scene);
    primaryStage.show();
}