ArkTS 中的 Shape：几何图形绘制详解
鸿蒙第四期开发者活动
在 HarmonyOS 的 ArkTS UI 开发框架（基于声明式 UI）中，有一套用于绘制几何图形的组件体系，其中核心的就是 Shape。Shape 作为几何图形的父组件，为所有具体形状提供了统一的属性、样式与行为支持。华为开发者
几何图形在很多 UI 场景中都有应用，例如：
- 绘制分隔线、背景装饰元素
- 自定义图案或图标
- 图表、数据可视化元素
- 复杂路径渲染
一、Shape 的定位与作用
Shape 是几何图形组件的基类，它并不单独代表一个图形，而是定义了所有几何绘制组件共有的基本属性与行为。
具体来说：
- 所有具体的绘制组件（如 Path、Circle、Rect 等）均继承自 Shape
- 提供统一的尺寸属性（如宽度/高度）
- 提供基本的图形渲染控制（如透明度、抗锯齿设置等）华为开发者
这意味着，如果你要在界面上绘制「可控制且可复用」的图形，就一定会通过 Shape 或它的子组件来实现。华为开发者
二、常见的几何图形组件
官方文档支持绘制几种常用的几何形状，目前常见的包括（但不限于）：华为开发者
| 类型 | 描述 |
|---|---|
| Point | 绘制单个点 |
| Circle | 绘制圆形 |
| Rect | 绘制矩形 |
| RoundedRect | 带圆角的矩形 |
| Arc | 绘制圆弧 |
| Path | 自由路径，可绘制任意形状 |
| Region | 区域绘制组合 |
这些图形可以用于：
背景装饰
数据图形（如饼图的扇形）
自定义标记 / 图形控件
三、如何使用 Shape 插件组件
基本使用示例
下面是一个最简单的 Path 示例，它绘制了一条从 (0, 0) 到 (100, 0) 的直线：
@Entry
@Component
struct ShapeDemo {build() {Path().width('200vp').height('50vp').commands('M0 0 L100 0').stroke(Color.Black).strokeWidth(2)}
}
解释：
.width()/.height()指定绘制区域尺寸commands()接受一串绘制指令（这个系列的语法与 SVG Path 类似）.stroke()/.strokeWidth()控制线条颜色与粗细
四、命令详解：Path 的绘制指令
Path 使用一系列指令组合成复杂图形，它的语法类似 SVG Path，是可组合、可复用的基础组件。华为开发者
常用命令
| 指令 | 含义 |
|---|---|
| M x y | 移动到指定坐标点（起点） |
| L x y | 从当前点画直线到指定点 |
| H x | 水平线到指定 x |
| V y | 垂直线到指定 y |
| C x1 y1 x2 y2 x y | 三次贝塞尔曲线 |
| Q x1 y1 x y | 二次贝塞尔曲线 |
| A rx ry rotation large-arc-flag sweep-flag x y | 椭圆弧 |
| Z | 关闭当前路径（自动连接终点与起点） |
例子：
Path().commands('M0 0 L50 50 L100 0 Z')
上面的命令会绘制一个三角形。华为开发者
五、常用属性解析
虽然不同图形组件的 API 细节有所不同，但它们在 Shape 基础上共享了许多属性：
尺寸控制
width()：图形宽度height()：图形高度
注意：尺寸单位常用字符串（如
"100vp"）或像素数值。华为开发者
填充与描边
fill(color)：填充颜色stroke(color)：边框（描边）颜色strokeWidth(num)：边框宽度strokeOpacity(value)：描边透明度fillOpacity(value)：填充透明度
这些属性让你可以随心设计图形风格，比如：
Circle().fill(Color.Red).fillOpacity(0.7)
线条样式相关
strokeDashArray([segments])：虚线样式strokeLineCap(style)：线段端点样式（如圆角、方角）strokeLineJoin(style)：线段连接处样式（斜接、圆角等）antiAlias(boolean)：是否开启抗锯齿
示例（虚线）：
Path().strokeDashArray([5, 10]) // 5vp 实线 + 10vp 空白间隔
六、学习与补充建议
1. 熟悉 Path 指令语法
Path 是最灵活的图形组件，掌握 M、L、C、Q 等指令能让你绘制各种自由形状。华为开发者
2. 结合 UI 布局与图形渲染
Shape 组件可以和其他 UI 组合，如在 Column 或 Row 中使用，形成复杂布局效果。
3. 可查看官方拓展文档
官方有更详细的组件参考和 API 批注，包括：
- 形状裁剪 ClipShape 文档 华为开发者
- 更高级的动态 Path 渲染与动画
- Canvas 自定义渲染扩展
总结
| 特性 | 是否支持 |
|---|---|
| 几何形状绘制 | ✔ |
| 动态路径组合 | ✔ |
| 样式细粒度控制 | ✔ |
| 与 ArkTS UI 无缝集成 | ✔ |
| 富绘制指令支持 | ✔ |
Shape 是 HarmonyOS ArkTS 图形绘制体系的根基，它不仅能渲染基本图形，还能支持丰富的自定义形状。掌握 Shape 和 Path 能够让你在 ArkTS 中做出更个性化、精美的 UI 效果。华为开发者