JavaFX 8在转换的节点之间划一条线 [英] Javafx 8 drawing a line between translated nodes

问题描述

您如何在翻译节点的中心之间划一条线?例如，给出以下代码片段:

How do you draw a line between the centers of translated nodes? Given for example the following code snippet:

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)上，所以不会有直线.但是，由于其中一个圆圈已平移，所以圆圈之间不会相互覆盖.这不起作用:

Running this application will clearly show a red and a green circle. However, there won't be a line because each of the centers of the circles are at the coordinates (0,0). Nevertheless, the circles do not cover each other because one of the circles is translated. This doesn't work:

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

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

Finally, let's assume that there is an approach to draw a line connecting the centers of the two circles. If, after the line is drawn, I would invoke circle2.setTranslateX(50);, how do I ensure that the endpoint of the line on the side of circle2 moves accordingly?

推荐答案

StackPane是一个托管布局窗格，这意味着它可以管理其子节点的位置(默认情况下，将其居中).在StackPane定位节点之后应用转换.这就是为什么圆圈出现在不同的位置，但直线不在您期望的位置的原因.使用Pane代替StackPane将使事情按预期工作.

A StackPane is a managed layout pane, meaning that it manages the positions of its child nodes (by default it centers them); the translation is applied after the StackPane positions the nodes. This is why the circles appear in different locations but the line is not where you expect. Using a Pane instead of a StackPane will make things work as you expect.

要在动态重定位圆时将线相对于圆保持在正确的位置，请绑定startX，startY，endX和endY属性，而不仅仅是设置它们.

To keep the line in the correct position relative to the circles when the circles are repositioned dynamically, bind the startX, startY, endX, and endY properties, instead of just setting them.

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在转换的节点之间划一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！