如何使窗格停留在连接javafx中的draggablenode的线上

Question

我正在设计带有可拖动节点的图形结构的UI。在图中，我有一个称为“关系”的组件（它是一个窗格），它显示了两个节点之间的链接。 我想保持联系并与行中的行一起移动。

当前的UI设计如下所示

预期的结果是：

Answer 1

修改线的末端坐标后，您需要刷新节点的位置。为了避免每次布局遍历都多次触发计算，我建议从父级的layoutChildren方法执行此操作，但是您也可以从侦听器到startX，endY进行此操作， ...属性。但是，这将导致一些不必要的计算。

关于计算节点的位置：节点的中心需要与直线的中点对齐，因此您需要为markTopLeft求解以下方程式：

markTopLeft + (markWidth, markHeight) / 2 = (lineStart + lineEnd) / 2

markTopLeft = (lineStart + lineEnd - (markWidth, markHeight)) / 2

示例

窗格允许自定义布局计算

public class PostProcessPane extends Pane {

    private final Set<Node> modifiedChildren = new HashSet<>();
    private final Set<Node> modifiedChildrenUnmodifiable = Collections.unmodifiableSet(modifiedChildren);
    private final List<Consumer<Set<Node>>> postProcessors = new ArrayList<>();

    public List<Consumer<Set<Node>>> getPostProcessors() {
        return postProcessors;
    }

    private final ChangeListener listener = (o, oldValue, newValue) -> modifiedChildren.add((Node) ((ReadOnlyProperty) o).getBean());

    private void initListener() {
        getChildren().addListener((ListChangeListener.Change<? extends Node> c) -> {
            while (c.next()) {
                if (c.wasRemoved()) {
                    for (Node n : c.getRemoved()) {
                        n.boundsInParentProperty().removeListener(listener);
                    }
                }
                if (c.wasAdded()) {
                    for (Node n : c.getAddedSubList()) {
                        n.boundsInParentProperty().addListener(listener);
                    }
                }
            }
        });
    }

    public PostProcessPane() {
        initListener();
    }

    public PostProcessPane(Node... children) {
        super(children);
        initListener();

        for (Node n : children) {
            n.boundsInParentProperty().addListener(listener);
        }
    }

    @Override
    protected void layoutChildren() {
        super.layoutChildren();

        if (!modifiedChildren.isEmpty()) {
            for (Consumer<Set<Node>> processor : postProcessors) {
                processor.accept(modifiedChildrenUnmodifiable);
            }
            modifiedChildren.clear();
        }

    }

}

用法

@Override
public void start(Stage primaryStage) throws Exception {
    Rectangle r1 = new Rectangle(200, 50, Color.BLUE);
    Rectangle r2 = new Rectangle(200, 50, Color.RED);
    Rectangle mark = new Rectangle(200, 50, Color.YELLOW);
    Line line = new Line();

    r1.setX(20);
    r2.setX(380);
    r2.setY(450);

    PostProcessPane root = new PostProcessPane(line, r1, r2, mark);
    root.getPostProcessors().add(changedNodes -> {
        if (changedNodes.contains(r1) || changedNodes.contains(r2) || changedNodes.contains(mark)) {
            Bounds bounds1 = r1.getBoundsInParent();
            Bounds bounds2 = r2.getBoundsInParent();

            // refresh line ends
            line.setStartX(bounds1.getMinX() + bounds1.getWidth() / 2);
            line.setStartY(bounds1.getMaxY());
            line.setEndX(bounds2.getMinX() + bounds2.getWidth() / 2);
            line.setEndY(bounds2.getMinY());

            // recalculate mark position
            mark.setX((line.getStartX() + line.getEndX() - mark.getWidth()) / 2);
            mark.setY((line.getStartY() + line.getEndY() - mark.getHeight()) / 2);
        }
    });

    // add some movement for the nodes
    Timeline timeline = new Timeline(
            new KeyFrame(Duration.ZERO,
                    new KeyValue(r1.xProperty(), r1.getX()),
                    new KeyValue(r1.yProperty(), r1.getY()),
                    new KeyValue(r2.xProperty(), r2.getX())),
            new KeyFrame(Duration.seconds(1),
                    new KeyValue(r2.xProperty(), r1.getX())),
            new KeyFrame(Duration.seconds(2),
                    new KeyValue(r1.xProperty(), r2.getX()),
                    new KeyValue(r1.yProperty(), r2.getY() / 2))
    );
    timeline.setAutoReverse(true);
    timeline.setCycleCount(Animation.INDEFINITE);
    timeline.play();

    Scene scene = new Scene(root);

    primaryStage.setScene(scene);
    primaryStage.show();
}