Line / Path 元素

line 和 path 元素用于流程图、箭头、路径描边、信息图曲线和 logo path reveal。

Line 结构

interface LineClip extends BaseClip {
  type: "line";
  points: Array<[number, number] | { x: number; y: number }>;
  radius?: number;
  closed?: boolean;
  drawStart?: number;
  drawEnd?: number;
  startOffset?: number;
  endOffset?: number;
  startArrow?: boolean;
  endArrow?: boolean;
  arrowSize?: number;
  lineWidth?: number;
  lineCap?: CanvasLineCap;
  lineJoin?: CanvasLineJoin;
}

Path 结构

interface PathClip extends BaseClip {
  type: "path";
  data: string;
  closed?: boolean;
  drawStart?: number;
  drawEnd?: number;
  startArrow?: boolean;
  endArrow?: boolean;
}

字段

• points：line 的点列表，坐标是相对当前节点中心的本地坐标。
• data：path 的 SVG path data，例如 M -180 0 C -80 -140 80 -140 180 0。
• drawStart / drawEnd：曲线可见范围，0 到 1。
• startArrow / endArrow：起点或终点箭头。
• lineWidth：优先级高于 style.strokeWidth。

keyframes.property 可以写 start / end / drawStart / drawEnd 来做描边动画。

示例

{
  "type": "path",
  "start": 0,
  "duration": 3,
  "data": "M -180 0 C -80 -140 80 -140 180 0",
  "endArrow": true,
  "style": {
    "stroke": "#f97316",
    "strokeWidth": 10
  },
  "keyframes": [
    {
      "property": "end",
      "frames": [
        { "time": 0, "value": 0 },
        { "time": 1, "value": 1, "easing": "easeOutCubic" }
      ]
    }
  ]
}