JavaFX中怎么實現(xiàn)一個拖拽結(jié)點效果

JavaFX中怎么實現(xiàn)一個拖拽結(jié)點效果，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

拖拽是 GUI 中常見的用戶交互，經(jīng)常通過將鼠標(biāo)指針變?yōu)槭謩輥硖嵝延脩裟硞€結(jié)點可點擊：

而當(dāng)用戶點擊鼠標(biāo)（準(zhǔn)確來說是指按壓鼠標(biāo)不放）時，鼠標(biāo)指針將變?yōu)槭謥硖嵝延脩粼摻Y(jié)點可拖拽：

上訴兩種鼠標(biāo)指針變化都很簡單，只要在相應(yīng)的事件處理器中進(jìn)行設(shè)置即可：

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

下面實現(xiàn)結(jié)點的拖拽，這里以 X 軸為參考進(jìn)行說明：

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

我們首先寫一個內(nèi)部類 Position 專門用來表示坐標(biāo)：

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();    // 提示用戶該結(jié)點可點擊  node.addEventHandler(MouseEvent.MOUSE_ENTERED, event -> node.setCursor(Cursor.HAND));  node.addEventHandler(MouseEvent.MOUSE_EXITED, event -> node.setCursor(Cursor.DEFAULT));  // 提示用戶該結(jié)點可拖拽  node.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> {   node.setCursor(Cursor.MOVE);    // 當(dāng)按壓事件發(fā)生時，緩存事件發(fā)生的位置坐標(biāo)   pos.x = event.getX();   pos.y = event.getY();  });  node.addEventHandler(MouseEvent.MOUSE_RELEASED, event -> node.setCursor(Cursor.DEFAULT));  // 實現(xiàn)拖拽功能  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 后將結(jié)點重定位到指定坐標(biāo)點 (x, y)    node.relocate(x, y);  });}

接下來編寫一個函數(shù)來創(chuàng)建結(jié)點：

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

// 進(jìn)行測試@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);}

假設(shè)兩個結(jié)點具有某種關(guān)系，我們一般會將兩結(jié)點相連。所連直線的起始坐標(biāo)應(yīng)該與其中一結(jié)點的中心坐標(biāo)進(jìn)行綁定；而直線的終點坐標(biāo)應(yīng)該與另一結(jié)點的中心坐標(biāo)進(jìn)行綁定。

// 進(jìn)行測試@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");  // 將結(jié)點重定位到任意位置  node1.relocate(50, 50);  node2.relocate(300, 150);  // 使結(jié)點可拖拽  draggable(node1);  draggable(node2);  // 創(chuàng)建直線  Line line = new Line();  // 將直線的起點坐標(biāo)與 node1 的中心坐標(biāo)進(jìn)行綁定  line.startXProperty().bind(node1.layoutXProperty().add(node1.widthProperty().pide(2)));  line.startYProperty().bind(node1.layoutYProperty().add(node1.heightProperty().pide(2)));  // 將直線的終點坐標(biāo)與 node2 的中心坐標(biāo)進(jìn)行綁定  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();    // 提示用戶該結(jié)點可點擊    node.addEventHandler(MouseEvent.MOUSE_ENTERED, event -> node.setCursor(Cursor.HAND));    node.addEventHandler(MouseEvent.MOUSE_EXITED, event -> node.setCursor(Cursor.DEFAULT));    // 提示用戶該結(jié)點可拖拽    node.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> {      node.setCursor(Cursor.MOVE);      // 當(dāng)按壓事件發(fā)生時，緩存事件發(fā)生的位置坐標(biāo)      pos.x = event.getX();      pos.y = event.getY();    });    node.addEventHandler(MouseEvent.MOUSE_RELEASED, event -> node.setCursor(Cursor.DEFAULT));    // 實現(xiàn)拖拽功能    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 后將結(jié)點重定位到指定坐標(biāo)點 (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");    // 將結(jié)點重定位到任意位置    node1.relocate(50, 50);    node2.relocate(300, 150);    // 使結(jié)點可拖拽    draggable(node1);    draggable(node2);    // 創(chuàng)建直線    Line line = new Line();    // 將直線的起點坐標(biāo)與 node1 的中心坐標(biāo)進(jìn)行綁定    line.startXProperty().bind(node1.layoutXProperty().add(node1.widthProperty().pide(2)));    line.startYProperty().bind(node1.layoutYProperty().add(node1.heightProperty().pide(2)));    // 將直線的終點坐標(biāo)與 node2 的中心坐標(biāo)進(jìn)行綁定    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);  }}

看完上述內(nèi)容，你們掌握J(rèn)avaFX中怎么實現(xiàn)一個拖拽結(jié)點效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！