JavaFX —— 拖拽結點

在學校裏複習完數據結構的樹結構後，想使用 JavaFX 把樹給畫出來，其中樹的結點我希望做成可拖拽，這裏簡單記錄下 JavaFX 的鼠標拖拽。

拖拽是 GUI 中常見的用戶交互，經常通過將鼠標指針變爲手勢來提醒用戶某個結點可點擊：

而當用戶點擊鼠標（準確來說是指按壓鼠標不放）時，鼠標指針將變爲十字來提醒用戶該結點可拖拽：

上訴兩種鼠標指針變化都很簡單，只要在相應的事件處理器中進行設置即可：

public class DraggableDemo extends Application {
    private void draggable(Node node) {
        // 提示用戶該結點可點擊
        node.addEventHandler(MouseEvent.MOUSE_ENTERED, event -> node.setCursor(Cursor.HAND));
        node.addEventHandler(MouseEvent.MOUSE_EXITED, event -> node.setCursor(Cursor.DEFAULT));
        
        
        // 提示用戶該結點可拖拽
        node.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> node.setCursor(Cursor.MOVE));
        node.addEventHandler(MouseEvent.MOUSE_RELEASED, event -> node.setCursor(Cursor.DEFAULT));


        // ... 剩餘代碼 ...
    }
}

下面實現結點的拖拽，這裏以 X 軸爲參考進行說明：

在圖中，我們要計算的未知數是 x（y 軸方向上的變量暫時不考慮），其中 x = layoutX + distanceX 。另外在用戶按壓鼠標時，我們需要緩存一下按壓事件所發生的位置座標。下面來實現結點的拖拽功能，變量 y 的計算方式與 x 類似。

我們首先寫一個內部類 Position 專門用來表示座標：

public class DraggableDemo extends Application {
    private static class Position {
        double x;
        double y;
    }
    // ... ...
}

然後我們重寫一下原來的 draggable(Node node) 方法:

private void draggable(Node node) {
    final Position pos = new Position();
    
    // 提示用戶該結點可點擊
    node.addEventHandler(MouseEvent.MOUSE_ENTERED, event -> node.setCursor(Cursor.HAND));
    node.addEventHandler(MouseEvent.MOUSE_EXITED, event -> node.setCursor(Cursor.DEFAULT));

    // 提示用戶該結點可拖拽
    node.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> {
	    node.setCursor(Cursor.MOVE);

        // 當按壓事件發生時，緩存事件發生的位置座標
	    pos.x = event.getX();
	    pos.y = event.getY();
    });
    node.addEventHandler(MouseEvent.MOUSE_RELEASED, event -> node.setCursor(Cursor.DEFAULT));

    // 實現拖拽功能
    node.addEventHandler(MouseEvent.MOUSE_DRAGGED, event -> {
        double distanceX = event.getX() - pos.x;
        double distanceY = event.getY() - pos.y;
        
        double x = node.getLayoutX() + distanceX;
        double y = node.getLayoutY() + distanceY;

        // 計算出 x、y 後將結點重定位到指定座標點 (x, y)
        node.relocate(x, y);
    });
}

接下來編寫一個函數來創建結點：

private Pane generateCircleNode(String data) {
    Pane node = new StackPane();

    Circle circle = new Circle(20);
    circle.setStyle("-fx-fill: rgb(51,184,223)");

    Text text = new Text(data);
    text.setStyle("-fx-fill: rgb(93,93,93);-fx-font-weight: bold;");

    node.getChildren().addAll(circle, text);

    return node;
}

// 進行測試
@Override
public void start(Stage primaryStage) throws Exception {
    Pane root = new Pane();
    Scene scene = new Scene(root, 800, 800);
    primaryStage.setScene(scene);
    primaryStage.show();

    Pane node1 = generateCircleNode("1");
    Pane node2 = generateCircleNode("2");

    node1.relocate(50, 50);
    node2.relocate(300, 150);

    draggable(node1);
    draggable(node2);

    root.getChildren().addAll(node1, node2);
}

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

