实现基于节点的图形 GUI 的最佳/最简单方法？答案

【问题标题】：Best / Easiest way to implement node-based graphical GUI?实现基于节点的图形 GUI 的最佳/最简单方法？
【发布时间】：2016-09-18 10:41:51
【问题描述】：

我正在尝试创建一个基于节点的图形界面，例如 blender 或 unreal engine。我尝试过使用 JavaFx，但是在连接节点时遇到了困难——我感觉我正在使用错误的技术来解决问题。

我检查了this 类似的问题，但答案似乎是基于 OOP 原则而不是图形本身。

解决这个问题最简单的方法是什么？有任何想法吗？提前致谢。

【问题讨论】：

您还没有真正描述问题所在。通常对于像这样的“连接”（边缘），我只需将线（或曲线）的起点和终点绑定到相应节点的坐标。
对不起，如果我有点含糊。从概念上讲，我理解如何做到这一点——这只是技术实现。例如，在 JavaFx 中，我会为单个节点使用窗格——但是我该如何连接它们呢？我不能只使用画布节点来绘制每条线。我也不能在画布上完成整个 GUI，因为那样会非常笨拙。在 HTML5 中，我可以很好地绘制线条，但窗格和 GUI 本身要困难得多。我只是希望有人指出我正确的方向:)
使用组节点，为 Box 添加一个矩形，为连接端点添加较小的矩形，为连接添加线条/曲线。

标签： java user-interface javafx graphics nodes

【解决方案1】：

如果您只是想用线连接一些节点，您可能只需将它们添加到窗格中，其中一条线的起点和终点绑定到节点的坐标。

下面是几个可以在窗格周围拖动的矩形的简单示例，线条与它们保持连接。显然你可以改进这一点，使连接线从矩形的适当一侧开始和结束，等等，但它显示了基本思想。

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class ConnectedBoxes extends Application {

    @Override
    public void start(Stage primaryStage) {
        Rectangle startBox = createDraggableBox(50, 50);
        startBox.setX(50);
        startBox.setY(50);

        Rectangle endBox = createDraggableBox(50, 50);
        endBox.setX(350);
        endBox.setY(200);

        Line connector = createConnector(startBox, endBox);

        Pane pane = new Pane(startBox, endBox, connector);
        Scene scene = new Scene(pane, 600, 600);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private Line createConnector(Node start, Node end) {
        Line l = new Line();
        l.startXProperty().bind(Bindings.createDoubleBinding(
                () -> start.getBoundsInParent().getMaxX(),
                start.boundsInParentProperty()));
        l.startYProperty().bind(Bindings.createDoubleBinding(
                () -> start.getBoundsInParent().getMinY() + start.getBoundsInParent().getHeight() / 2,
                start.boundsInParentProperty()));
        l.endXProperty().bind(Bindings.createDoubleBinding(
                () -> end.getBoundsInParent().getMinX(),
                end.boundsInParentProperty()));
        l.endYProperty().bind(Bindings.createDoubleBinding(
                () -> end.getBoundsInParent().getMinY() + end.getBoundsInParent().getHeight() / 2,
                end.boundsInParentProperty()));
        return l ;

    }

    public Rectangle createDraggableBox(int width, int height) {
        Rectangle r = new Rectangle(width, height);
        r.setFill(Color.CORAL);

        DragDelta delta = new DragDelta();

        r.setOnMousePressed(e -> {
            delta.x = e.getX();
            delta.y = e.getY();
        });

        r.setOnMouseDragged(e -> {
            double deltaX = e.getX() - delta.x ;
            double deltaY = e.getY() - delta.y ;
            r.setX(r.getX() + deltaX);
            r.setY(r.getY() + deltaY);
            delta.x = e.getX();
            delta.y = e.getY();
        });

        return r ;
    }

    class DragDelta { double x,y ;}

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

【讨论】：