• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# CanvasPattern
2
3一个Object对象，使用[createPattern](ts-canvasrenderingcontext2d.md#createpattern)方法创建，通过指定图像和重复方式创建图片填充的模板。
4
5>  **说明：**
6>
7>  从 API version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## 方法
10
11### setTransform
12
13setTransform(transform?: Matrix2D): void
14
15使用Matrix2D对象作为参数、对当前CanvasPattern进行矩阵变换。
16
17**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
18
19**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
20
21**系统能力：** SystemCapability.ArkUI.ArkUI.Full
22
23**参数：**
24
25| 参数名      | 类型  | 必填 | 说明   |
26| --------- | -------------- | ------ | ---------- |
27| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 否  | 转换矩阵。<br>默认值：null。 |
28
29## 示例
30
31通过setTransform对当前CanvasPattern进行矩阵变换。
32
33```ts
34// xxx.ets
35@Entry
36@Component
37struct CanvasPatternPage {
38  private settings: RenderingContextSettings = new RenderingContextSettings(true)
39  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
40  private matrix: Matrix2D = new Matrix2D()
41  private img: ImageBitmap = new ImageBitmap("common/pattern.jpg")
42  private pattern: CanvasPattern | null = null
43
44  build() {
45      Column() {
46        Button("Click to set transform")
47          .onClick(() => {
48            this.matrix.scaleY = 1
49            this.matrix.scaleX = 1
50            this.matrix.translateX = 50
51            this.matrix.translateY = 200
52            if (this.pattern) {
53              this.pattern.setTransform(this.matrix)
54            }
55            this.context.fillRect(0, 0, 480, 720)
56          })
57          .width("45%")
58          .margin("5px")
59        Canvas(this.context)
60          .width('100%')
61          .height('80%')
62          .backgroundColor('#FFFFFF')
63          .onReady(() => {
64            this.pattern = this.context.createPattern(this.img, 'no-repeat')
65            this.matrix.scaleY = 0.5
66            this.matrix.scaleX = 0.5
67            this.matrix.translateX = 50
68            this.matrix.translateY = 50
69            if (this.pattern) {
70              this.context.fillStyle = this.pattern
71              this.pattern.setTransform(this.matrix)
72            }
73            this.context.fillRect(0, 0, 480, 720)
74          })
75      }
76      .width('100%')
77      .height('100%')
78  }
79}
80```
81
82![CanvasPattern](./figures/canvas_pattern.gif)
83