「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas组件自定义绘图原创

SoraLuna

发布于 2024-11-25 21:23

浏览

1收藏

Canvas 组件在鸿蒙应用中用于绘制自定义图形，提供丰富的绘制功能和灵活的定制能力。通过 Canvas，可以创建矩形、圆形、路径、文本等基础图形，为鸿蒙应用增添个性化的视觉效果。本篇将介绍 Canvas 组件的基础操作，涵盖绘制矩形、圆形、路径和文本的实例。

关键词

Canvas 组件
绘图
矩形绘制
圆形绘制
路径与文本

一、Canvas 组件概述

Canvas 组件是鸿蒙中用于自定义图形绘制的关键组件。通过 Canvas，开发者可以绘制多种图形元素，包括矩形、圆形、路径和文本，满足应用中各种个性化的设计需求。

二、基础图形绘制

2.1 绘制矩形

Canvas 提供了 fillRect 和 strokeRect 方法，可以绘制填充矩形和描边矩形。

@Entry
@Component
struct RectangleCanvasExample {
  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height(500)
        .onReady(() => {
          // 设置填充颜色为蓝色
          this.context.fillStyle = '#0000FF';
          // 绘制填充矩形
          this.context.fillRect(150, 150, 300, 200);

          // 设置描边颜色为黑色
          this.context.strokeStyle = '#000000';
          // 设置描边宽度为 5
          this.context.lineWidth = 5;
          // 绘制描边矩形
          this.context.strokeRect(150, 150, 300, 200);
        });
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

效果示例：在画布上绘制一个蓝色填充、黑色边框的矩形。

2.2 绘制圆形

使用 arc 方法可以绘制圆形或圆弧，通过设置圆心坐标、半径等参数，可以实现完整圆形和部分圆弧的绘制。

@Entry
@Component
struct CircleCanvasExample {
  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height(600)
        .onReady(() => {
          // 设置填充颜色为绿色
          this.context.fillStyle = '#00FF00';
          // 开始绘制路径
          this.context.beginPath();
          // 绘制圆形，指定圆心坐标、半径、起始角度和结束角度
          this.context.arc(300, 300, 100, 0, 2 * Math.PI);
          // 填充圆形
          this.context.fill();
        });
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

效果示例：在画布上绘制一个绿色填充的圆形。

三、路径绘制

通过 Canvas 中的路径绘制方法可以创建更复杂的自定义图形。可以使用 beginPath、moveTo、lineTo 等方法绘制路径，并使用 fill 或 stroke 设置填充或边框样式。

3.1 绘制多边形

以下代码展示了如何在 Canvas 上绘制一个简单的三角形路径。

@Entry
@Component
struct PathCanvasExample {
  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height(600)
        .onReady(() => {
          // 设置路径边框颜色为红色
          this.context.strokeStyle = '#FF0000';
          // 设置路径边框宽度为 3
          this.context.lineWidth = 5;
          // 开始绘制路径
          this.context.beginPath();
          this.context.moveTo(200, 100); // 顶点 1
          this.context.lineTo(300, 500); // 顶点 2
          this.context.lineTo(100, 500); // 顶点 3
          this.context.closePath(); // 闭合路径
          // 绘制路径边框
          this.context.stroke();
        });
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

效果示例：在画布上绘制一个红色边框的三角形路径。

四、文本绘制

在 Canvas 组件中，可以通过 fillText 绘制文本，适用于显示标题、标注等文字信息。可以设置字体大小、颜色等属性。

4.1 绘制文本

使用 fillText 方法在 Canvas 中绘制文本，并设置字体、颜色等样式。

@Entry
@Component
struct TextCanvasExample {
  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .onReady(() => {
          // 设置字体样式和大小
          this.context.font = '72px sans-serif';
          // 设置文本颜色为紫色
          this.context.fillStyle = '#800080';
          // 绘制文本
          this.context.fillText('Hello HarmonyOS!', 150, 350);
        });
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

效果示例：在画布上绘制一个紫色的文本“Hello HarmonyOS!”。

五、综合绘图实例：多图层绘制

以下示例展示了如何在 Canvas 组件中通过组合多个图形来创建更丰富的视觉效果，包括矩形、圆形、路径和文本的综合绘制。

@Entry
@Component
struct ComplexCanvasExample {
  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height(700)
        .onReady(() => {
          // 绘制背景矩形
          this.context.fillStyle = '#D3D3D3';
          this.context.fillRect(0, 0, 300, 400);

          // 绘制蓝色圆形
          this.context.fillStyle = '#0000FF';
          this.context.beginPath();
          this.context.arc(150, 100, 70, 0, 2 * Math.PI);
          this.context.fill();

          // 绘制黑色文本
          this.context.font = '24px sans-serif';
          this.context.fillStyle = '#000000';
          this.context.fillText('Canvas Demo', 85, 300);

          // 绘制红色三角形路径
          this.context.strokeStyle = '#FF0000';
          this.context.lineWidth = 3;
          this.context.beginPath();
          this.context.moveTo(75, 350);
          this.context.lineTo(225, 350);
          this.context.lineTo(150, 250);
          this.context.closePath();
          this.context.stroke();
        });
    }
  }

  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D();
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.