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