JavaFx path transition in gridPane

ambitiousNewbie

I can not understand how moveTo method work in javafx. here is my example I have a GridPane that consist of 4 columns and 1 row. All the columns h has a StackPane and the last Stackpane also has an empty label.

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

I want to move the label in the grid pane from 0.3 to 0.0 however when I am trying to do that the whole transition slips.

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

If I change the arguments of MoveTo and LineTo by the following I can achieve the animation I want but I cant understand why. :\

    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 ;

I guess It is because transitions use different coordinate systems than scenes but I cant really find anything that explains well :( Could someone give me some hints how It is working? Thank you so much in advance.

ambitiousNewbie

I realized that i shouldn't use GridPane. If i do it without using containers the transition is working fine.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Java

Relative sizing in JavaFx GridPane

From Dev

Lengthen Javafx Sliders in GridPane

From Dev

JavaFX: GridPane, ObservableList and ListChangeListener

From Dev

getting the contenents of a GridPane javafx

From Dev

JavaFX alignment of Label in GridPane

From Dev

Javafx gridpane layout allignment

From Dev

Javafx gridpane width setting

From Dev

Adding borders to GridPane JavaFX

From Dev

JavaFX - GridPane Background Image

From Dev

Gridpane of Squares in JavaFX

From Dev

JavaFX: Inserting image into a GridPane

From Dev

Setting Labels to a GridPane in JavaFx

From Dev

Scroll gridpane on touch in JavaFX

From Dev

HBox inside GridPane in Javafx

From Dev

JavaFX - GridPane Background Image

From Dev

is getChildren on Gridpane sorted? (javafx)

From Dev

Updating an animation in javafx: Path Transition over an adjustable curve

From Dev

Setting a shapes path transition to another shapes rotation in JavaFX

From Dev

Is it possible to use to use a path transition on a dialog box in javafx?

From Dev

javafx gridpane layout with wrapping text

From Dev

JavaFX colspan not working for Text in GridPane

From Dev

get the number row of gridpane Javafx

From Dev

JavaFX GridPane resizing of pane children

From Dev

Get the number of rows in a JavaFX GridPane?

From Dev

Javafx Gridpane Cell Background Colors

From Dev

JavaFX Centering VBox inside GridPane

From Dev

Javafx treeview cell factory with gridpane

From Dev

JavaFX label contents not showing in gridpane

From Dev

JavaFX: How to shift elements in a GridPane?