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