假設兩個結點具有某種關係，我們一般會將兩結點相連。所連直線的起始座標應該與其中一結點的中心座標進行綁定；而直線的終點座標應該與另一結點的中心座標進行綁定。

// 進行測試
@Override
public void start(Stage primaryStage) throws Exception {
    Pane root = new Pane();
    Scene scene = new Scene(root, 800, 800);
    primaryStage.setScene(scene);
    primaryStage.show();

    Pane node1 = generateCircleNode("1");
    Pane node2 = generateCircleNode("2");

    // 將結點重定位到任意位置
    node1.relocate(50, 50);
    node2.relocate(300, 150);

    // 使結點可拖拽
    draggable(node1);
    draggable(node2);

    // 創建直線
    Line line = new Line();

    // 將直線的起點座標與 node1 的中心座標進行綁定
    line.startXProperty().bind(node1.layoutXProperty().add(node1.widthProperty().divide(2)));
    line.startYProperty().bind(node1.layoutYProperty().add(node1.heightProperty().divide(2)));

    // 將直線的終點座標與 node2 的中心座標進行綁定
    line.endXProperty().bind(node2.layoutXProperty().add(node2.widthProperty().divide(2)));
    line.endYProperty().bind(node2.layoutYProperty().add(node2.heightProperty().divide(2)));

    root.getChildren().addAll(line, node1, node2);
}

最後是代碼總彙與效果展示：

public class DraggableDemo extends Application {

    private static class Position {
        double x;
        double y;
    }

    private void draggable(Node node) {
        final Position pos = new Position();

        // 提示用戶該結點可點擊
        node.addEventHandler(MouseEvent.MOUSE_ENTERED, event -> node.setCursor(Cursor.HAND));
        node.addEventHandler(MouseEvent.MOUSE_EXITED, event -> node.setCursor(Cursor.DEFAULT));

        // 提示用戶該結點可拖拽
        node.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> {
            node.setCursor(Cursor.MOVE);

            // 當按壓事件發生時，緩存事件發生的位置座標
            pos.x = event.getX();
            pos.y = event.getY();
        });
        node.addEventHandler(MouseEvent.MOUSE_RELEASED, event -> node.setCursor(Cursor.DEFAULT));

        // 實現拖拽功能
        node.addEventHandler(MouseEvent.MOUSE_DRAGGED, event -> {
            double distanceX = event.getX() - pos.x;
            double distanceY = event.getY() - pos.y;

            double x = node.getLayoutX() + distanceX;
            double y = node.getLayoutY() + distanceY;

            // 計算出 x、y 後將結點重定位到指定座標點 (x, y)
            node.relocate(x, y);
        });
    }

    private Pane generateCircleNode(String data) {
        Pane node = new StackPane();

        Circle circle = new Circle(20);
        circle.setStyle("-fx-fill: rgb(51,184,223)");

        Text text = new Text(data);
        text.setStyle("-fx-fill: rgb(93,93,93);-fx-font-weight: bold;");

        node.getChildren().addAll(circle, text);

        return node;
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        Pane root = new Pane();
        Scene scene = new Scene(root, 800, 800);
        primaryStage.setScene(scene);
        primaryStage.show();

        Pane node1 = generateCircleNode("1");
        Pane node2 = generateCircleNode("2");

        // 將結點重定位到任意位置
        node1.relocate(50, 50);
        node2.relocate(300, 150);

        // 使結點可拖拽
        draggable(node1);
        draggable(node2);

        // 創建直線
        Line line = new Line();

        // 將直線的起點座標與 node1 的中心座標進行綁定
        line.startXProperty().bind(node1.layoutXProperty().add(node1.widthProperty().divide(2)));
        line.startYProperty().bind(node1.layoutYProperty().add(node1.heightProperty().divide(2)));

        // 將直線的終點座標與 node2 的中心座標進行綁定
        line.endXProperty().bind(node2.layoutXProperty().add(node2.widthProperty().divide(2)));
        line.endYProperty().bind(node2.layoutYProperty().add(node2.heightProperty().divide(2)));

        root.getChildren().addAll(line, node1, node2);
    }

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