鸿蒙开发：了解Canvas绘制

前言

本文基于Api13

系统的组件无法满足我们的需求，这种情况下就不得不自己自定义组件，除了自定义组合组件，拓展组件，还有一种方式，那就是完全的自绘制组件，这种情况，常见的场景有，比如金融软件中的股票行情图，基金折线图，当然了也有其它的需要高度绘制的地方，鸿蒙开发中，和其它的语言类似，都是采用Canvas画布进行绘制，但是绘制的方式更趋向于Web前端中的方式。

Canvas是一个画布，并不能提供绘制的能力，但是它作为一个载体，承担了绘制的容器，目前实现绘制，提供了有两个对象，一个是DrawingRenderingContext，另一个是CanvasRenderingContext2D，本篇文章，暂不涉及概述这两个对象，我们先来了解一下绘制的基础知识。

Canvas对象，在Api12之后，增加了一个可以AI分析选项参数ImageAIOptions，通过此项可配置分析类型或绑定一个分析控制器。

TypeScript 复制代码

(context: CanvasRenderingContext2D | DrawingRenderingContext, imageAIOptions: ImageAIOptions): CanvasAttribute;

当然，也有一个支持AI分析的属性enableAnalyzer，不过需要搭配CanvasRenderingContext2D中的StartImageAnalyzer和StopImageAnalyzer一起使用。

绘制要求

在绘制之前，我们需要注意，必须等待Canvas组件初始化完成时，也就是在onReady方法中进行绘制。

先来一个简单案例，绘制一个半径为100的圆。

TypeScript 复制代码

@Entry
@Component
struct DemoPage {
  private context: DrawingRenderingContext = new DrawingRenderingContext()

  build() {
    Canvas(this.context)
      .width("100%")
      .height("100%")
      .onReady(() => {
        this.context.canvas.drawCircle(200, 200, 100)
        this.context.invalidate()
      })
  }
}

运行后，可以看到效果如下，默认是黑色。

DrawingRenderingContext介绍

DrawingRenderingContext是一个用于绘制的工具，它可以在Canvas画布组件上进行自由的绘制，比如矩形、文本、图片等等，有一个默认参数LengthMetricsUnit，主要是设置长度属性单位，有两个值可以选择，DEFAULT和PX，前者用于描述以默认的vp像素单位为单位的长度，后者用于描述以px像素单位为单位的长度。

有三个属性或方法可供选择，参数如下：

名称	类型	说明
size	Size	Context大小的宽和高。
canvas	Canvas	绘制模块的Canvas对象，具体描述见绘制模块中的Canvas对象。
invalidate	无参	使组件无效，触发组件的重新渲染。

CanvasRenderingContext2D介绍

CanvasRenderingContext2D和DrawingRenderingContext一样，都是一个绘制工具，都可以进行绘制一些常见的矩形、文本、图片等，和DrawingRenderingContext不同的是，它的属性更加丰富，而且兼容其自身所带的功能，所以，在绘制元素上，推荐使用CanvasRenderingContext2D。

RenderingContextSettings参数主要用来配置CanvasRenderingContext2D对象的参数。

TypeScript 复制代码

constructor(settings?: RenderingContextSettings);

Api12之后新增了一个参数LengthMetricsUnit，主要用来用来配置CanvasRenderingContext2D对象的单位模式。

TypeScript 复制代码

constructor(settings?: RenderingContextSettings, unit?: LengthMetricsUnit);

使用CanvasRenderingContext2D简单绘制一个矩形：

TypeScript 复制代码

@Entry
@Component
struct DemoPage {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Canvas(this.context)
      .width('100%')
      .height('100%')
      .onReady(() => {
        this.context.fillRect(0, 0, 100, 100)
      })
  }
}

鸿蒙开发：了解Canvas绘制

前言

绘制要求

DrawingRenderingContext介绍

CanvasRenderingContext2D介绍

相关总结