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;}

// 進行測試@Overridepublic 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);}

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

// 進行測試@Overridepublic 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().pide(2)));  line.startYProperty().bind(node1.layoutYProperty().add(node1.heightProperty().pide(2)));  // 將直線的終點坐標與 node2 的中心坐標進行綁定  line.endXProperty().bind(node2.layoutXProperty().add(node2.widthProperty().pide(2)));  line.endYProperty().bind(node2.layoutYProperty().add(node2.heightProperty().pide(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().pide(2)));    line.startYProperty().bind(node1.layoutYProperty().add(node1.heightProperty().pide(2)));    // 將直線的終點坐標與 node2 的中心坐標進行綁定    line.endXProperty().bind(node2.layoutXProperty().add(node2.widthProperty().pide(2)));    line.endYProperty().bind(node2.layoutYProperty().add(node2.heightProperty().pide(2)));    root.getChildren().addAll(line, node1, node2);  }  public static void main(String[] args) {    Application.launch(args);  }}

看完上述內容，你們掌握JavaFX中怎么實現一個拖拽結點效果的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！