logoCreated with Sketch.

X6

EdgeView

2 min read

边视图，继承自 CellView。

constructor

constructor(edge: Edge, options?: EdgeView.Options): EdgeView

prototype

isNodeView()

isNodeView(): boolean

返回该视图是否是节点视图。默认返回 false。

isEdgeView()

isEdgeView(): boolean

返回该视图是否是边视图。默认返回 true。

sendToken(...)

sendToken(
  token: SVGElement | string,
  options?:
    | number
    | {
        duration?: number
        reversed?: boolean
        selector?: string
      },
  callback?: () => void,
): () => void

开始一个沿边路径运动的动画，返回一个停止该动画的方法。

参数

名称类型必选默认值描述
tokenSVGElement | string✓沿边运动的元素或元素选择器。
options.durationnumber1000动画持续的时间，单位毫秒。
options.reversedbooleanfalse是否沿反方向运动，即从边的终点运动到起点。
options.selectorstringundefined动画参照的 SVGPathElement 元素，默认沿边的 SVGPathElement 运动。
options.start(e) => void动画开始时的回调。
options.complete(e) => void动画结束时的回调。
options.repeat(e) => void动画重复执行时的回调。
options....其他键值对，表示动画选项。
callback() => void动画执行完成后的回调函数。

其中，动画选项可以参考 AnimateMotionElement 元素的属性。

使用

const view = graph.findViewByCell(edge) as EdgeView
const token = Vector.create('circle', { r: 6, fill: 'green' })
view.sendToken(token.node, 1000)

// 5s 后停止该动画
setTimeout(stop, 5000)