JavaFX实现拖拽结点效果

更新时间：2019年12月23日 10:02:32 作者：Virjid

这篇文章主要为大家详细介绍了JavaFX实现拖拽结点效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

在学校里复习完数据结构的树结构后，想使用 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);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Java StackTraceElement实例代码
这篇文章主要介绍了Java StackTraceElement实例代码，分享了相关代码示例，小编觉得还是挺不错的，具有一定借鉴价值，需要的朋友可以参考下
2018-02-02
java如何生成登录随机验证码
这篇文章主要为大家详细介绍了java如何生成登录随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
Java 带参数与带返回值的方法的定义和调用
在java中，方法就是用来完成解决某件事情或实现某个功能的办法。方法实现的过程中，会包含很多条语句用于完成某些有意义的功能——通常是处理文本，控制输入或计算数值，这篇文章我们来探究一下带参数与带返回值的方法的定义和调用
2022-04-04
Java的三种代理模式简述
这篇文章主要简述Java的三种代理模式，java的代理模式主要包括静态代理、动态代理、Cglib代理，感兴趣的小伙伴可以参考下面文章的具体内容
2021-09-09
SpringBoot实现识别图片中的身份证号与营业执照信息
这篇文章主要为大家详细介绍了SpringBoot如何实现识别图片中的身份证号与营业执照信息,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
2024-01-01
springboot集成springsession如何实现分布式session共享
这篇文章主要介绍了springboot集成springsession如何实现分布式session共享问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-09-09
Spring依赖注入Dependency Injection的三种方式
依赖注入(Dependency Injection)和控制反转(Inversion of Control)是同一个概念。具体含义是:当某个角色(可能是一个Java实例，调用者)需要另一个角色(另一个Java实例，被调用者)的协助时，在传统的程序设计过程中，通常由调用者来创建被调用者的实例
2023-02-02
SpringBoot 集成Resteasy实现RESTFul接口的详细过程
这篇文章主要介绍了SpringBoot集成Resteasy实现RESTFul接口,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-08-08
SpringBoot与knife4j的整合使用过程
Knife4j 是一个基于Swagger构建的开源 JavaAPI文档工具,主要包括两大核心功能:文档说明和在线调试,这篇文章主要介绍了SpringBoot与knife4j的整合使用,需要的朋友可以参考下
2024-08-08
Java 线程池详解
本文给大家总结了java中的线程池的相关问题，非常的详细也很实用，有需要的小伙伴可以参考下。
2016-03-03

JavaFX实现拖拽结点效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具