鴻蒙開發：了解Canvas繪制

前言

本文基于Api13

系統的組件無法滿足我們的需求，這種情況下就不得不自己自定義組件，除了自定義組合組件，拓展組件，還有一種方式，那就是完全的自繪制組件，這種情況，常見的場景有，比如金融軟件中的股票行情圖，基金折線圖，當然了也有其它的需要高度繪制的地方，鴻蒙開發中，和其它的語言類似，都是采用Canvas畫布進行繪制，但是繪制的方式更趨向于Web前端中的方式。

Canvas是一個畫布，并不能提供繪制的能力，但是它作為一個載體，承擔了繪制的容器，目前實現繪制，提供了有兩個對象，一個是DrawingRenderingContext，另一個是CanvasRenderingContext2D，本篇文章，暫不涉及概述這兩個對象，我們先來了解一下繪制的基礎知識。

Canvas對象，在Api12之后，增加了一個可以AI分析選項參數ImageAIOptions，通過此項可配置分析類型或綁定一個分析控制器。

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

當然，也有一個支持AI分析的屬性enableAnalyzer，不過需要搭配CanvasRenderingContext2D中的StartImageAnalyzer和StopImageAnalyzer一起使用。

繪制要求

在繪制之前，我們需要注意，必須等待Canvas組件初始化完成時，也就是在onReady方法中進行繪制。

先來一個簡單案例，繪制一個半徑為100的圓。

@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對象的參數。

constructor(settings?: RenderingContextSettings);

Api12之后新增了一個參數LengthMetricsUnit，主要用來用來配置CanvasRenderingContext2D對象的單位模式。

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

使用CanvasRenderingContext2D簡單繪制一個矩形：

@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)})}
}