JavaFX HBox 布局绑定为 Circle

Question

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

如果使用圆形，可以手动定位它，使其绑定到不同的节点。这是我到目前为止所做的，将窗格作为参考点：

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

窗格（节点）用作图形节点，可以拖动和调整大小。圆圈用作图中边连接的端口/终端。看到节点应该有多个，想法是将圆圈放入一个 HBox 中，该 HBox 像圆圈一样连接/绑定到窗格。这使得在添加或删除端口、调整节点大小等时不需要手动布局计算。因此使用的代码是：

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 换成 Circle 并使用 layoutXProperty()，因为没有 centerXProperty()。但这当然失败了，端口似乎粘在包含框架的顶部，表现得很奇怪。有解决办法吗？我尝试将 parenting Pane 更改为 anchorPane，这允许手动将 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