JavaFX實(shí)現(xiàn)拖拽結(jié)點(diǎn)效果
在學(xué)校里復(fù)習(xí)完數(shù)據(jù)結(jié)構(gòu)的樹(shù)結(jié)構(gòu)后,想使用 JavaFX 把樹(shù)給畫(huà)出來(lái),其中樹(shù)的結(jié)點(diǎn)我希望做成可拖拽,這里簡(jiǎn)單記錄下 JavaFX 的鼠標(biāo)拖拽。
拖拽是 GUI 中常見(jiàn)的用戶交互,經(jīng)常通過(guò)將鼠標(biāo)指針變?yōu)槭謩?shì)來(lái)提醒用戶某個(gè)結(jié)點(diǎn)可點(diǎn)擊:
而當(dāng)用戶點(diǎn)擊鼠標(biāo)(準(zhǔn)確來(lái)說(shuō)是指按壓鼠標(biāo)不放)時(shí),鼠標(biāo)指針將變?yōu)槭謥?lái)提醒用戶該結(jié)點(diǎn)可拖拽:
上訴兩種鼠標(biāo)指針變化都很簡(jiǎn)單,只要在相應(yīng)的事件處理器中進(jìn)行設(shè)置即可:
public class DraggableDemo extends Application { private void draggable(Node node) { // 提示用戶該結(jié)點(diǎn)可點(diǎn)擊 node.addEventHandler(MouseEvent.MOUSE_ENTERED, event -> node.setCursor(Cursor.HAND)); node.addEventHandler(MouseEvent.MOUSE_EXITED, event -> node.setCursor(Cursor.DEFAULT)); // 提示用戶該結(jié)點(diǎn)可拖拽 node.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> node.setCursor(Cursor.MOVE)); node.addEventHandler(MouseEvent.MOUSE_RELEASED, event -> node.setCursor(Cursor.DEFAULT)); // ... 剩余代碼 ... } }
下面實(shí)現(xiàn)結(jié)點(diǎn)的拖拽,這里以 X 軸為參考進(jìn)行說(shuō)明:
在圖中,我們要計(jì)算的未知數(shù)是 x(y 軸方向上的變量暫時(shí)不考慮),其中 x = layoutX + distanceX 。另外在用戶按壓鼠標(biāo)時(shí),我們需要緩存一下按壓事件所發(fā)生的位置坐標(biāo)。下面來(lái)實(shí)現(xiàn)結(jié)點(diǎn)的拖拽功能,變量 y 的計(jì)算方式與 x 類似。
我們首先寫一個(gè)內(nèi)部類 Position 專門用來(lái)表示坐標(biāo):
public class DraggableDemo extends Application { private static class Position { double x; double y; } // ... ... }
然后我們重寫一下原來(lái)的 draggable(Node node) 方法:
private void draggable(Node node) { final Position pos = new Position(); // 提示用戶該結(jié)點(diǎn)可點(diǎn)擊 node.addEventHandler(MouseEvent.MOUSE_ENTERED, event -> node.setCursor(Cursor.HAND)); node.addEventHandler(MouseEvent.MOUSE_EXITED, event -> node.setCursor(Cursor.DEFAULT)); // 提示用戶該結(jié)點(diǎn)可拖拽 node.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> { node.setCursor(Cursor.MOVE); // 當(dāng)按壓事件發(fā)生時(shí),緩存事件發(fā)生的位置坐標(biāo) pos.x = event.getX(); pos.y = event.getY(); }); node.addEventHandler(MouseEvent.MOUSE_RELEASED, event -> node.setCursor(Cursor.DEFAULT)); // 實(shí)現(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; // 計(jì)算出 x、y 后將結(jié)點(diǎn)重定位到指定坐標(biāo)點(diǎn) (x, y) node.relocate(x, y); }); }
接下來(lái)編寫一個(gè)函數(shù)來(lái)創(chuàng)建結(jié)點(diǎn):
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)行測(cè)試 @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); }
假設(shè)兩個(gè)結(jié)點(diǎn)具有某種關(guān)系,我們一般會(huì)將兩結(jié)點(diǎn)相連。所連直線的起始坐標(biāo)應(yīng)該與其中一結(jié)點(diǎn)的中心坐標(biāo)進(jìn)行綁定;而直線的終點(diǎn)坐標(biāo)應(yīng)該與另一結(jié)點(diǎn)的中心坐標(biāo)進(jìn)行綁定。
// 進(jìn)行測(cè)試 @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é)點(diǎn)重定位到任意位置 node1.relocate(50, 50); node2.relocate(300, 150); // 使結(jié)點(diǎn)可拖拽 draggable(node1); draggable(node2); // 創(chuàng)建直線 Line line = new Line(); // 將直線的起點(diǎn)坐標(biāo)與 node1 的中心坐標(biāo)進(jìn)行綁定 line.startXProperty().bind(node1.layoutXProperty().add(node1.widthProperty().divide(2))); line.startYProperty().bind(node1.layoutYProperty().add(node1.heightProperty().divide(2))); // 將直線的終點(diǎn)坐標(biāo)與 node2 的中心坐標(biāo)進(jìn)行綁定 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(); // 提示用戶該結(jié)點(diǎn)可點(diǎn)擊 node.addEventHandler(MouseEvent.MOUSE_ENTERED, event -> node.setCursor(Cursor.HAND)); node.addEventHandler(MouseEvent.MOUSE_EXITED, event -> node.setCursor(Cursor.DEFAULT)); // 提示用戶該結(jié)點(diǎn)可拖拽 node.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> { node.setCursor(Cursor.MOVE); // 當(dāng)按壓事件發(fā)生時(shí),緩存事件發(fā)生的位置坐標(biāo) pos.x = event.getX(); pos.y = event.getY(); }); node.addEventHandler(MouseEvent.MOUSE_RELEASED, event -> node.setCursor(Cursor.DEFAULT)); // 實(shí)現(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; // 計(jì)算出 x、y 后將結(jié)點(diǎn)重定位到指定坐標(biāo)點(diǎn) (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é)點(diǎn)重定位到任意位置 node1.relocate(50, 50); node2.relocate(300, 150); // 使結(jié)點(diǎn)可拖拽 draggable(node1); draggable(node2); // 創(chuàng)建直線 Line line = new Line(); // 將直線的起點(diǎn)坐標(biāo)與 node1 的中心坐標(biāo)進(jìn)行綁定 line.startXProperty().bind(node1.layoutXProperty().add(node1.widthProperty().divide(2))); line.startYProperty().bind(node1.layoutYProperty().add(node1.heightProperty().divide(2))); // 將直線的終點(diǎn)坐標(biāo)與 node2 的中心坐標(biāo)進(jìn)行綁定 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); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Java StackTraceElement實(shí)例代碼
這篇文章主要介紹了Java StackTraceElement實(shí)例代碼,分享了相關(guān)代碼示例,小編覺(jué)得還是挺不錯(cuò)的,具有一定借鑒價(jià)值,需要的朋友可以參考下2018-02-02Java 帶參數(shù)與帶返回值的方法的定義和調(diào)用
在java中,方法就是用來(lái)完成解決某件事情或?qū)崿F(xiàn)某個(gè)功能的辦法。方法實(shí)現(xiàn)的過(guò)程中,會(huì)包含很多條語(yǔ)句用于完成某些有意義的功能——通常是處理文本,控制輸入或計(jì)算數(shù)值,這篇文章我們來(lái)探究一下帶參數(shù)與帶返回值的方法的定義和調(diào)用2022-04-04SpringBoot實(shí)現(xiàn)識(shí)別圖片中的身份證號(hào)與營(yíng)業(yè)執(zhí)照信息
這篇文章主要為大家詳細(xì)介紹了SpringBoot如何實(shí)現(xiàn)識(shí)別圖片中的身份證號(hào)與營(yíng)業(yè)執(zhí)照信息,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-01-01springboot集成springsession如何實(shí)現(xiàn)分布式session共享
這篇文章主要介紹了springboot集成springsession如何實(shí)現(xiàn)分布式session共享問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09Spring依賴注入Dependency Injection的三種方式
依賴注入(Dependency Injection)和控制反轉(zhuǎn)(Inversion of Control)是同一個(gè)概念。具體含義是:當(dāng)某個(gè)角色(可能是一個(gè)Java實(shí)例,調(diào)用者)需要另一個(gè)角色(另一個(gè)Java實(shí)例,被調(diào)用者)的協(xié)助時(shí),在傳統(tǒng)的程序設(shè)計(jì)過(guò)程中,通常由調(diào)用者來(lái)創(chuàng)建被調(diào)用者的實(shí)例2023-02-02SpringBoot?集成Resteasy實(shí)現(xiàn)RESTFul接口的詳細(xì)過(guò)程
這篇文章主要介紹了SpringBoot集成Resteasy實(shí)現(xiàn)RESTFul接口,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08SpringBoot與knife4j的整合使用過(guò)程
Knife4j?是一個(gè)基于Swagger構(gòu)建的開(kāi)源?JavaAPI文檔工具,主要包括兩大核心功能:文檔說(shuō)明和在線調(diào)試,這篇文章主要介紹了SpringBoot與knife4j的整合使用,需要的朋友可以參考下2024-08-08