在JavaFX中将路径转换添加到组

我正在编写一些javaFX代码，我已经向一个组添加了一些路径，这个组已经添加到另一个组，这个组已经添加到根目录中，并显示在屏幕上。现在，在某一点上，我想使用PathTransition将这个最低级别的组动画化到一个新位置。我很难计算出正确的转换坐标。我已经了解到PathTransition将从节点的中心而不是左上角设置节点动画，因此我尝试添加 Group.getLayoutX/2到起始x，Group.getLayoutY/2到起始y坐标，但似乎仍会使组在动画开始之前跳转到新的起始位置。 最终目的地似乎也有点偏僻。 是否有更好的方法来设置包含多条路径的组的动画？

根据正在设置动画的节点的一半布局边界，调整路径后面节点的layoutX和layoutY

rect.setLayoutX(rect.getLayoutX() + rect.getLayoutBounds().getWidth()  / 2);
rect.setLayoutY(rect.getLayoutY() + rect.getLayoutBounds().getHeight() / 2);

尝试从修改Uluk的圆路径转换代码

代码将使节点的左上角跟随原始布局的路径

import javafx.animation.PathTransition.OrientationType;
import javafx.animation.*;
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.*;
import javafx.stage.Stage;
import javafx.util.Duration;

public class ArcToDemo extends Application {

    private PathTransition pathTransitionEllipse;
    private PathTransition pathTransitionCircle;

    private void init(Stage primaryStage) {
        Group root = new Group();
        primaryStage.setResizable(false);
        primaryStage.setScene(new Scene(root, 600, 460));

        // Ellipse path example
        Rectangle rect = new Rectangle(0, 0, 40, 40);
        rect.setArcHeight(10);
        rect.setArcWidth(10);
        rect.setFill(Color.ORANGE);
        root.getChildren().add(rect);

        Path path = createEllipsePath(200, 200, 50, 100, 45);
        root.getChildren().add(path);

        pathTransitionEllipse = PathTransitionBuilder.create()
                .duration(Duration.seconds(4))
                .path(path)
                .node(rect)
                .orientation(OrientationType.NONE)
                .cycleCount(Timeline.INDEFINITE)
                .autoReverse(false)
                .build();

        rect.setLayoutX(rect.getLayoutX() + rect.getLayoutBounds().getWidth()  / 2);
        rect.setLayoutY(rect.getLayoutY() + rect.getLayoutBounds().getHeight() / 2);

        // Circle path example
        Rectangle rect2 = new Rectangle(0, 0, 20, 20);
        rect2.setArcHeight(10);
        rect2.setArcWidth(10);
        rect2.setFill(Color.GREEN);
        root.getChildren().add(rect2);

        Path path2 = createEllipsePath(400, 200, 150, 150, 0);
        root.getChildren().add(path2);

        pathTransitionCircle = PathTransitionBuilder.create()
                .duration(Duration.seconds(2))
                .path(path2)
                .node(rect2)
                .orientation(OrientationType.NONE)
                .cycleCount(Timeline.INDEFINITE)
                .autoReverse(false)
                .build();

        rect2.setLayoutX(rect2.getLayoutX() + rect2.getLayoutBounds().getWidth()  / 2);
        rect2.setLayoutY(rect2.getLayoutY() + rect2.getLayoutBounds().getHeight() / 2);
    }

    private Path createEllipsePath(double centerX, double centerY, double radiusX, double radiusY, double rotate) {
        ArcTo arcTo = new ArcTo();
        arcTo.setX(centerX - radiusX + 1); // to simulate a full 360 degree celcius circle.
        arcTo.setY(centerY - radiusY);
        arcTo.setSweepFlag(false);
        arcTo.setLargeArcFlag(true);
        arcTo.setRadiusX(radiusX);
        arcTo.setRadiusY(radiusY);
        arcTo.setXAxisRotation(rotate);

        Path path = PathBuilder.create()
                .elements(
                new MoveTo(centerX - radiusX, centerY - radiusY),
                arcTo,
                new ClosePath()) // close 1 px gap.
                .build();
        path.setStroke(Color.DODGERBLUE);
        path.getStrokeDashArray().setAll(5d, 5d);
        return path;
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        init(primaryStage);
        primaryStage.show();
        pathTransitionEllipse.play();
        pathTransitionCircle.play();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

实施说明

代码假定正在设置动画的节点的原始布局位置为0,0，如果不是，则需要进行相应调整。 对于非方形节点，节点和路径之间有一点间隙，因为计算基于布局边界矩形，而不是节点的可见形状。 此外，路径过渡使用的方向为“无”，而不是正交的_到_切线，否则，当节点开始旋转时，布局计算会产生奇怪的效果，并且似乎节点的移动方向与路径不同。

---

与上述方法不同，您可以定义一个自定义子类，该子类修改节点的TranslateX和TranslateY属性，以使节点的角沿着路径而不是中心，并且不需要修改节点的布局，但是这将需要大量的工作

非常感谢你。我没有花时间阅读整个响应，但在为组设置动画之前，只是在x和y上添加了一半的布局边界，使我的动画看起来非常完美。