Antv G6 拖拽生成节点

本文简介

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

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

本文主要讲解使用 AntV G6 实现 拖拽生成节点 的功能，如下图所示。

file

本文使用 Vue3 做基础框架，配合 G6 实现上图效果。

分析

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

需要考虑的情景

1、画布可能不是全屏的

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

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

file

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

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

file

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

元素面板是由原生 HTML 生成的，所以需要实现拖拽原生 HTML 元素的功能。

file

查找相关 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)

file

代码仓库

⭐AntV G6 拖拽生成节点

推荐阅读

《vue2 & G6 快速上手》

《Fabric.js 从入门到膨胀》

《Canvas 10款基础滤镜（原理篇）》

《Canvas 从入门到劝朋友放弃（图解版）》

《SVG 从入门到后悔，怎么不早点学起来（图解版）》

《SVG 在前端的7种使用方法，你还知道哪几种？》

点赞 + 关注 + 收藏 = 学会了
代码仓库