g6流程图可以用html做节点吗,基于antv/g6开发流程图编辑器（一）——节点的设计...

gason-editor 设计文档(基于antv/g6-2.0)

基于antv/g6，参考g6-editor编写的一个编辑器,虽然是基于2.0版本，但是2.0和3.0的设计思路基本上一致，只是3.0有扩展一些更好有的功能，2.0会了，3.0很快上手。

节点的设计

节点的参数

节点的基本参数如id，类型等，根据你的业务情况，可以加入各种参数，如图片Image，状态state等，获取时，使用item.getModel()中去获取(具体参考g6的api文档)

节点的展示

很多人在使用g6时，对锚点的使用会很疑惑。

因为g6的锚点是看不见的，所以我们在设计节点时，要画出一个节点，覆盖在锚点上。所以在设计节点时，显示的节点位置要和锚点的位置重合，估需要计算。

如你的节点是个正方形状，某个锚点的位置为[0,0.5],代表的是在上边的中点，所以你在显示节点y坐标为0，x坐标为你节点宽度的一半。

node.png

如上图的节点，代码如下：

` const G6 = require('@antv/g6')

const nodeCache = new Map() // 组件类型缓存

export function registNewNode(node) {

let inPorts = node.