当前位置：首页 > ds >正文

鸿蒙Next图形绘制指南：从基础几何图形到复杂UI设计

ds 2025/9/7 18:57:50

探索HarmonyOS的强大图形绘制能力，打造精美视觉效果

HarmonyOS（鸿蒙操作系统）是华为推出的全场景分布式操作系统，其强大的图形绘制能力为开发者提供了丰富的创意空间。今天我们将深入探讨如何在鸿蒙Next中使用各种技术绘制几何图形，为您的应用增添视觉魅力。

1 鸿蒙图形绘制基础

在鸿蒙开发中，图形绘制是一个基础且重要的部分，它允许开发者在应用中创建直观且吸引人的视觉效果。

绘制组件用于在页面绘制图形，Shape组件是绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。

鸿蒙系统不仅支持多种设备类型，还提供了丰富的API来实现各种功能。图形绘制API设计简洁易用，同时提供了强大的自定义能力，让开发者能够轻松创建从简单到复杂的各种图形。

2 两种创建绘制组件的方式

2.1 使用Shape作为父组件

使用Shape作为父组件可以实现类似SVG的效果。这种方式适用于需要组合多个图形元素的复杂场景。

javascript

// 创建带有父组件的绘制组件
Shape() {Rect().width(300).height(50)Circle({ width: 150, height: 150 }).fill('red')
}

上述代码创建了一个包含矩形和圆形的图形组合，其中Shape作为容器，Rect和Circle作为子组件。

2.2 绘制组件单独使用

绘制组件也可以单独使用，用于在页面上绘制指定的图形。鸿蒙提供了7种基本绘制类型：

Circle（圆形）
Ellipse（椭圆形）
Line（直线）
Polyline（折线）
Polygon（多边形）
Path（路径）
Rect（矩形）

以绘制圆形为例：

javascript

// 单独使用Circle组件绘制圆形
Circle({ width: 150, height: 150 })

这种方式简单直接，适用于只需要绘制单一图形的场景。

3 理解形状视口（viewport）

形状视口viewport指定用户空间中的一个矩形，该矩形映射到为关联的SVG元素建立的视区边界。viewport属性的值包含x、y、width和height四个可选参数，x和y表示视区的左上角坐标，width和height表示其尺寸。

3.1 通过viewport对图形进行放大与缩小

javascript

