输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心
全部文档版本说明工具设计指南与API参考开发与测试上架分发与运营问题处理与运维最佳实践行业解决方案
指南与API参考
指南
API
高级筛选
API version全部版本
设备全部
元服务API集不筛选
您当前正在浏览HarmonyOS最新文档，覆盖已发布的所有API版本，可在API参考中筛选您使用的API版本。详细的版本配套关系请参考版本说明。
指南与API参考API参考应用框架ArkUI（方舟UI框架）ArkTS组件图形绘制Path

Path

Phone12+PC/2in113+Tablet12+TV19+Wearable18+
更新时间: 2026-08-29 09:41
复制页面
本文导读
展开章节

路径绘制组件，根据绘制路径生成封闭的自定义形状，支持通过SVG路径描述规范定义复杂的几何形状。

说明

该组件从API version 7开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。

该组件从API version 20开始支持使用AttributeUpdater类的updateConstructorParams接口更新构造参数。

子组件

无

接口

Path

Phone12+PC/2in113+Tablet12+TV19+Wearable18+

new Path(options?: PathOptions)

创建Path对象实例，用于根据绘制路径生成封闭的自定义形状。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开
参数名 类型 必填 说明
options PathOptions 否

Path组件绘制属性的配置对象。

省略时不设置绘制属性，组件按默认尺寸显示。默认尺寸根据路径内容自动计算宽度和高度。

异常值undefined和null按照无效值处理，本次设置不生效。

**说明：**从API version 18开始，使用PathOptions参数时需在Stage模型下使用。

Path

Phone12+PC/2in113+Tablet12+TV19+Wearable18+

Path(options?: PathOptions)

创建路径绘制组件，用于根据绘制路径生成封闭的自定义形状。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开
参数名 类型 必填 说明
options PathOptions 否

Path组件绘制属性的配置对象。

省略时不设置绘制属性，组件按默认尺寸显示。默认尺寸根据路径内容自动计算宽度和高度。

异常值undefined和null按照无效值处理，本次设置不生效。

**说明：**从API version 18开始，使用PathOptions参数时需在Stage模型下使用。

PathOptions18+对象说明

Phone18+PC/2in118+Tablet18+TV19+Wearable18+

用于描述Path组件绘制属性。

说明

为规范匿名对象的定义，API 18版本修改了此处的元素定义。其中，保留了历史匿名对象的起始版本信息，会出现外层元素@since版本号高于内层元素版本号的情况，但这不影响接口的使用。

卡片能力： 从API version 18开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 18开始，该接口支持在元服务中使用。

模型约束： 此接口仅可在Stage模型下使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

展开
名称 类型 只读 可选 说明
width7+ Length 否 是

路径所在矩形的宽度。取值范围≥0。

值为异常值或缺省时按照路径内容自动计算宽度。

默认单位：vp

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
height7+ Length 否 是

路径所在矩形的高度。取值范围≥0。

值为异常值或缺省时按照路径内容自动计算高度。

默认单位：vp

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。
commands7+ ResourceStr 否 是

路径绘制的命令字符串，符合SVG路径描述规范，单位为px。

默认值：空字符串

异常值按照默认值处理。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

属性

除支持通用属性以及图形绘制通用属性外，还支持以下属性：

commands

Phone12+PC/2in113+Tablet12+TV19+Wearable18+

commands(value: ResourceStr)

设置符合SVG路径描述规范的命令字符串，单位为px。命令字符串决定了路径的绘制形状和轨迹。支持attributeModifier动态设置属性方法。像素单位转换方法请参考像素单位转换。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

展开
参数名 类型 必填 说明
value ResourceStr 是

路径绘制的命令字符串，需符合SVG路径描述规范，单位为px。

默认值：空字符串

异常值undefined和null按照默认值处理。

SVG路径描述规范

SVG路径描述规范支持的命令如下：

展开
命令 名称 参数 说明
M moveto

x：起始点的x轴坐标。

y：起始点的y轴坐标。

 在给定的(x, y)坐标处开始一个新的子路径。例如，M 0 0表示将(0, 0)点作为新子路径的起始点。
L lineto

x：直线终点的x轴坐标。

y：直线终点的y轴坐标。

 从当前点到给定的(x, y)坐标画一条线，该坐标成为新的当前点。例如，L 50 50表示绘制当前点到(50, 50)点的直线，并将(50, 50)点作为新子路径的起始点。
H horizontal lineto x：水平直线终点的x轴坐标。 从当前点绘制一条水平线到给定的x坐标，等效于将y坐标指定为当前点y坐标的L命令。例如，当前点为(100, 100)，H 50 表示绘制当前点到(50, 100)点的直线，并将(50, 100)点作为新子路径的起始点。
V vertical lineto y：垂直直线终点的y轴坐标。 从当前点绘制一条垂直线到给定的y坐标，等效于将x坐标指定为当前点x坐标的L命令。例如，当前点为(100, 100)，V 50 表示绘制当前点到(100, 50)点的直线，并将(100, 50)点作为新子路径的起始点。
C curveto

