EdgeAnchor

阅读时间约 2 分钟

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

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

我们在 Registry.EdgeAnchor.presets 命名空间中提供了以下几种锚点定义。

  • ratio 默认值,锚点位于被连接的边的指定比例处。
  • length 锚点位于被连接的边的指定长度处。
  • closest 使用距离参照点最近的点作为锚点。
  • orth 正交锚点。

presets

ratio

锚点位于被连接的边的指定比例处。支持如下参数:

参数名参数类型是否必选默认值参数说明
rationumber0.5距离边起点多少比例位置处,默认位于边长度的中心。

length

锚点位于被连接的边的指定长度处。支持如下参数:

参数名参数类型是否必选默认值参数说明
lengthnumber20距离边的起点多少长度位置处,默认位于偏离起点 20px 处。

closest

距离参照点最近的点作为锚点。

orth

正交锚点。支持如下参数:

参数名参数类型是否必选默认值参数说明
fallbackAtnumber | stringundefined当没有正交点时,使用 fallbackAt 指定的点作为锚点。
fallbackAt 为百分比字符串时,表示锚点位于距离起点多少比例位置处。
fallbackAt 为数字时,表示锚点位于距离起点多少长度位置处。

registry

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

export type Definition<T> = (
  this: EdgeView,
  view: EdgeView,
  magnet: SVGElement,
  ref: Point.PointLike | SVGElement,
  args: T,
) => Point
参数名参数类型参数说明
thisEdgeView边的视图。
viewEdgeView连接的边的视图。
magnetSVGElement连接的边的元素。
refPoint.PointLike | SVGElement参照点/元素。
argsT参数。

并在 Registry.Connector.registry 对象上提供了 registerunregister 两个方法来注册和取消注册锚点定义,同时也将这两个方法分别挂载为 Graph 上的两个静态方法 Graph.registerEdgeAnchorGraph.unregisterEdgeAnchor

register

register(entities: { [name: string]: Definition }, force?: boolean): void
register(name: string, entity: Definition, force?: boolean): Definition

注册连锚点定义。

unregister

unregister(name: string): Definition | null

取消注册锚点定义。