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

星星不闪包退1

于 2024-10-06 19:18:11 发布

阅读量217

点赞数 2

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

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

版权

ArkUI 同时被 3 个专栏收录

99 篇文章 0 订阅

订阅专栏

鸿蒙5.0

99 篇文章 0 订阅

订阅专栏

ArkTS

95 篇文章 0 订阅

订阅专栏

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

CanvasPattern

一个Object对象，使用createPattern方法创建，通过指定图像和重复方式创建图片填充的模板。

说明：

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

方法

setTransform

setTransform(transform?: Matrix2D): void

使用Matrix2D对象作为参数、对当前CanvasPattern进行矩阵变换。

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

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

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

参数：

参数名	类型	必填	说明
transform	Matrix2D	否	转换矩阵。

示例：

// xxx.ets
@Entry
@Component
struct CanvasPatternPage {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private matrix: Matrix2D = new Matrix2D()
  private img: ImageBitmap = new ImageBitmap("common/pattern.jpg")
  private pattern : CanvasPattern | null = null

  build() {
      Column() {
        Button("Click to set transform")
          .onClick(() => {
            this.matrix.scaleY = 1
            this.matrix.scaleX = 1
            this.matrix.translateX = 50
            this.matrix.translateY = 200
            if (this.pattern) {
              this.pattern.setTransform(this.matrix)
            }
            this.context.fillRect(0, 0, 480, 720)
          })
          .width("45%")
          .margin("5px")
        Canvas(this.context)
          .width('100%')
          .height('80%')
          .backgroundColor('#FFFFFF')
          .onReady(() => {
            this.pattern = this.context.createPattern(this.img, 'no-repeat')
            this.matrix.scaleY = 0.5
            this.matrix.scaleX = 0.5
            this.matrix.translateX = 50
            this.matrix.translateY = 50
            if (this.pattern) {
              this.context.fillStyle = this.pattern
              this.pattern.setTransform(this.matrix)
            }
            this.context.fillRect(0, 0, 480, 720)
          })
      }
      .width('100%')
      .height('100%')
  }
}