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

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

您可能感兴趣的文章:

SpringBoot中将@Bean方法解析为BeanDefinition详解
这篇文章主要介绍了SpringBoot中将@Bean方法解析为BeanDefinition详解,得到的BeanDefinition是ConfigurationClassBeanDefinition类型,会为BeanDefinition设置factoryMethodName,这意味着当实例化这个bean的时候将采用工厂方法,需要的朋友可以参考下
2023-12-12
彻底搞定堆排序:二叉堆
二叉堆有两种：最大堆和最小堆。最大堆：父结点的键值总是大于或等于任何一个子节点的键值；最小堆：父结点的键值总是小于或等于任何一个子节点的键值
2021-07-07
浅谈JVM核心之JVM运行和类加载
本篇文章主要介绍了JVM核心之JVM运行和类加载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
nacos(SpringCloud)配置加载过程
Nacos是Spring Cloud的配置中心,通过BootstrapApplicationListener和ConfigFileApplicationListener监听器加载配置文件,并通过PropertySourceBootstrapConfiguration将Nacos配置加载到Spring Boot应用的environment中
2024-12-12
Project Reactor源码解析publishOn使用示例
这篇文章主要为大家介绍了Project Reactor源码解析publishOn使用示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
Spring中@Configuration和@Component注解的区别及原理
这篇文章主要介绍了Spring中@Configuration和@Component注解的区别及原理,从功能上来讲,这些注解所负责的功能的确不相同,但是从本质上来讲,Spring内部都将其作为配置注解进行处理,需要的朋友可以参考下
2023-11-11
SpringBoot--- SpringSecurity进行注销权限控制的配置方法
这篇文章主要介绍了SpringBoot--- SpringSecurity进行注销，权限控制,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-08-08
Java面向对象程序设计：抽象类，接口用法实例分析
这篇文章主要介绍了Java面向对象程序设计：抽象类，接口用法,结合实例形式分析了java抽象类与接口相关概念、原理、用法与操作注意事项,需要的朋友可以参考下
2020-04-04
Spring Cloud中使用Eureka的详细过程
Eureka 是 Netflix 开源的一个服务发现组件,它在微服务架构中扮演着重要的角色,这篇文章主要介绍了Spring Cloud中如何使用Eureka,需要的朋友可以参考下
2024-07-07
Java语言求解完美数代码分析
这篇文章主要介绍了Java语言求解完美数代码分析，具有一定参考价值，需要的朋友可以了解下。
2017-12-12

JavaFX实现拖拽结点效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具