JavaFX pathtransition binding

Question

I am studying JavaFX nowadays. I have a trouble using PathTransition with property binding. The purpose of the following code is to make a rectangle moving on a circle orbit. Also, I made the center of the circle bind with the height and the width of a pane divided by 2, which means the center of the pane.

import javafx.animation.PathTransition;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

/**
 * Created by Younghee on 2017-03-12.
 */
public class PathTransitionDemo extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        Pane pane = new Pane();
        Circle circle = new Circle(50);
        Rectangle rec = new Rectangle(20,10);

        circle.setFill(Color.WHITE);
        circle.setStroke(Color.BLACK);
        circle.centerXProperty().bind(pane.widthProperty().divide(2));
        circle.centerYProperty().bind(pane.heightProperty().divide(2));
        rec.setStroke(Color.WHITE);
        rec.setFill(Color.ORANGE);
        pane.getChildren().addAll(circle, rec);
        pane.setPadding(new Insets(11,11,11,11));

        PathTransition pt = new PathTransition();
        pt.setNode(rec);
        pt.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
        pt.setDuration(Duration.millis(4000));
        pt.setPath(circle);
        pt.setCycleCount(Timeline.INDEFINITE);
        pt.setAutoReverse(true);
        pt.play();

        primaryStage.setScene(new Scene(pane));
        primaryStage.setTitle("Path Transition Demo");
        primaryStage.show();
    }
}

However, the rectangle moves not on the specified circle, but on a other circle orbit whose center is (0,0). How can I fix it?

Answer 1

I can give you a not completed answer. You can create the PathTransition after the center your cirle(this should be the root cause) like the following.

public class PathTransitionDemo extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        Pane pane = new Pane();
        Circle circle = new Circle(50);
        Rectangle rec = new Rectangle(20,10);

        circle.setFill(Color.WHITE);
        circle.setStroke(Color.BLACK);
        circle.centerXProperty().bind(pane.widthProperty().divide(2));
        circle.centerYProperty().bind(pane.heightProperty().divide(2));
        rec.setStroke(Color.WHITE);
        rec.setFill(Color.ORANGE);
        pane.getChildren().addAll(circle, rec);
        pane.setPadding(new Insets(11,11,11,11));
        circle.centerXProperty().addListener(new ChangeListener<Number>() {

          @Override
          public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
            PathTransition pt = new PathTransition();
            pt.setNode(rec);
            pt.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
            pt.setDuration(Duration.millis(4000));
            pt.setPath(circle);
            pt.setCycleCount(Timeline.INDEFINITE);
            pt.setAutoReverse(true);
            pt.play();
          }
        });

        primaryStage.setScene(new Scene(pane));
        primaryStage.setTitle("Path Transition Demo");
        primaryStage.show();
    }
    public static void main(String[] args) {
      launch(args);
    }
}