1# Canvas 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @sd-wu--> 5<!--Designer: @sunbees--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9提供画布组件，用于自定义绘制图形。 10 11> **说明：** 12> 13> 该组件从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15## 子组件 16 17不支持。 18 19## 接口 20 21### Canvas 22 23Canvas(context?: CanvasRenderingContext2D | DrawingRenderingContext) 24 25创建Canvas组件时，最大面积不超过10000px*10000px，超过最大面积则无法正常创建。 26 27**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 28 29**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33**参数：** 34 35| 参数名 | 类型 | 必填 | 说明 | 36| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 37| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) \| [DrawingRenderingContext<sup>12+</sup>](ts-drawingrenderingcontext.md) | 否 | CanvasRenderingContext2D: 不支持多个Canvas共用一个CanvasRenderingContext2D对象，具体描述见[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)对象。DrawingRenderingContext: 不支持多个Canvas共用一个DrawingRenderingContext对象，具体描述见[DrawingRenderingContext](ts-drawingrenderingcontext.md)对象。 | 38 39### Canvas<sup>12+</sup> 40 41Canvas(context: CanvasRenderingContext2D | DrawingRenderingContext, imageAIOptions: ImageAIOptions) 42 43创建Canvas组件，支持设置CanvasRenderingContext2D对象或DrawingRenderingContext对象，支持设置AI分析选项。 44 45**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49**参数：** 50 51| 参数名 | 类型 | 必填 | 说明 | 52| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 53| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) \| [DrawingRenderingContext<sup>12+</sup>](ts-drawingrenderingcontext.md) | 是 | CanvasRenderingContext2D: 不支持多个Canvas共用一个CanvasRenderingContext2D对象，具体描述见[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)对象。DrawingRenderingContext: 不支持多个Canvas共用一个DrawingRenderingContext对象，具体描述见[DrawingRenderingContext](ts-drawingrenderingcontext.md)对象。 | 54| imageAIOptions | [ImageAIOptions](ts-image-common.md#imageaioptions12) | 是 | 给组件设置一个AI分析选项，通过此项可配置分析类型或绑定一个分析控制器。 | 55 56## 属性 57 58除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 59 60### enableAnalyzer<sup>12+</sup> 61 62设置组件支持AI分析，当前支持主体识别、文字识别和对象查找等功能，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 63需要搭配[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)中的[StartImageAnalyzer](ts-canvasrenderingcontext2d.md#startimageanalyzer12)和[StopImageAnalyzer](ts-canvasrenderingcontext2d.md#stopimageanalyzer12)一起使用。 64不能和[overlay](ts-universal-attributes-overlay.md#overlay)属性同时使用，两者同时设置时overlay中CustomBuilder属性将失效。该特性依赖设备能力。 65 66**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 67 68**系统能力：** SystemCapability.ArkUI.ArkUI.Full 69 70**参数：** 71 72| 参数名 | 类型 | 必填 | 说明 | 73| ------ | ------- | ---- | ------------------------------------------------------------ | 74| enable | boolean | 是 | 组件支持AI分析，设置为true时，组件可进行AI分析。<br/>默认值：false | 75 76## 事件 77 78除支持[通用事件](ts-component-general-events.md)外，还支持如下事件： 79 80### onReady 81 82onReady(event: VoidCallback) 83 84Canvas组件初始化完成或者发生大小变化时的事件回调，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 85 86当该事件被触发时画布被清空，该事件之后Canvas组件宽高确定且可获取，可使用Canvas相关API进行绘制。当Canvas组件仅发生位置变化时，只触发[onAreaChange](ts-universal-component-area-change-event.md#onareachange)事件，不触发onReady事件。[onAreaChange](ts-universal-component-area-change-event.md#onareachange)事件在onReady事件后触发。 87 88**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 89 90**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 91 92**系统能力：** SystemCapability.ArkUI.ArkUI.Full 93 94**参数：** 95 96| 参数名 | 类型 | 必填 | 说明 | 97| ------ | ------- | ---- | ------------------------------------------------------------ | 98| event | [VoidCallback](ts-types.md#voidcallback12) | 是 | Canvas组件初始化完成或者发生大小变化时的事件回调事件。 | 99 100## 示例 101 102### 示例1（使用CanvasRenderingContext2D中的方法） 103 104该示例实现了如何在Canvas组件使用CanvasRenderingContext2D中的方法进行绘制。 105 106```ts 107// xxx.ets 108@Entry 109@Component 110struct CanvasExample { 111 private settings: RenderingContextSettings = new RenderingContextSettings(true); 112 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 113 114 build() { 115 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 116 Canvas(this.context) 117 .width('100%') 118 .height('100%') 119 .backgroundColor('#ffff00') 120 .onReady(() => { 121 this.context.fillRect(0, 30, 100, 100) 122 }) 123 } 124 .width('100%') 125 .height('100%') 126 } 127} 128``` 129  130 131### 示例2（使用DrawingRenderingContext中的方法） 132 133该示例实现了如何在Canvas组件使用DrawingRenderingContext中的方法进行绘制。 134 135```ts 136// xxx.ets 137@Entry 138@Component 139struct CanvasExample { 140 private context: DrawingRenderingContext = new DrawingRenderingContext(); 141 142 build() { 143 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 144 Canvas(this.context) 145 .width('100%') 146 .height('100%') 147 .backgroundColor('rgb(213,213,213)') 148 .onReady(() => { 149 this.context.canvas.drawCircle(200, 200, 100) 150 this.context.invalidate() 151 }) 152 } 153 .width('100%') 154 .height('100%') 155 } 156} 157``` 158  159 160### 示例3（使用attributeModifier动态设置Canvas组件的属性及方法） 161 162该示例展示了如何使用attributeModifier动态设置Canvas组件的enableAnalyzer属性和onReady方法。 163 164```ts 165// xxx.ets 166import { BusinessError } from '@kit.BasicServicesKit'; 167 168class MyCanvasModifier implements AttributeModifier<CanvasAttribute> { 169 context: CanvasRenderingContext2D = new CanvasRenderingContext2D() 170 171 applyNormalAttribute(instance: CanvasAttribute): void { 172 // 从（0，0）绘制一张宽高为200vp的图片 173 instance.onReady(() => { 174 let image = new ImageBitmap("image.png") 175 this.context.drawImage(image, 0, 0, 200, 200) 176 }) 177 // 设置开启组件AI分析功能，点击start后，长按触发AI识别功能 178 instance.enableAnalyzer(true) 179 } 180} 181 182@Entry 183@Component 184struct attributeDemo { 185 @State modifier: MyCanvasModifier = new MyCanvasModifier() 186 private settings: RenderingContextSettings = new RenderingContextSettings(true) 187 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 188 private config: ImageAnalyzerConfig = { 189 types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT] 190 } 191 private aiController: ImageAnalyzerController = new ImageAnalyzerController() 192 private options: ImageAIOptions = { 193 types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT], 194 aiController: this.aiController 195 } 196 197 build() { 198 Row() { 199 Column() { 200 Button('start') 201 .width(100) 202 .height(50) 203 .margin(5) 204 .onClick(() => { 205 this.context.startImageAnalyzer(this.config) 206 .then(() => { 207 console.log("analysis complete") 208 }) 209 .catch((error: BusinessError) => { 210 console.log("error code: " + error.code) 211 }) 212 }) 213 Button('stop') 214 .width(100) 215 .height(50) 216 .margin(5) 217 .onClick(() => { 218 this.context.stopImageAnalyzer() 219 }) 220 Button('getTypes') 221 .width(100) 222 .height(50) 223 .margin(5) 224 .onClick(() => { 225 this.aiController.getImageAnalyzerSupportTypes() 226 }) 227 Canvas(this.context, this.options) 228 .borderWidth(1) 229 .height(200) 230 .width(200) 231 .attributeModifier(this.modifier) 232 .onAppear(() => { 233 this.modifier.context = this.context 234 }) 235 } 236 } 237 } 238} 239``` 240 241  242
