gridPane 中的 JavaFx 路径转换

Question

我不明白 moveTo 方法在 javafx 中是如何工作的。这是我的例子我有一个包含 4 列和 1 行的 GridPane。所有列 h 都有一个 StackPane，最后一个 StackPane 也有一个空标签。

public class PathTransitionTExample extends Application {

StackPane pane;
GridPane grid;
Label label;
 Scene scene;

@Override
public void start(Stage primaryStage) {

    label = new Label();
    label.setPrefSize(Double.MAX_VALUE, Double.MAX_VALUE);
    grid = new GridPane();
    grid.getStyleClass().add("gridPane");

    for (int x = 0; x < 4; x++) {
        grid.add(pane = new StackPane(), x, 0);
        pane.setPrefSize(50, 50);
        pane.getStyleClass().add("stackPane");
    }

    pane = (StackPane) grid.getChildren().get(3);
    pane.getChildren().add(label);

     scene = new Scene(grid, 260, 50);


  scene.getStylesheets().add(PathTransitionTest.class.getResource("pathCSS.css").toExternalForm());
     scene.setOnMouseClicked(me ->  pathTransition()); 
    primaryStage.setTitle("Path Transition");
    primaryStage.setScene(scene);
    primaryStage.show();
}

  //pathCSS.css

.gridPane{
-fx-background-color: red;
-fx-hGap: 20;
}
.stackPane{
-fx-background-color: orange;
}
.label {
-fx-background-color: blue;
}

我想将网格窗格中的标签从 0.3 移动到 0.0，但是当我尝试这样做时，整个过渡会滑动。

private void pathTransition() {
    //the Coordinates of the label
    double oldMinX = grid.getChildren().get(3).getLayoutX();
    double oldMinY = grid.getChildren().get(3).getLayoutY();

    //the coordinates of the stack pane where i want the label move
    double newMinX = grid.getChildren().get(1).getLayoutX();
    double newMinY = grid.getChildren().get(1).getLayoutY();

    Path path = new Path();
    path.getElements().add(new MoveTo(oldMinX, oldMinY ));
    path.getElements().add(new LineTo(newMinX,newMinY ));
    PathTransition pathTransition = new PathTransition();
    pathTransition.setDuration(new Duration(500));
    pathTransition.setPath(path);
    pathTransition.setNode(label);
    pathTransition.play();
}

如果我通过以下方式更改 MoveTo 和 LineTo 的参数，我可以实现我想要的动画，但我不明白为什么。 :\

    double oldMinX = grid.getChildren().get(3).getLayoutX() -185;
    double oldMinY = grid.getChildren().get(3).getLayoutY()+ grid.getChildren().get(3).getBoundsInLocal().getHeight()/2 ;
    double newMinX = grid.getChildren().get(1).getLayoutX()-255 ;
    double newMinY = grid.getChildren().get(1).getLayoutY() + grid.getChildren().get(0).getBoundsInLocal().getHeight()/2 ;

我想这是因为过渡使用与场景不同的坐标系，但我真的找不到任何解释得很好的东西:(有人可以给我一些提示它是如何工作的吗？非常感谢您。

Answer 1

我意识到我不应该使用 GridPane。如果我在不使用容器的情况下进行转换，则转换工作正常。

gridPane 中的 JavaFx 路径转换

JavaFx path transition in gridPane

java

transition

javafx