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**参数：** 20 21| 参数 | 类型 | 必填 | 默认值 | 描述 | 22| --------- | ----------------------------------------------------- | ---- | ------ | ---------- | 23| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 否 | null | 转换矩阵。 | 24 25**示例：** 26 27```ts 28// xxx.ets 29@Entry 30@Component 31struct CanvasPatternPage { 32 private settings: RenderingContextSettings = new RenderingContextSettings(true) 33 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 34 private matrix: Matrix2D = new Matrix2D() 35 private img: ImageBitmap = new ImageBitmap("common/pattern.jpg") 36 private pattern : CanvasPattern | null = null 37 38 build() { 39 Column() { 40 Button("Click to set transform") 41 .onClick(() => { 42 this.matrix.scaleY = 1 43 this.matrix.scaleX = 1 44 this.matrix.translateX = 50 45 this.matrix.translateY = 200 46 if (this.pattern) { 47 this.pattern.setTransform(this.matrix) 48 } 49 this.context.fillRect(0, 0, 480, 720) 50 }) 51 .width("45%") 52 .margin("5px") 53 Canvas(this.context) 54 .width('100%') 55 .height('80%') 56 .backgroundColor('#FFFFFF') 57 .onReady(() => { 58 this.pattern = this.context.createPattern(this.img, 'no-repeat') 59 this.matrix.scaleY = 0.5 60 this.matrix.scaleX = 0.5 61 this.matrix.translateX = 50 62 this.matrix.translateY = 50 63 if (this.pattern) { 64 this.context.fillStyle = this.pattern 65 this.pattern.setTransform(this.matrix) 66 } 67 this.context.fillRect(0, 0, 480, 720) 68 }) 69 } 70 .width('100%') 71 .height('100%') 72 } 73} 74``` 75 76 77 78
