探索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();
})
8 性能优化与最佳实践
为了确保图形绘制的最佳性能和用户体验，建议遵循以下准则：
合理使用视口：正确配置viewport可以优化渲染性能
选择合适的绘制方式：简单图形使用Shape组件，复杂图形考虑使用Canvas
复用图形对象：尽可能复用已有的图形对象，减少内存占用
使用离线画布：对于复杂图形，可以使用OffscreenCanvas进行预处理
优化绘制指令：减少不必要的绘制操作，提高渲染效率
结语
鸿蒙OS提供了强大而灵活的图形绘制能力，从基本几何图形到复杂自定义图形都能轻松应对。通过本文的介绍，相信您已经对鸿蒙Next中的图形绘制有了全面了解。无论是简单的矩形、圆形，还是复杂的CAD风格图形，都能通过合适的组件和API实现。
希望本篇博客能为您的鸿蒙开发之旅提供帮助，祝您创作出更多精美的视觉作品！