本文简介
点赞 + 关注 + 收藏 = 学会了
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)
方法在画布上添加节点即可。
动手编码
根据前面分析结果,我主要做了以下几步:
- 使用
G6
初始化画板 - 创建节点面板(页面左侧那个控件)
- 允许拖拽元素
draggable="true"
- 监听拖拽结束(事件)
@dragend="addNode(item, $event)"
- 将页面坐标转换为渲染坐标
graph.getPointByClient(clientX, clientY)
- 添加节点
graph.addItem(type, model, stack)
{{ item }}
代码仓库
推荐阅读
点赞 + 关注 + 收藏 = 学会了
代码仓库