Javafx 8 在翻译后的节点之间画一条线

Question

你如何在翻译节点的中心之间画一条线？例如，给出以下代码片段：

public class Test extends Application{
    @Override
    public void start(Stage primaryStage) {
        StackPane root = new StackPane();

        Circle circle1=new Circle(10, Color.GREEN);
        root.getChildren().add(circle1);
        Circle circle2=new Circle(10, Color.RED);
        root.getChildren().add(circle2);

        Scene scene = new Scene(root, 300, 250);
        primaryStage.setScene(scene);
        primaryStage.show();

        circle1.setTranslateX(100);

        Line line=new Line(circle1.getCenterX(), circle1.getCenterY(), circle2.getCenterX(), circle2.getCenterY());
        root.getChildren().add(line);
    }
    public static void main(String[] args) {
        launch(args);
    }
}

运行这个应用程序会清楚地显示一个红色和一个绿色的圆圈。但是，不会有一条线，因为圆的每个圆心都位于坐标 (0,0) 处。尽管如此，圆圈并没有相互覆盖，因为其中一个圆圈是平移的。这不起作用：

Line line=new Line(circle1.getCenterX()+circle1.getTranslateX(), circle1.getCenterY()+circle1.getTranslateY(), circle2.getCenterX()+circle2.getTranslateX(), circle2.getCenterY()+circle2.getTranslateY());

最后，我们假设有一种方法可以画一条连接两个圆心的线。如果在画完线后调用circle2.setTranslateX(50);，如何确保circle2 一侧的线端点相应移动？

Answer 1

A StackPane 是一个托管布局窗格，这意味着它管理其子节点的位置（默认情况下它将它们居中）；在 StackPane 定位节点之后应用翻译。这就是为什么圆圈出现在不同位置但直线不在您期望的位置的原因。使用 Pane 而不是 StackPane 将使事情如您所愿。

要在动态重新定位圆圈时使直线相对于圆圈处于正确位置，请绑定 startX、startY、endX 和 endY属性，而不仅仅是设置它们。

import javafx.animation.Animation;
import javafx.animation.ParallelTransition;
import javafx.animation.SequentialTransition;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.stage.Stage;
import javafx.util.Duration;

public class LineConnectingCircles extends Application{
    @Override
    public void start(Stage primaryStage) {
        Pane root = new Pane();

        Circle circle1=new Circle(10, Color.GREEN);
        root.getChildren().add(circle1);
        Circle circle2=new Circle(10, Color.RED);
        root.getChildren().add(circle2);

        // move circles so we can see them:

        circle1.setTranslateX(100);

        circle2.setTranslateY(50);


        Line line = new Line();

        // bind ends of line:
        line.startXProperty().bind(circle1.centerXProperty().add(circle1.translateXProperty()));
        line.startYProperty().bind(circle1.centerYProperty().add(circle1.translateYProperty()));
        line.endXProperty().bind(circle2.centerXProperty().add(circle2.translateXProperty()));
        line.endYProperty().bind(circle2.centerYProperty().add(circle2.translateYProperty()));

        root.getChildren().add(line);

        // create some animations for the circles to test the line binding:

        Button button = new Button("Animate");

        TranslateTransition circle1Animation = new TranslateTransition(Duration.seconds(1), circle1);
        circle1Animation.setByY(150);


        TranslateTransition circle2Animation = new TranslateTransition(Duration.seconds(1), circle2);
        circle2Animation.setByX(150);

        ParallelTransition animation = new ParallelTransition(circle1Animation, circle2Animation);

        animation.setAutoReverse(true);
        animation.setCycleCount(2);
        button.disableProperty().bind(animation.statusProperty().isEqualTo(Animation.Status.RUNNING));
        button.setOnAction(e -> animation.play());

        BorderPane.setAlignment(button, Pos.CENTER);
        BorderPane.setMargin(button, new Insets(10));

        Scene scene = new Scene(new BorderPane(root, null, null, button, null), 300, 250);
        primaryStage.setScene(scene);
        primaryStage.show();

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

Javafx 8 在翻译后的节点之间画一条线

Javafx 8 drawing a line between translated nodes

javafx-8