Question

如何在翻译节点的中心之间划一条线？例如，下面的代码片段为：

Client

运行此应用程序将清楚地显示红色和绿色圆圈。但是，没有一条线，因为圆的每个中心都在坐标（0,0）处。然而，圆圈不会相互覆盖，因为其中一个圆圈是平移的。这不起作用：

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);
    }
}

最后，我们假设有一种绘制连接两个圆心的线的方法。如果在绘制线后，我会调用Line line=new Line(circle1.getCenterX()+circle1.getTranslateX(), circle1.getCenterY()+circle1.getTranslateY(), circle2.getCenterX()+circle2.getTranslateX(), circle2.getCenterY()+circle2.getTranslateY());，如何确保circle2一侧的线的端点相应移动？

Answer 1

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在已翻译的节点之间绘制一条线

1 个答案: