AntV G6: 实现画布拖拽、放缩和节点拖拽功能

在使用 AntV G6 创建交互式图形时，实现画布拖拽、放缩和节点拖拽功能是非常常见的需求。下面我们将分步骤介绍如何实现这些功能。
一、画布拖拽

1. 创建一个 G6 实例，并在实例化时启用画布拖拽功能。

   const graph = new G6.Graph({
   container: 'mountNode', // 指定挂载容器
   width: 800, // 画布宽度
   height: 600, // 画布高度
   draggable: true, // 启用画布拖拽
   });

2. 通过监听 dragstart、drag 和 dragend 事件，实现画布拖拽的逻辑。

   graph.on('dragstart', (evt) => {
   // 拖拽开始时触发的逻辑
   });
   graph.on('drag', (evt) => {
   // 拖拽过程中触发的逻辑，可以更新画布位置
   const x = evt.x;
   const y = evt.y;
   graph.moveTo(x, y);
   });
   graph.on('dragend', (evt) => {
   // 拖拽结束时触发的逻辑
   });

   二、画布放缩
3. 启用鼠标滚轮事件以实现画布放缩功能。

   graph.on('wheel', (evt) => {
   // 计算缩放比例，并更新画布视图范围
   const scale = evt.dScale; // dScale 是缩放比例，正值表示放大，负值表示缩小
   graph.scale(scale, [evt.x, evt.y]);
   });

   三、节点拖拽
4. 在创建节点时，为节点添加可拖拽的属性。

   const node = {
   id: 'node1', // 节点唯一标识符
   label: 'Node 1', // 节点标签文本
   draggable: true, // 启用节点拖拽功能
   };

5. 通过监听 dragstart、drag 和 dragend 事件，实现节点拖拽的逻辑。

   graph.on('node:dragstart', (evt) => {
   // 节点拖拽开始时触发的逻辑
   });
   graph.on('node:drag', (evt) => {
   // 节点拖拽过程中触发的逻辑，可以更新节点位置
   const node = evt.item; // 获取被拖拽的节点实例
   const x = evt.x; // 更新节点 x 坐标位置
   const y = evt.y; // 更新节点 y 坐标位置
   node.setPosition([x, y]);
   });
   graph.on('node:dragend', (evt) => {
   // 节点拖拽结束时触发的逻辑
   });