当连接到节点时，可以通过 NodeAnchor 来指定被连接的节点的锚点，锚点与连接点 ConnectionPoint 共同确定了边的起点和终点。

• 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 connectionPoint 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
• 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 connectionPoint 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。

X6 内置了以下几种锚点定义。

• center 边链接的元素的中心点（默认值）。
• top 边链接的元素的顶部中心点。
• bottom 边链接的元素的底部中心点。
• left 边链接的元素的左侧中心点。
• right 边链接的元素的右侧中心点。
• midSide 边链接的元素的最近侧中心点。
• topLeft 边链接的元素的左上角。
• topRight 边链接的元素的右上角。
• bottomLeft 边链接的元素的左下角。
• bottomRight 边链接的元素的右下角。
• orth 正交点。
• nodeCenter 节点的中心点。

可以在创建边时指定锚点：

const edge = graph.addEdge({
  source: {
    cell: 'source-id',
    anchor: {
      name: 'midSide',
      args: {
        dx: 10,
      },
    },
  },
  target: {
    cell: 'target-id',
    anchor: 'orth', // 没有参数时可以简化写法
  },
})

创建之后可以调用 edge.setSource 和 edge.setTarget 方法来修改锚点：

edge.setSource({
  cell: 'source-id',
  anchor: {
    name: 'midSide',
    args: {
      dx: 10,
    },
  },
})

在创建画布时，可以通过 connecting 选项来设置全局默认的锚点：

new Graph({
  connecting: {
    anchor: {
      name: 'midSide',
      args: {
        dx: 10,
      },
    },
  },
})

没有参数时可以简化为：

new Graph({
  connecting: {
    anchor: 'midSide',
  },
})

内置锚点

center

元素中心点，支持如下参数：

top

元素顶部中心点，支持如下参数：

bottom

元素底部中心点，支持如下参数：

left

元素左侧中心点，支持如下参数：

right

元素右侧中心点，支持如下参数：

midSide

最靠近边的那一侧中心点，支持如下参数：

topLeft

元素左上角，支持如下参数：

topRight

元素右上角，支持如下参数：

bottomLeft

元素左下角，支持如下参数：

bottomRight

元素右下角，支持如下参数：

orth

正交点，支持如下参数：

nodeCenter

节点的中心，支持如下参数：

自定义锚点

锚点定义是一个具有如下签名的函数，返回锚点。

export type Definition<T> = (
  this: EdgeView,
  nodeView: NodeView,
  magnet: SVGElement,
  ref: Point.PointLike | SVGElement,
  args: T,
  type: Edge.TerminalType,
) => Point

完成锚点定义后，我们先注册锚点：

Graph.registerAnchor('custom-anchor', ...)

注册以后我们就可以通过锚点名称来使用：

new Graph({
  connecting: {
    anchor: {
      name: 'custom-anchor',
    },
  },
})