🧱 ArkTS 中的 Shape：几何图形绘制详解

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 效果。华为开发者

posted @ 2025-12-22 08:54 想喝冰咖啡阅读(0) 评论(0) 收藏举报

刷新页面返回顶部