在學校里復習完數據結構的樹結構后，想使用 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);
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
