# Line / Path 元素

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

## Line 结构

```ts
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 结构

```ts
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` 来做描边动画。

## 示例

```json
{
  "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" }
      ]
    }
  ]
}
```