JavaFx-交互式排序应用程序

Question

我正在开发一个交互式排序应用程序。我必须将数字表示为矩形，并且例如，当排序算法运行时，当两个数字互换时，矩形必须互换。我想用动画来做这件事。我如何交换矩形？我目前正在使用transition测试这个功能，但我遇到了一些问题。我有两个矩形在一组。当我尝试交换矩形时，两者会在中间相遇并停止。代码如下：

    Rectangle r1 = rectangles.get(numbers[0]);
    Rectangle r2 = rectangles.get(numbers[1]);

    TranslateTransition translateTransition = new TranslateTransition();

    translateTransition.setNode(r1);
    translateTransition.setDuration(Duration.millis(1000));
    translateTransition.setFromX(r1.getX());
    translateTransition.setToX(r2.getX());

    TranslateTransition translateTransition2 = new TranslateTransition();

    translateTransition2.setNode(r2);
    translateTransition2.setDuration(Duration.millis(1000));
    translateTransition2.setFromX(r2.getX());
    translateTransition2.setToX(r1.getX());
    translateTransition2.play();

    translateTransition.play();

我需要一个类似于帆布的窗格。我需要能够设置矩形坐标。

Answer 1

TranslateTransition与节点的TranslateX属性一起工作。因此，如果您使用setlayout定位矩形，relocate或仅使用构造函数参数TranslateTransition将不适用。

您要么需要开始使用TranslateX坐标，要么使用Timeline代替TranslateTransition。

您可以阅读更多关于布局的内容，并在JavaDoc中进行布局翻译

下面是基于translateX的交换示例：

public void start(Stage primaryStage) {
    final Rectangle r1 = new Rectangle(50, 50, Color.RED);
    final Rectangle r2 = new Rectangle(50, 50, Color.BLUE);

    // note I use translate to position rectangles
    r1.setTranslateX(50);
    r2.setTranslateX(250);

    Button btn = new Button();
    btn.setText("Move it");
    btn.relocate(100, 100);
    btn.setOnAction(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent event) {
            double x1 = r1.getTranslateX();
            double x2 = r2.getTranslateX();

            TranslateTransition translateTransition = new TranslateTransition();
            translateTransition.setNode(r1);
            translateTransition.setDuration(Duration.millis(1000));
            translateTransition.setToX(x2);

            TranslateTransition translateTransition2 = new TranslateTransition();
            translateTransition2.setNode(r2);
            translateTransition2.setDuration(Duration.millis(1000));
            translateTransition2.setToX(x1);

            translateTransition2.play();
            translateTransition.play();
        }
    });

    Pane root = new Pane();
    root.getChildren().addAll(btn, r1, r2);

    Scene scene = new Scene(root, 400, 350);

    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}