Antv G6 拖拽生成节点

theme: smartblue

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情

本文简介

点赞 + 关注 + 收藏 = 学会了

AntV G6

是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。

本文主要讲解使用

AntV G6

实现 拖拽生成节点 的功能，如下图所示。

本文使用

Vue3

做基础框架，配合

G6

实现上图效果。

分析

在动手编码之前需要先对使用场景做一个分析。

需要考虑的情景

1、画布可能不是全屏的

在真实项目中，使用

G6

做的拓扑图，画布有可能不是全屏的，很大可能有左侧导航栏、顶部区域，甚至还有也叫区域等等呢个。

此时需要考虑鼠标所在的屏幕坐标和画布坐标的转换。

2、画布有拖拽和缩放功能

如果画布支持拖拽和缩放，那鼠标所在的屏幕坐标和画布对应的坐标会更复杂。

3、元素面板如何实现拖拽功能？

元素面板是由原生

HTML

生成的，所以需要实现拖拽原生

HTML

元素的功能。

查找相关 API

坐标转换

上面的需求中，第1点和第2点其实都可以归为坐标转换。

如果要我们手动计算坐标的话其实还是挺麻烦的，好在

G6

为我们提供了一个

API

，可以将屏幕坐标转换成画布坐标。

graph.getPointByClient(clientX, clientY)

拖拽

如果你不需要兼容 IE8 的话，可以在

HTML

元素上将

draggable

属性设置为

true

。

设置完，对应的元素就可以拖拽了。

比如这样做，这个

div

就已经具备被拖拽的能力。

  雷猴
 

之后通过

dragend

事件可以监听到拖拽完鼠标松开的时刻，在这个事件中，将松开鼠标时的指针所在屏幕坐标转换成画布对应的坐标，再通过

graph.addItem(type, model, stack)

方法在画布上添加节点即可。

动手编码

根据前面分析结果，我主要做了以下几步：

1. 使用 G6 初始化画板
2. 创建节点面板(页面左侧那个控件)
3. 允许拖拽元素 draggable="true"
4. 监听拖拽结束(事件) @dragend="addNode(item, $event)"
5. 将页面坐标转换为渲染坐标 graph.getPointByClient(clientX, clientY)
6. 添加节点 graph.addItem(type, model, stack)

  

    {{ item }}