// 通过viewport对图形进行缩放
Row({space:10}) {Column() {// 放大的Circle组件Text('shape内放大的Circle组件')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).height(150).backgroundColor('#F5DC62')}Column() {// 缩小的Circle组件Text('Shape内缩小的Circle组件')Shape() {Rect().width('100%').height('100%').fill('#BDDB69')Circle({width: 75, height: 75}).fill('#E87361')}.viewPort({x: 0, y: 0, width: 300, height: 300}).width(150).height(150).backgroundColor('#F5DC62')}
}

上面的例子中，Shape的宽和高都是150px，同时Circle的尺寸也都是75px。

在左边的图片中，由于视口大小为75，因此Circle刚好占满整个视口，而Shape的尺寸是150px，同时Circle占满了整个视口，所以最终圆形的显示尺寸就是150px。
在右边的图片中，由于视口大小为300，因此Circle在整个视口中只占 1/4，在最终显示时，Circle尺寸则只有150/4，即37.5px（原尺寸的一半）。

3.2 使用viewport平移图形

javascript

// 创建平移效果的viewport
Shape() {Rect().width("100%").height("100%").fill("#0097D4")Circle({ width: 150, height: 150 }).fill("#E87361")
}
.viewPort({ x: -150, y: -150, width: 300, height: 300 })
.width(300)
.height(300)
.backgroundColor("#F5DC62")

此代码将viewport向右方和下方各平移150单位，从而实现图形位置的调整。

4 自定义图形样式

鸿蒙提供了丰富的属性来自定义图形样式，让开发者能够创建各种视觉效果。

4.1 填充与边框设置

javascript

// 设置填充和边框样式
Path().width(100).height(100).commands('M150 0 L300 300 L0 300 Z').fill("#E87361") // 填充颜色.stroke(Color.Red) // 边框颜色.strokeWidth(10) // 边框宽度.strokeOpacity(0.2) // 边框透明度

4.2 线条样式设置

javascript

// 设置线条样式
Polyline().width(100).height(100).fillOpacity(0).stroke(Color.Red).strokeWidth(8).points([[20, 0], [0, 100], [100, 90]]).strokeLineJoin(LineJoinStyle.Round) // 设置折线拐角处为圆弧

鸿蒙支持多种线条拐角绘制样式：

Bevel：使用斜角连接路径段
Miter：使用尖角连接路径段
Round：使用圆角连接路径段

4.3 高级样式设置

javascript

// 高级样式设置示例
Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z').viewPort({ x: -80, y: -5, width: 500, height: 300 }).fill(0x317AF7).stroke(Color.Red).strokeWidth(3).strokeLineJoin(LineJoinStyle.Miter).strokeMiterLimit(5)

5 使用Canvas绘制自定义图形

除了使用Shape组件外，鸿蒙还提供了Canvas组件用于更灵活的自定义图形绘制。

5.1 初始化画布组件

javascript

// 初始化Canvas组件
Canvas(this.context).width('100%').height('100%').backgroundColor('#F5DC62').onReady(() => {this.context.fillStyle = '#0097D4';this.context.fillRect(50, 50, 100, 100);})

onReady事件在Canvas组件初始化完成时触发，调用该事件后，可获取Canvas组件的确定宽高，进一步使用CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象调用相关API进行图形绘制。

5.2 画布绘制方式

鸿蒙提供两种画布绘制方式：

方式一：直接调用API进行绘制

javascript

// 直接调用API进行绘制
Canvas(this.context).width('100%').height('100%').backgroundColor('#F5DC62').onReady(() =>{this.context.beginPath();this.context.moveTo(50, 50);this.context.lineTo(280, 160);this.context.stroke();})

方式二：使用Path2D对象定义路径

javascript

// 使用Path2D对象定义路径
Canvas(this.context).width('100%').height('100%').backgroundColor('#F5DC62').onReady(() =>{let region = new Path2D();region.arc(100, 75, 50, 0, 6.28);this.context.stroke(region);})

5.3 绘制基础形状

javascript

// 使用Canvas绘制基础形状
Canvas(this.context).width('100%').height('100%').backgroundColor('#F5DC62').onReady(() =>{// 绘制矩形this.context.beginPath();this.context.rect(100, 50, 100, 100);this.context.stroke();// 绘制圆形this.context.beginPath();this.context.arc(150, 250, 50, 0, 6.28);this.context.stroke();// 绘制椭圆this.context.beginPath();this.context.ellipse(150, 450, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2);this.context.stroke();})

6 矩形绘制的多种实现方式

在鸿蒙中，绘制矩形有多种实现方式，可以根据具体需求选择合适的方法。

6.1 使用Rect组件绘制矩形

javascript

// 使用Rect组件绘制矩形
Rect().width(100).height(100).fill(Color.Pink) // 填充颜色.stroke(Color.Red) // 边框颜色.strokeWidth(2) // 边框宽度.radius(10) // 圆角半径

Rect组件支持多种属性：

width：宽度，取值范围≥0
height：高度，取值范围≥0
radius：圆角半径，支持分别设置四个角的圆角度数，取值范围≥0
fill：设置填充区域的颜色
stroke：设置边框颜色
strokeWidth：设置边框宽度

6.2 实现圆角矩形

javascript

// 实现圆角矩形
Rect().width(100).height(100).fill(Color.Pink).radius(10) // 统一设置所有圆角// 分别设置不同圆角
Rect().width(100).height(100).fill(Color.Pink).radius([[10, 10], [10, 10], [0, 0], [0, 0]]) // 左上、右上、右下、左下

6.3 实现渐变矩形

javascript

// 实现渐变矩形
Rect().width(100).height(100).fillOpacity(0).linearGradient({direction: GradientDirection.Right,colors: [[Color.Red, 0.0], [Color.Orange, 0.3], [Color.Pink, 1.0]]})

7 实际应用场景

7.1 绘制基础图形组合

javascript

// 绘制基础图形组合
@Entry
@Component
struct ShapeExample {build() {Column({ space: 10 }) {Shape() {Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z')}.viewPort({ x: -80, y: -5, width: 500, height: 300 }).fill(0x317AF7).stroke(Color.Red).strokeWidth(3).strokeLineJoin(LineJoinStyle.Miter).strokeMiterLimit(5)}.width('100%').margin({ top: 15 })}
}

7.2 绘制CAD风格图形

在HarmonyOS鸿蒙Next中绘制CAD图形，可以通过以下步骤实现：

使用直线命令画三条水平直线和一条垂直直线
使用旋转和镜像命令创建对称图形
使用偏移命令创建平行线
使用修剪命令完善图形

javascript

// 使用Canvas绘制CAD风格图形
Canvas(this.context).width('100%').height('100%').onReady(() => {// 绘制基本线条this.context.beginPath();this.context.moveTo(50, 50);this.context.lineTo(200, 50);this.context.lineTo(200, 150);this.context.lineTo(50, 150);this.context.closePath();this.context.stroke();// 绘制圆形元素this.context.beginPath();this.context.arc(125, 100, 30, 0, Math.PI * 2);this.context.stroke();})