概述

本文档主要向大家介绍如何拓展 G6 的 节点 ，如有描述不清楚、有误的地方欢迎大家在 GitHub 上提 Issue 指正，或是直接 PR 修缮，根据您的贡献度，我们会视情况将您加入 AntV 共建者名录 :-)

提示 : 在使用自定义图项之前，应尽量熟练掌握绘图引擎 G 的使用。

注册 — registerNode

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

  1. // 注册节点
  2. G6.registerNode(name, {
  3.   // 绘制
  4.   draw(item) {
  5.     return keyShape
  6.   },
  7.   // 获取锚点
  8.   anchor: array || object || callback
  9. }, extendShape);

绘制 — draw

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

  1. const data = {
  2.   "nodes": [
  3.     {
  4.       "shape": "customNode",
  5.       "id": "node1",
  6.       "x": 50,
  7.       "y": 100
  8.     },
  9.     {
  10.       "shape": "customNode",
  11.       "id": "node2",
  12.       "x": 250,
  13.       "y": 100
  14.     }
  15.   ],
  16. };
  18. G6.registerNode('customNode', {
  19.   draw(item){
  20.     const group = item.getGraphicGroup();
  21.     const model = item.getModel();
  22.     group.addShape('text', {
  23.       attrs: {
  24.         x: 0,
  25.         y: 0,
  26.         fill: '#333',
  27.         text: '我是一个自定义节点，\n有下面那个方形和我自己组成'
  28.       }
  29.     });
  30.     group.addShape('text', {
  31.       attrs: {
  32.         x: 0,
  33.         y: 0,
  34.         fill: '#333',
  35.         text: ' ('+model.x+', '+model.y+') \n 原点是组的图坐标',
  36.         textBaseline: 'top'
  37.       }
  38.     });
  39.     group.addShape('circle', {
  40.       attrs: {
  41.         x: 0,
  42.         y: 0,
  43.         r: 4,
  44.         fill: 'blue'
  45.       }
  46.     });
  47.     return group.addShape('rect', {
  48.       attrs: {
  49.         x: 0,
  50.         y: 0,
  51.         width: 100,
  52.         height: 100,
  53.         stroke: 'red'
  54.       }
  55.     });
  56.   }
  57. });
  59. const graph = new G6.Graph({
  60.   container: 'mountNode',  // dom 容器 或 容器ID
  61.   width: 500,              // 画布宽
  62.   height: 500,             // 画布高
  63. });
  64. graph.read(data);

关键形

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

锚点 — anchor

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

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