流程圖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