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

探索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图形，可以通过以下步骤实现：

1. 使用直线命令画三条水平直线和一条垂直直线

2. 使用旋转和镜像命令创建对称图形

3. 使用偏移命令创建平行线

4. 使用修剪命令完善图形

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 性能优化与最佳实践

为了确保图形绘制的最佳性能和用户体验，建议遵循以下准则：

1. 合理使用视口：正确配置viewport可以优化渲染性能

2. 选择合适的绘制方式：简单图形使用Shape组件，复杂图形考虑使用Canvas

3. 复用图形对象：尽可能复用已有的图形对象，减少内存占用

4. 使用离线画布：对于复杂图形，可以使用OffscreenCanvas进行预处理

5. 优化绘制指令：减少不必要的绘制操作，提高渲染效率

结语

鸿蒙OS提供了强大而灵活的图形绘制能力，从基本几何图形到复杂自定义图形都能轻松应对。通过本文的介绍，相信您已经对鸿蒙Next中的图形绘制有了全面了解。无论是简单的矩形、圆形，还是复杂的CAD风格图形，都能通过合适的组件和API实现。

希望本篇博客能为您的鸿蒙开发之旅提供帮助，祝您创作出更多精美的视觉作品！