Javafx：交换矩形形状以及锯切数组元素 [英] Javafx : swap rectangle shapes along with sawping array elements

问题描述

我正在使用JavaFx对算法进行排序。在排序数组元素时，我想显示 Rectangle 的交换。但是有一个问题是矩形随机移动而不遵循我尝试 PathTransition 的数组元素的排序顺序。如果我使用 TranslateTransition 尝试它，在我翻译y时翻译x后，圆圈跟随对角线。为什么会发生这种情况？我还尝试将文本单独添加到矩形但失败了。以下是代码：

I'm working on sorting algorithm simulation using JavaFx. At the time of sorting array elements I wanted to show the swap of Rectangles. But there is a problem that the rectangles move randomly and don't follow the sequence of sorting of array elements where I have tried PathTransition. If I try it using TranslateTransition, after translating x when I translate y, circles follow diagonal.Why this happens? I also tried to add text to rectangles individually but failed. Here is the code:

PathTransition pathtransition1;
PathTransition pathtransition2;

@Override
public void start(Stage primaryStage) {

    Pane root = new Pane();
    int[] a = {5, 8, 0, 3, 1};
    Text[] text = new Text[5];

    Rectangle[] rect = new Rectangle[5];
    for (int i = 0; i < 5; i++) {
        rect[i] = new Rectangle(100 * i, 300, 40, 40);
        rect[i].setArcHeight(10);
        rect[i].setArcWidth(10);
        rect[i].setFill(Color.ORANGE);
        text[i] = new Text(Integer.toString(a[i]));
        text[i].setFont(Font.font("VERDANA", FontWeight.BOLD, 12));

        root.getChildren().addAll(rect[i], text[i]);
    }

    // Selection Sort
    int min;
    for (int i = 0; i < a.length; i++) {

        min = i;
        for (int j = i + 1; j < a.length; j++) {
            if (a[j] < a[min]) {
                min = j;

            }
        }
        if (min != i) {
            int temp = a[i];
            a[i] = a[min];
            a[min] = temp;
            swap1(rect[i], 60, (int) rect[min].getX());
            swap2(rect[min], 60, (int) rect[i].getX());
            Rectangle temporary = rect[i];
            rect[i] = rect[min];
            rect[min] = temporary;

        }
        System.out.println(a[i]);
    }

    Scene scene = new Scene(root, 800, 600);

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


void swap1(Rectangle rect, int d, int sx) {
    Path path1 = new Path(new MoveTo(rect.getX(), rect.getY()),
            new LineTo(rect.getX(), rect.getY() - d),
            new MoveTo(rect.getX(), rect.getY() - d),
            new LineTo(sx, rect.getY() - d),
            new MoveTo(sx, rect.getY() - d),
            new LineTo(sx, rect.getY())
    );
    pathtransition1 = new PathTransition(seconds(1), path1, rect);
    pathtransition1.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
    pathtransition1.setCycleCount(1);

    pathtransition1.setAutoReverse(false);
    pathtransition1.play();
}


void swap2(Rectangle rect, int d, int sx) {

    Path path2 = new Path(new MoveTo(rect.getX(), rect.getY()),
            new LineTo(rect.getX(), rect.getY() + d),
            new MoveTo(rect.getX(), rect.getY() + d),
            new LineTo(sx, rect.getY() + d),
            new MoveTo(sx, rect.getY() + d),
            new LineTo(sx, rect.getY())
    );
    pathtransition2 = new PathTransition(seconds(4), path2, rect);
    pathtransition2.setOrientation(PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT);
    pathtransition2.setCycleCount(1);
    pathtransition2.setAutoReverse(false);
    pathtransition2.play();

}

推荐答案

在你的代码排序代码在应用程序线程上运行。这意味着将在任何动画完成或甚至开始运行之前创建所有交换动画。这意味着每个动画都在同一时间运行。

In your code the sorting code runs on the application thread. This means all the swap animations will be created before any animation has finished or even started running. This means every animation runs at the same time.

问题的解决方案是保存有关交换的数据，然后检索该数据以进行动画。

The solution to your problem would be saving the data about the swaps and later retrieve that data to do the animation.

注意：以下示例仅使用翻译属性进行定位以简化：

Note: the following example only uses the translation properties for positioning for simplicity:

private static class AnimationElements {

    private final PathTransition transition;
    private final MoveTo start;
    private final LineTo horizontalMove;

    public AnimationElements(double height) {
        this.start = new MoveTo();
        this.horizontalMove = new LineTo();
        horizontalMove.setAbsolute(false);

        LineTo l1 = new LineTo(0, height);
        l1.setAbsolute(false);
        LineTo l2 = new LineTo(0, -height);
        l2.setAbsolute(false);

        this.transition = new PathTransition(Duration.seconds(4), new Path(start, l1, horizontalMove, l2));
    }

    public void init(Node movedNode, Node moveEnd) {
        // init animation according to positions of the Nodes to move
        double sx = movedNode.getTranslateX();
        double dx = moveEnd.getTranslateX() - sx;
        start.setX(sx + movedNode.getLayoutBounds().getWidth() / 2);
        start.setY(movedNode.getTranslateY() + movedNode.getLayoutBounds().getHeight() / 2);
        horizontalMove.setX(dx/*+movedNode.getLayoutBounds().getWidth()/2*/);
        transition.setNode(movedNode);
    }

    public PathTransition getTransition() {
        return transition;
    }

}

private static class Swap {

    private final int index1;
    private final int index2;

    public Swap(int index1, int index2) {
        this.index1 = index1;
        this.index2 = index2;
    }

    public void init(AnimationElements animation1, AnimationElements animation2, Node[] sortNodes) {
        // initialize both positions
        Node n1 = sortNodes[index1];
        Node n2 = sortNodes[index2];
        animation1.init(n1, n2);
        animation2.init(n2, n1);

        // swap order to be correct for the next swap
        sortNodes[index2] = n1;
        sortNodes[index1] = n2;
    }
}

@Override
public void start(Stage primaryStage) {
    // create list of swaps to execute; could be generated by sorting algorithm
    List<Swap> swaps = Arrays.asList(new Swap(0, 1), new Swap(1, 2), new Swap(3, 4), new Swap(0, 4));

    AnimationElements animationElements1 = new AnimationElements(100);
    AnimationElements animationElements2 = new AnimationElements(-100);

    // both swap animations happen simultaniously
    ParallelTransition animation = new ParallelTransition(animationElements1.getTransition(), animationElements2.getTransition());

    Color[] colors = new Color[]{
        Color.RED,
        Color.BLUE,
        Color.LIME,
        Color.YELLOW,
        Color.ORANGE
    };
    Node[] nodes = new Node[5];
    for (int i = 0; i < nodes.length; i++) {
        Rectangle rect = new Rectangle(100, 20, colors[i]);
        rect.setTranslateY(200);
        rect.setTranslateX(i * 100);
        nodes[i] = rect;
    }

    Iterator<Swap> iterator = swaps.iterator();
    animation.setOnFinished(evt -> {
        if (iterator.hasNext()) {
            // continue with next swap
            iterator.next().init(animationElements1, animationElements2, nodes);
            animation.play();
        }
    });
    if (iterator.hasNext()) {
        // execute first swap
        iterator.next().init(animationElements1, animationElements2, nodes);
        animation.play();
    }

    Pane root = new Pane(nodes);

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

    primaryStage.setScene(scene);
    primaryStage.show();
}

这篇关于Javafx：交换矩形形状以及锯切数组元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！