鸿蒙5.0版开发：ArkTS画布组件（Canvas）

最新推荐文章于 2024-10-06 19:20:44 发布

星星不闪包退1

最新推荐文章于 2024-10-06 19:20:44 发布

阅读量660

点赞数 8

分类专栏： ArkTS 鸿蒙5.0 ArkUI 文章标签： harmonyos 华为 android 鸿蒙 ArkTS

本文链接：https://blog.csdn.net/m0_69424697/article/details/142730598

版权

鸿蒙5.0 同时被 3 个专栏收录

99 篇文章 0 订阅

订阅专栏

ArkUI

99 篇文章 0 订阅

订阅专栏

ArkTS

95 篇文章 0 订阅

订阅专栏

往期鸿蒙全套实战文章必看：

Canvas

提供画布组件，用于自定义绘制图形。

说明：

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

不支持。

接口

Canvas(context?: CanvasRenderingContext2D | DrawingRenderingContext)

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
context	CanvasRenderingContext2D \| DrawingRenderingContext12+	否	CanvasRenderingContext2D: 不支持多个Canvas共用一个CanvasRenderingContext2D对象，具体描述见CanvasRenderingContext2D对象。DrawingRenderingContext: 不支持多个Canvas共用一个DrawingRenderingContext对象，具体描述见DrawingRenderingContext对象。

属性

除支持通用属性外，还支持以下属性：

enableAnalyzer12+

设置组件支持AI分析，需要搭配context中的StartImageAnalyzer和StopImageAnalyzer一起使用。不能和overlay属性同时使用，两者同时设置时overlay中CustomBuilder属性将失效。该特性依赖设备能力。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
enable	boolean	是	组件支持AI分析，设置为true时，组件可进行AI分析。默认值：false

事件

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

除支持通用事件外，还支持如下事件：

名称	描述
onReady(event: () => void)	Canvas组件初始化完成时或者Canvas组件发生大小变化时的事件回调，当该事件被触发时画布被清空，该事件之后Canvas组件宽高确定且可获取，可使用Canvas相关API进行绘制。当Canvas组件仅发生位置变化时，只触发onAreaChange事件、不触发onReady事件。 onAreaChange事件在onReady事件后触发。

示例：

该示例实现了如何在Canvas组件使用CanvasRenderingContext2D中的方法进行绘制。

// xxx.ets
@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          this.context.fillRect(0, 30, 100, 100)
        })
    }
    .width('100%')
    .height('100%')
  }
}

该示例实现了如何在Canvas组件使用DrawingRenderingContext中的方法进行绘制。

// xxx.ets
@Entry
@Component
struct CanvasExample {
  private context: DrawingRenderingContext = new DrawingRenderingContext()

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          this.context.canvas.drawCircle(200, 200, 100)
          this.context.invalidate()
        })
    }
    .width('100%')
    .height('100%')
  }
}