Connecting Circles with a Polyline JavaFX - javafx

Question

I have created circles on a graph in JavaFX, and I want to connect those circles with a polyline. Does anyone know the syntax for doing this? Thanks!

Answer 1

A Polyline may work, but you can do this easier, if you use the Path class, since this allows you to access to the individual elements of the path (PathElements). You can use bindings to bind the position of the line points to the positions of the circles. This way the lines will stay at the appropriate positions, even if you move the circles later.
Example
private static void bindLinePosTo(Circle circle, LineTo lineTo) {
lineTo.xProperty().bind(circle.centerXProperty());
lineTo.yProperty().bind(circle.centerYProperty());
}
private static void animate(Circle circle, Duration duration, double dy) {
Timeline animation = new Timeline(
new KeyFrame(Duration.ZERO, new KeyValue(circle.centerYProperty(), circle.getCenterY())),
new KeyFrame(duration, new KeyValue(circle.centerYProperty(), circle.getCenterY()+dy)));
animation.setAutoReverse(true);
animation.setCycleCount(Animation.INDEFINITE);
animation.play();
}
#Override
public void start(Stage primaryStage) {
MoveTo start = new MoveTo();
LineTo line1 = new LineTo();
LineTo line2 = new LineTo();
Circle c1 = new Circle(10, 100, 5);
Circle c2 = new Circle(50, 100, 5);
Circle c3 = new Circle(100, 100, 5);
c1.setFill(Color.RED);
c2.setFill(Color.RED);
c3.setFill(Color.RED);
start.xProperty().bind(c1.centerXProperty());
start.yProperty().bind(c1.centerYProperty());
bindLinePosTo(c2, line1);
bindLinePosTo(c3, line2);
Path path = new Path(start, line1, line2);
Pane root = new Pane(path, c1, c2, c3);
animate(c1, Duration.seconds(1), 100);
animate(c2, Duration.seconds(2), 50);
animate(c3, Duration.seconds(0.5), 150);
Scene scene = new Scene(root, 110, 300);
primaryStage.setScene(scene);
primaryStage.show();
}

Answer 2

Use the Binding API, e. g. like this.