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