目前能够在页面中成功渲染画布，并且定义了Stencil，可以往Stencil中添加模板节点了。接下来就需要多一些自定义的模板节点（Node）来满足业务上的需要。

按照往期文档的内容，能够找到一些自定义节点的示例（https://blog.51cto.com/u_15697128/5786696），先从基本内容开始学习。

ports 桩

官方文档：

https://antv-x6.gitee.io/zh/docs/api/registry/port-layout

网上博客示例：

export const basicPorts = {
  groups: {
    top: {
      position: 'top',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    right: {
      position: 'right',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    bottom: {
      position: 'bottom',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
    left: {
      position: 'left',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: {
            visibility: 'hidden',
          },
        },
      },
    },
  },
  items: [
    {
      group: 'top',
    },
    {
      group: 'right',
    },
    {
      group: 'bottom',
    },
    {
      group: 'left',
    }
  ]
}

官网原文：

需要注意的是，配置链接桩 ports 时，我们只能通过 groups 选项来配置布局算法，而在 items 中可以提供可选的布局算法参数 args 来影响布局结果。

graph.addNode(
  ...,
  ports: {
    // 链接桩分组
    groups: {
      group1: {
        position: {
          name: 'xxx', // 布局算法名称
          args: { },   // 布局算法的默认参数
        },
      },
    },

    // 链接桩定义
    items: [
      {
        groups: 'group1',
        args: { }, // 覆盖 group1 中指定的默认参数
      },
    ],
  },
)

如何理解这段话？以下是个人理解。

items内的groups name对应groups下的某个对象（json对象），名字需要一一对应。然后通过items的args可以替换原先的默认参数。

桩的position，presets（预设的算法）

postion就是上面示例中args中可以设置的内容。

布局算法position:absolute

桩的绝对定位

绝对定位对于shape来说，左上角是原点。往右x增加，往下y增加。

可配置参数：

示例：

graph.addNode({
  ports: {
    groups: {
      group1: {
        position: {
          name: 'absolute',
          args: { x: 0, y: 0 },
        },
      },
    },
    items: [
      {
        group: 'group1',
        args: {
          x: '60%',
          y: 32,
          angle: 45,
        },
      },
    ]
  },
})

布局算法position: left, right, top, bottom

官方原文：

链接桩沿矩形指定边线均匀布局，left、right、top 和 bottom 四个布局对矩形形状的节点非常友好，可以通过 args 来设置偏移量和旋转角度。

可配置参数：

示例：

graph.addNode({
  ports: {
    groups: {
      group1: {
        //声明是在shape的左侧  如果开启了strict = true，则左边不管有多少个桩都可以平均分布
        position: 'left',
      },
    },
    items: [
      {
        //桩添加到group1中，往x轴方向偏移2，主体还是在left 左侧的
        group: 'group1',
        args: {
          dx: 2,
        },
      },
    ]
  },
})

布局算法position:line

这个好理解，这个line就是比left,right,top,bottom多了一条规则，可以自定义一条line，使桩在line上分布。所以参数上，多了start、end既line的起始和结束位置。

示例：

graph.addNode({
  ports: {
    groups: {
      group1: {
        position: {
          name: 'line',
          args: {
            start: { x: 10, y: 10 },
            end: { x: 210, y: 10 },
          },
        },
      },
    },
    items: [
      {
        group: 'group1',
        args: {
          dx: 2,
        },
      },
    ]
  },
})

本例中，意思是，在shape中，创建一条线，从(10,10)开始到(210,10)结束，且线上有一个桩，向X轴方向偏移2个单位。

其实跟上一种position算法很像，只不过上一种已经约定好了top可以理解为是一条从(0,0)到(x,0)的线。

布局算法position:ellipse

沿着圆弧设置桩。

沿圆弧分布的链接桩，从 start 指定的角度开始，以 step 为步长均匀分布。

step

步长单位也是°，如果有十个桩，步长为36，那么正好可以均匀分布一圈。

compensateRotate

这个怎么理解呢，这个设置就是，如果桩的形状是方形，那么修正旋转角度就是这个小方块会根据自己所在位置旋转一定角度，中心线始终对着圆心（假的圆心），有点像圆弧是地球，桩（小方块）始终有一面对着圆弧，像是站在地球上一样（不知道这么描述能不能理解）。

如果不打开这项配置（false），那么圆弧上的所有方块都不会有旋转角度。除非单独设置angle。

可选参数：

示例：

const node = graph.addNode({
  ports: {
    groups: {
      group1: {
        position: {
          name: 'ellipse',
          args: {
            start: 45,
          },
        },
      },
    },
  },
})

Array.from({ length: 10 }).forEach((_, index) => {
  node.addPort({
    id: `${index}`,
    group: 'group1',
    attrs: { text: { text: index } },
  })
})

布局算法position:ellipseSpread

配置项同elipse（缺省了step）因为其特性。

唯一的不同是：沿椭圆均匀分布的链接桩，从 start 指定的角度开始均匀分布。

这个算法默认自己是均匀的。

桩的position，自定义

可以通过register定义自己的position算法，官网给了一个sin函数的例子。

https://antv-x6.gitee.io/zh/docs/api/registry/port-layout#register

文中有任何不正确的内容，可以在评论中沟通。

• Previous
  AntV/x6使用，超基础
• Next
  AntV/x6文档第三篇(Cell)