流程图GGEditor 之 自定义节点相关属性

 

自定义节点

注册 -- registerNode

我们通过以下接口往 G6 全局注册节点：

// 注册节点
G6.registerNode(name, {  // 绘制  draw(item) {    return keyShape   },  // 获取锚点  anchor: array || object || callback }, extendShape);

绘制 -- draw

draw 是图项最终绘制的接口，决定了一个图项最终画成什么样。它是 G6 中拓展图形的最小接口，例如：

const data = {  "nodes": [  {  "shape": "customNode",  "id": "node1",  "x": 50,  "y": 100  },  {  "shape": "customNode",  "id": "node2",  "x": 250,  "y": 100  }  ], };  G6.registerNode('customNode', {  draw(item){  const group = item.getGraphicGroup();  const model = item.getModel();  group.addShape('text', {  attrs: {  x: 0,  y: 0,  fill: '#333',  text: '我是一个自定义节点，\n有下面那个方形和我自己组成'  }  });  group.addShape('text', {  attrs: {  x: 0,  y: 0,  fill: '#333',  text: ' ('+model.x+', '+model.y+') \n 原点是组的图坐标',  textBaseline: 'top'  }  });  group.addShape('circle', {  attrs: {  x: 0,  y: 0,  r: 4,  fill: 'blue'  }  });  return group.addShape('rect', {  attrs: {  x: 0,  y: 0,  width: 100,  height: 100,  stroke: 'red'  }  });  } });  const graph = new G6.Graph({  container: 'mountNode', // dom 容器 或 容器ID  width: 500,           // 画布宽  height: 500,             // 画布高 }); graph.read(data);

关键形

draw 方法返回的图形既是该图项的 keyShape -- 关键形。简单来说，keyShape 是该图项参与图形计算的关键图形。所有的击中、锚点、控制点，都是根据关键图形生成的，所以这个形（shape）非常关键。

锚点 -- anchor

锚点是用户设置可用于连接的点 ，是 Node 和 Group 特有的概念。本文档仅介绍一种简单的设置锚点的方式，详细介绍见锚点详解 。

G6.registerNode('customNode', {  anchor: [  [0.5, 1], // 底边中点  [0.5, 0] // 上边中点  ], });

文档来源地址：
https://www.yuque.com/antv/g6/custom-node