So fügen Sie untergeordnete Knoten hinzu, ohne das Layout von GridPane Eltern zu beeinflussen

Question

Ich möchte eine App mit javafx erstellen. Es sieht wie folgt aus:

ich die Zoomfunktion für das Diagramm hinzufügen möchten. Wenn ich auf den Button "Vergrößern" klicke, wird die App zu fig2. Ich habe jedoch keine Idee, es zu erreichen. Wenn ich die Größe der Scheibe das Diagramm enthalten ändern, wird es Gitterfenster Größe ändern, sieht wie folgt aus:

Answer 1

Sie wollen nicht die Zoom für die gridpane Layout berücksichtigt werden. Dies kann erreicht werden, indem Transformationen auf das Kind der zu ändernden Rasterfläche angewendet werden.

Das folgende Beispiel zeigt, wie ein Knoten zu vergrößern, während die Maus über sie schwebt:

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(); 
}