x1：第一个控制点参数的x坐标值。

y1：第一个控制点参数的y坐标值。

x2：第二个控制点参数的x坐标值。

y2：第二个控制点参数的y坐标值。

x：终点参数的x坐标值。

y：终点参数的y坐标值。

 使用(x1, y1)作为曲线起点的控制点，(x2, y2)作为曲线终点的控制点，从当前点到(x, y)绘制三次贝塞尔曲线。例如，C100 100 250 100 250 200 表示绘制当前点到(250, 200)点的三次贝塞尔曲线，并将(250, 200)点作为新子路径的起始点。
S smooth curveto

x2：第二个控制点参数的x坐标值。

y2：第二个控制点参数的y坐标值。

x：终点参数的x坐标值。

y：终点参数的y坐标值。

 使用(x2, y2)作为曲线终点的控制点，从当前点到(x, y)绘制三次贝塞尔曲线。若前一个命令是C或S，则起点控制点是上一个命令的终点控制点相对于当前点的映射。例如，C100 100 250 100 250 200 S400 300 400 200第二段贝塞尔曲线的起点控制点为(250, 300)。如果没有前一个命令或者前一个命令不是 C或S，则第一个控制点与当前点重合。
Q quadratic Bezier curve

x1：第一个控制点参数的x坐标值。

y1：第一个控制点参数的y坐标值。

x：终点参数的x坐标值。

y：终点参数的y坐标值。

 使用(x1, y1)作为控制点，从当前点到(x, y)绘制二次贝塞尔曲线。例如，Q400 50 600 300 表示绘制当前点到(600, 300)点的二次贝塞尔曲线，并将(600, 300)点作为新子路径的起始点。
T smooth quadratic Bezier curveto

x：终点参数的x坐标值。

y：终点参数的y坐标值。

 从当前点到(x, y)绘制二次贝塞尔曲线。若前一个命令是Q或T，则控制点是上一个命令的终点控制点相对于当前点的映射。 例如，Q400 50 600 300 T1000 300第二段贝塞尔曲线的控制点为(800, 550)。 如果没有前一个命令或者前一个命令不是Q或T，则第一个控制点与当前点重合。
A elliptical Arc

rx：椭圆的x轴半径。

ry：椭圆的y轴半径。

x-axis-rotation：椭圆相对于坐标系的旋转角度。

large-arc-flag：标记绘制大弧(1)还是小弧(0)。

sweep-flag：标记向顺时针(1)还是逆时针(0)方向绘制。

x：终点参数的x坐标值。

y：终点参数的y坐标值。

 从当前点到(x, y)绘制一条椭圆弧。椭圆的大小和方向由两个半径(rx, ry)和x-axis-rotation定义，指示整个椭圆相对于当前坐标系如何旋转（以度为单位）。 large-arc-flag 和 sweep-flag确定弧的绘制方式。
Z closepath none 通过将当前路径连接回当前子路径的初始点来关闭当前子路径。

例如：commands('M0 20 L50 50 L50 100 Z')定义了一个三角形，起始于位置(0, 20)，接着绘制点(0, 20)到点(50, 50)的直线，再绘制从点(50, 50)到点(50, 100)的直线，最后绘制从点(50, 100)到(0, 20)的直线关闭路径，形成封闭三角形。

示例

示例1（组件属性绘制）

