鸿蒙开发中Shape的详细使用

本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

一、Shape组件核心概念

1. 功能定位

• 作用：用于绘制2D几何图形（如圆形、矩形、路径等），支持类似SVG的矢量效果，适用于界面装饰或动态图形生成 。
• 与Canvas区别：

特性	Shape	Canvas
复杂度	简单图形（内置7种类型）	复杂自定义绘制（自由路径、渐变）
性能	更高（硬件加速优化）	依赖GPU渲染
适用场景	按钮背景、图标、静态装饰	数据可视化、游戏、绘图工具

2. 两种创建方式

• 嵌套使用：作为父组件统一管理子图形（类似SVG容器）

Shape() {
  Rect().width(100).height(50) // 子组件
  Circle({ width: 50, height: 50 })
}

    单独使用：直接绘制指定图形（7种类型） 

Circle({ width: 150, height: 150 }) // 独立圆形

二、常用API及方法详解

1. 基础图形类型与接口

图形类型	API示例	说明
圆形	Circle({ width, height })	直径由宽高最小值决定
矩形	Rect({ width, height, radius? })	radius支持圆角
路径	Path({ commands: 'M0 0 L100 100' })	SVG路径语法
多边形	Polygon({ points: '0,0 100,0 50,100' })	闭合图形

2. 关键属性

• 视口（viewport） 控制图形缩放与定位，通过{ x, y, width, height }映射用户空间到视区

Shape()
  .viewPort({ x: 0, y: 0, width: 300, height: 300 }) // 视口尺寸
  .width(150) // 实际显示尺寸（缩小50%）

     效果：视口尺寸大于组件尺寸时图形缩小，反之放大。 

   ● 样式控制 

属性	示例	作用
fill	.fill('#E87361')	填充颜色
stroke	.stroke(Color.Red)	边框颜色
strokeDashArray	.strokeDashArray([5, 3])	虚线样式（数组表示间隔）
antiAlias	.antiAlias(true)	抗锯齿（默认开启）

3. 动画与交互

通过属性绑定实现动态效果（需结合状态管理）

@State scale: number = 1;
Button('放大')
  .onClick(() => {
    this.scale = 1.5;
  })
Shape()
  .scale({ x: this.scale, y: this.scale }) // 缩放动画

三、案例

1. 绘制带虚线的圆环

Circle({ width: 200, height: 200 })
  .fillOpacity(0) // 透明填充
  .stroke(Color.Blue)
  .strokeWidth(10)
  .strokeDashArray([10, 5]) // 蓝色虚线圆环

效果：直径200px的蓝色虚线圆环。

2. 复杂路径图形

Path()
  .commands('M150 0 L300 300 L0 300 Z') // 三角形路径
  .fill('#E87361')
  .stroke(Color.Red)
  .strokeWidth(5)

说明：commands使用SVG路径语法绘制三角形。

3. 视口缩放效果

Column() {
  Shape() {
    Rect().width('100%').height('100%').fill('#0097D4')
    Circle({ width: 75, height: 75 }).fill('#E87361')
  }
  .viewPort({ x: 0, y: 0, width: 75, height: 75 }) // 原始尺寸
  .width(150) // 放大两倍显示
}

逻辑：视口尺寸（75x75）小于组件尺寸（150x150），图形放大。

四、性能优化建议

1. 减少嵌套层级：避免在Shape内嵌套过多子组件 。
2. 复用图形：对高频使用的图形（如按钮背景）预定义为组件。
3. 关闭非必要抗锯齿：静态小尺寸图形可设置.antiAlias(false) 。

五、API总结

分类	API/方法	支持版本	说明
基础图形	Rect/Circle/Path等	API 7+	7种内置图形
视口控制	.viewPort({ x, y, width, height })	API 7+	图形缩放与定位
样式扩展	.fillOpacity()/.strokeLineJoin()	API 9+	透明度、拐角样式
硬件加速	.mesh()	API 11+	网格变形效果