JavaFX HBox布局绑定为圆形

Question

我在将JavaFX的HBox定位成与Circle类似的方式时遇到了问题。

如果使用圆形形状，则可以手动定位它，使其绑定到不同的节点。这是我到现在为止所做的，通过使用一个窗格作为参考点：

Pane node; //can be dragged around/resized
//...
Circle terminal = new Circle(10);
terminal.setStroke(Color.GREEN);
terminal.setFill(Color.GREEN);
terminal.centerXProperty().bind( node.layoutXProperty() );
terminal.centerYProperty().bind( node.layoutYProperty() );

Pane node; //can be dragged around/resized
//...
HBox terminalContainer = new HBox();
terminalContainer.layoutXProperty().bind( node.layoutXProperty() );
terminalContainer.layoutYProperty().bind( node.layoutYProperty() );
//... adding circles into HBox as scenegraph children

唯一的区别是将HBox替换为圆圈，并使用layoutXProperty()，因为没有centerXProperty（）。但这当然失败了，端口看起来粘在包含框架的顶部，行为奇怪。有解决办法吗？我尝试将“家长”窗格更改为“锚定窗格”，这允许手动将HBox锚定在正确的位置，但导致了调整大小/拖动代码的问题。

最小示例：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class Main2 extends Application {

    private AnchorPane component;

    @Override
    public void start(Stage primaryStage) {
        component = new AnchorPane();
        Scene scene = new Scene(component, 1024, 768);
        scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();

        //This works, but is hard to maintain
        Cell c1 = new Cell();
        Cell c2 = new Cell();
        Port p1 = new Port(c1);
        Port p2 = new Port(c2);
        component.getChildren().addAll(c1, c2, p1, p2);
        c1.relocate(150, 150);
        c2.relocate(550, 550);
        //This does not work, even if unbinding circles, but is simpler
        HBox pc1 = new HBox();
        HBox pc2 = new HBox();
        pc1.layoutXProperty().bind( c1.layoutXProperty() );
        pc1.layoutYProperty().bind( c1.layoutYProperty() );
        pc2.layoutXProperty().bind( c2.layoutXProperty() );
        pc2.layoutYProperty().bind( c2.layoutYProperty() );
        Port p3 = new Port(c1);
        Port p4 = new Port(c2);
        pc1.getChildren().add(p3);
        pc2.getChildren().add(p4);
        component.getChildren().addAll(pc1, pc2);
    }

    class Cell extends Pane {
        public Cell() {
            Rectangle view = new Rectangle(50,50);
            view.setStroke(Color.DODGERBLUE);
            view.setFill(Color.DODGERBLUE);
            getChildren().add(view);
        }
    }

    class Port extends Pane {
        public Port(Cell owner) {
            Circle view = new Circle(10);
            view.setStroke(Color.GREEN);
            view.setFill(Color.GREEN);
            view.centerXProperty().bind( owner.layoutXProperty() );
            view.centerYProperty().bind( owner.layoutYProperty() );
            getChildren().add(view);
        }
    }

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

Answer 1

在绑定layoutXProperty两次而不是layoutYProperty facepalm的代码中出现了一个错误