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

星星不闪包退1

于 2024-10-06 19:20:44 发布

阅读量216

点赞数 3

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

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

版权

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

99 篇文章 0 订阅

订阅专栏

ArkUI

99 篇文章 0 订阅

订阅专栏

ArkTS

95 篇文章 0 订阅

订阅专栏

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

DrawingRenderingContext

使用DrawingRenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。

说明：

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

接口

DrawingRenderingContext(unit?: LengthMetricsUnit)

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

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

参数：

参数名	类型	必填	说明
unit12+	LengthMetricsUnit	否	用来配置DrawingRenderingContext对象的单位模式，配置后无法更改，配置方法同CanvasRenderingContext2D。默认值：DEFAULT。

属性

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

名称	类型	只读	可选	说明
size	{width: number, height: number}	否	否	Context大小的宽和高。默认单位为vp。
canvas	Canvas	否	否	绘制模块的Canvas对象，具体描述见绘制模块中的Canvas对象。

方法

invalidate

invalidate(): void

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

使组件无效，触发组件的重新渲染。

示例：

该示例实现了如何使用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%')
  }
}