通过commands、fillOpacity、stroke属性分别绘制路径、透明度、边框颜色。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct PathExample {
  5.   build() {
  6.     Column({ space: 10 }) {
  7.       Text('Straight line')
  8.         .fontSize(11)
  9.         .fontColor(0xCCCCCC)
  10.         .width('90%')
  11.       // 绘制一条长600px，宽3vp的直线
  12.       Path()
  13.         .width('600px')
  14.         .height('10px')
  15.         .commands('M0 0 L600 0')
  16.         .stroke(Color.Black)
  17.         .strokeWidth(3)
  18. 

  19.       Text('Straight line graph')
  20.         .fontSize(11)
  21.         .fontColor(0xCCCCCC)
  22.         .width('90%')
  23.       // 绘制直线图形
  24.       Flex({ justifyContent: FlexAlign.SpaceBetween }) {
  25.         Path()
  26.           .width('210px')
  27.           .height('310px')
  28.           .commands('M100 0 L200 240 L0 240 Z')
  29.           .fillOpacity(0)
  30.           .stroke(Color.Black)
  31.           .strokeWidth(3)
  32.         Path()
  33.           .width('210px')
  34.           .height('310px')
  35.           .commands('M0 0 H200 V200 H0 Z')
  36.           .fillOpacity(0)
  37.           .stroke(Color.Black)
  38.           .strokeWidth(3)
  39.         Path()
  40.           .width('210px')
  41.           .height('310px')
  42.           .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z')
  43.           .fillOpacity(0)
  44.           .stroke(Color.Black)
  45.           .strokeWidth(3)
  46.       }.width('95%')
  47. 

  48.       Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%')
  49.       // 绘制弧线图形
  50.       Flex({ justifyContent: FlexAlign.SpaceBetween }) {
  51.         Path()
  52.           .width('250px')
  53.           .height('310px')
  54.           .commands('M0 300 S100 0 240 300 Z')
  55.           .fillOpacity(0)
  56.           .stroke(Color.Black)
  57.           .strokeWidth(3)
  58.         Path()
  59.           .width('210px')
  60.           .height('310px')
  61.           .commands('M0 150 C0 100 140 0 200 150 L100 300 Z')
  62.           .fillOpacity(0)
  63.           .stroke(Color.Black)
  64.           .strokeWidth(3)
  65.         Path()
  66.           .width('210px')
  67.           .height('310px')
  68.           .commands('M0 100 A30 20 20 0 0 200 100 Z')
  69.           .fillOpacity(0)
  70.           .stroke(Color.Black)
  71.           .strokeWidth(3)
  72.       }.width('95%')
  73.     }.width('100%')
  74.     .margin({ top: 5 })
  75.   }
  76. }

示例2（使用不同参数类型绘制路径）

width、height、commands属性分别使用不同的长度类型绘制图形。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct PathTypeExample {
  5.   build() {
  6.     Column({ space: 10 }) {
  7.       // 宽、高、命令字符串使用string类型，绘制一条直线。
  8.       Path({ width: '600px', height: '10px' })
  9.         .commands('M0 0 L600 0')
  10.         .fillOpacity(0)
  11.         .stroke(Color.Black)
  12.         .strokeWidth(3)
  13.       // 宽、高使用number类型，绘制一个矩形图形。
  14.       Path({ width: 200, height: 100 })
  15.         .commands('M200 0 H400 V200 H200 Z')
  16.         .fillOpacity(0)
  17.         .stroke(Color.Black)
  18.         .strokeWidth(3)
  19.       // 宽、高、命令字符串使用Resource类型（需用户自定义），绘制一个弧线图形。
  20.       Path({ width: $r('app.string.PathWidth'), height: $r('app.string.PathHeight') }) // 本示例中PathWidth和PathHeight均定义为"200"。
  21.         .commands($r('app.string.PathCommands')) // 本示例中PathCommands定义为"M150 300 Q300 0 450 300 Z"。
  22.         .fillOpacity(0)
  23.         .stroke(Color.Black)
  24.         .strokeWidth(3)
  25.     }.width('100%')
  26.     .margin({ top: 5 })
  27.   }
  28. }

示例3（使用attributeModifier动态设置Path组件的属性）

以下示例展示了如何使用attributeModifier动态设置Path组件的commands、fill、fillOpacity、stroke、strokeDashArray、strokeDashOffset、strokeLineCap、strokeLineJoin、strokeMiterLimit、strokeOpacity、strokeWidth和antiAlias属性。

收起
自动换行
深色代码主题
复制
  1. // xxx.ets
  2. class MyPathModifier implements AttributeModifier<PathAttribute> {
  3.   applyNormalAttribute(instance: PathAttribute): void {
  4.     // 使用字符串commands绘制一个三角形，填充颜色#707070，填充透明度0.5，边框颜色#2787D9，边框间隙[20]，向左偏移15，线条两端样式为半圆，拐角样式使用尖角连接路径段，斜接长度与边框宽度比值的极限值为5，边框透明度0.5，边框宽度10，抗锯齿开启
  5.     instance.commands('M100 0 L200 240 L0 240 Z')
  6.     instance.fill("#707070")
  7.     instance.fillOpacity(0.5)
  8.     instance.stroke("#2787D9")
  9.     instance.strokeDashArray([20])
  10.     instance.strokeDashOffset("15")
  11.     instance.strokeLineCap(LineCapStyle.Round)
  12.     instance.strokeLineJoin(LineJoinStyle.Miter)
  13.     instance.strokeMiterLimit(5)
  14.     instance.strokeOpacity(0.5)
  15.     instance.strokeWidth(10)
  16.     instance.antiAlias(true)
  17.   }
  18. }
  19. 

  20. @Entry
  21. @Component
  22. struct PathModifierDemo {
  23.   @State modifier: MyPathModifier = new MyPathModifier()
  24. 

  25.   build() {
  26.     Column() {
  27.       Path()
  28.         .attributeModifier(this.modifier)
  29.         .offset({ x: 20, y: 20 })
  30.     }
  31.   }
  32. }

Polygon
Rect
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明