在學校裡複習完資料結構的樹結構後，想使用 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);
  primaryStage.setScene(scene);
  primaryStage.show();

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

  // 將結點重定位到任意位置
  node1.relocate(50,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.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,223)");

    Text text = new Text(data);
    text.setStyle("-fx-fill: rgb(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);
    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,node2);
  }

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。