线性绘制组件 Line 与 Path 都基于自身坐标系进行渲染：左上角为 (0,0)，右下角为 (width,height)。掌握它们的用法，可以实现各种自定义分隔线、图形轮廓与矢量路径绘制。

1 Line 组件

Line 用于在自定义区域内绘制直线或虚线，可以通过起点、终点坐标及所有来自 CommonShapeMethod 的描边属性，灵活控制样式。

1.1 定义

interface Line extends LineAttribute<Line> {
  (): Line;
  (value?: { width?: string | number; height?: string | number }): Line;
}

declare class LineAttribute<T> extends CommonShapeMethod<T> {
  startPoint(value: [number, number]): T;
  endPoint(value: [number, number]): T;
}

• width, height：设置组件区域的宽度与高度，直线将在此范围内绘制。
• startPoint：指定线段起点 [x, y]。
• endPoint：指定线段终点 [x, y]。
• 继承自 CommonShapeMethod 的属性可用于调整 stroke、strokeWidth、strokeDashArray 等。

1.2 示例

TypeScript 版：

@Entry @Component
struct LineDemo {
  build() {
    Column({ space: 10, width: '100%', height: '100%' }) {
      // 从容器左上 (0,0) 到右下 (150,30)
      Line({ width: 150, height: 30 })
        .startPoint([0, 0])
        .endPoint([150, 30])
        .stroke(Color.Black)
        .backgroundColor(Color.Pink);

      // 细微偏移，3px 粗黑线
      Line({ width: 150, height: 30 })
        .startPoint([10, 10])
        .endPoint([120, 20])
        .strokeWidth(3)
        .stroke(Color.Black)
        .backgroundColor(Color.Pink);

      // 超出区域起终点，方便绘制延伸效果
      Line({ width: 150, height: 30 })
        .startPoint([-10, -10])
        .endPoint([220, 80])
        .strokeWidth(3)
        .stroke(Color.Black)
        .backgroundColor(Color.Pink);
    }
  }
}

JavaScript/C++ 版：

@Entry @Component
class MyView {
  func build() {
    Column(10) {
      Line(150, 30)
        .startPoint((0.0, 0.0))
        .endPoint((150.0, 30.0))
        .stroke(0x000000)
        .backgroundColor(0xffc0cb);

      Line(150, 30)
        .startPoint((10.0, 10.0))
        .endPoint((120.0, 20.0))
        .strokeWidth(3)
        .stroke(0x000000)
        .backgroundColor(0xffc0cb);

      Line(150, 30)
        .startPoint((-10.0, -10.0))
        .endPoint((220.0, 80.0))
        .strokeWidth(3)
        .stroke(0x000000)
        .backgroundColor(0xffc0cb);
    }
    .width(100.percent)
    .height(100.percent);
  }
}

注意：当起点或终点坐标超出组件区域时，线段仍会超界绘制；框架当前对此行为暂无裁剪，已在仓库中提出 Issue。

2 Path 组件

Path 支持通过 SVG 路径命令串在任意区域内绘制矢量路径，常用于复杂形状、图标或任意多边形的渲染。

2.1 定义

interface PathInterface {
  new(value?: { width?: number | string; height?: number | string; commands?: string }): PathAttribute;
  (value?: { width?: number | string; height?: number | string; commands?: string }): PathAttribute;
}

declare class PathAttribute extends CommonShapeMethod<PathAttribute> {
  commands(value: string): PathAttribute;
}

• width, height：定义绘制区域大小。

• commands：SVG 路径命令字符串，支持常用命令：

  • M x y：移动到起点
  • L x y：画直线到 (x,y)
  • H x / V y：水平／垂直直线
  • C x1 y1 x2 y2 x y：三阶 Bézier 曲线
  • Q x1 y1 x y：二阶 Bézier 曲线
  • S / T：简写贝塞尔
  • A rx ry rotate large-arc-flag sweep-flag x y：椭圆弧
  • Z：闭合路径

2.2 示例

TypeScript 版：

@Entry @Component
struct PathDemo {
  build() {
    Column({ space: 10, padding: 10, width: '100%', height: '100%' }) {
      // 一条水平线
      Path({ width: 800, height: 0 })
        .commands("M0 0 L800 0")
        .stroke(Color.Pink)
        .strokeWidth(2);

      // 三角形
      Path({ width: 300, height: 300 })
        .commands("M150 0 L300 300 L0 300 Z")
        .fill(Color.Pink);

      // 矩形
      Path({ width: 300, height: 300 })
        .commands("M0 0 H300 V300 H0 Z")
        .fill(Color.Pink);

      // 五边形
      Path({ width: 300, height: 300 })
        .commands("M150 0 L0 150 L60 300 L240 300 L300 150 Z")
        .fill(Color.Pink);

      // S 命令曲线
      Path({ width: 300, height: 300 })
        .commands("M0 300 S150 0 300 300 Z")
        .fill(Color.Pink);

      // C 命令曲线
      Path({ width: 300, height: 300 })
        .commands("M0 150 C0 150 150 0 300 150 L150 300 Z")
        .fill(Color.Pink);

      // 多条路径组合
      Shape() {
        Path()
          .commands("M100 350 l150 -300")
          .stroke(Color.Red)
          .strokeWidth(3);

        Path()
          .commands("M250 50 l150 300")
          .stroke(Color.Red)
          .strokeWidth(3);

        Path()
          .commands("M175 200 l150 0")
          .stroke(Color.Green)
          .strokeWidth(3);

        Path()
          .commands("M100 350 q150 -300 300 0")
          .stroke(Color.Blue)
          .fill(Color.White)
          .strokeWidth(3);
      };
    }
  }
}

JavaScript/C++ 版：

@Entry @Component
class MyView {
  func build() {
    Column(10) {
      Path()
        .commands("M0 0 L800 0")
        .stroke(0xffc0cb)
        .strokeWidth(2);

      Path()
        .commands("M150 0 L300 300 L0 300 Z")
        .fill(0xffc0cb);

      Path()
        .commands("M0 0 H300 V300 H0 Z")
        .fill(0xffc0cb);

      Path()
        .commands("M150 0 L0 150 L60 300 L240 300 L300 150 Z")
        .fill(0xffc0cb);

      Path()
        .commands("M0 300 S150 0 300 300 Z")
        .fill(0xffc0cb);

      Path()
        .commands("M0 150 C0 150 150 0 300 150 L150 300 Z")
        .fill(0xffc0cb);

      Shape() {
        Path()
          .commands("M100 350 l150 -300")
          .stroke(0xff0000)
          .strokeWidth(3);

        Path()
          .commands("M250 50 l150 300")
          .stroke(0xff0000)
          .strokeWidth(3);

        Path()
          .commands("M175 200 l150 0")
          .stroke(0xff0000)
          .strokeWidth(3);

        Path()
          .commands("M100 350 q150 -300 300 0")
          .stroke(0xff0000)
          .fill(0xffffff)
          .strokeWidth(3);
      };
    }
    .padding(10)
    .width(100.percent)
    .height(100.percent);
  }
}

3 小结

• Line 适合绘制任意方向的直线或虚线，通过 startPoint 与 endPoint 灵活控制位置。
• Path 则支持完整的 SVG 路径命令，可绘制多边形、贝塞尔曲线、椭圆弧等复杂形状。
• 两者都继承自 CommonShapeMethod，拥有统一的描边与填充属性，实现风格一致、体验统一的矢量图形渲染。

在实际开发中，通常让设计师提供 SVG 路径数据，然后在 ArkUI 中借助 Path 直接渲染；简单分隔线、刻度线等，则使用 Line 即可。建议结合预览器多加调试，熟练掌握坐标与命令语法。