Question

我在解决JavaFX的HBox方面遇到问题的方式与Circle类似。

如果使用圆形，可以手动定位它，使其绑定到不同的节点。这是我迄今为止所做的，通过将Pane作为参考点：

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，就像圆圈一样。这使得在添加或删除端口，调整节点大小等时不需要手动布局计算。因此，使用的代码是：

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（）。但当然这失败了，端口似乎粘在了包含框架的顶部，行为奇怪。有没有解决这个问题？我尝试将父级窗格更改为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

JavaFX HBox布局绑定为Circle

1 个答案: