• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Matrix2D
2
3矩阵对象，可以对矩阵进行缩放、旋转、平移等变换。
4
5>  **说明：**
6>
7> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## 接口
10
11Matrix2D()
12
13从API version 9开始，该接口支持在ArkTS卡片中使用。
14
15## 属性
16
17| 属性                      | 类型   | 描述                                                         |
18| ------------------------- | ------ | ------------------------------------------------------------ |
19| [scaleX](#scalex)         | number | 水平缩放系数。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
20| [scaleY](#scaley)         | number | 垂直缩放系数。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
21| [rotateX](#rotatex)       | number | 水平倾斜系数。从API version 9开始，该接口支持在ArkTS卡片中使用。 |
22| [rotateY](#rotatey)       | number | 垂直倾斜系数。从API version 9开始，该接口支持在ArkTS卡片中使用。 |
23| [translateX](#translatex) | number | 水平平移距离，单位为vp。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
24| [translateY](#translatey) | number | 垂直平移距离，单位为vp。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
25
26>  **说明：**
27>
28>  可使用[px2vp](ts-pixel-units.md#像素单位转换)接口进行单位转换。
29
30### scaleX
31
32```ts
33// xxx.ets
34@Entry
35@Component
36struct Matrix2DScaleX {
37  @State message: string = 'Matrix2D ScaleX'
38
39  printMatrix(title: string, matrix: Matrix2D) {
40    console.log(title)
41    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
42                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
43                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
44  }
45  build() {
46    Row() {
47      Column() {
48        Text(this.message)
49          .fontSize(20)
50          .fontWeight(FontWeight.Bold)
51        Button("Set scaleX")
52          .onClick(() => {
53            let matrix : Matrix2D = new Matrix2D()
54            matrix.scaleX = 1
55            this.printMatrix(this.message, matrix)
56          })
57      }
58      .width('100%')
59    }
60    .height('100%')
61  }
62}
63```
64
65### scaleY
66
67```ts
68// xxx.ets
69@Entry
70@Component
71struct Matrix2DScaleY {
72  @State message: string = 'Matrix2D ScaleY'
73
74  printMatrix(title: string, matrix: Matrix2D) {
75    console.log(title)
76    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
77                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
78                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
79  }
80  build() {
81    Row() {
82      Column() {
83        Text(this.message)
84          .fontSize(20)
85          .fontWeight(FontWeight.Bold)
86        Button("Set scaleY")
87          .onClick(() => {
88            let matrix : Matrix2D = new Matrix2D()
89            matrix.scaleY = 1
90            this.printMatrix(this.message, matrix)
91          })
92      }
93      .width('100%')
94    }
95    .height('100%')
96  }
97}
98```
99
100### rotateX
101
102```ts
103// xxx.ets
104@Entry
105@Component
106struct Matrix2DRotateX {
107  @State message: string = 'Matrix2D RotateX'
108
109  printMatrix(title: string, matrix: Matrix2D) {
110    console.log(title)
111    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
112                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
113                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
114  }
115  build() {
116    Row() {
117      Column() {
118        Text(this.message)
119          .fontSize(20)
120          .fontWeight(FontWeight.Bold)
121        Button("Set rotateX")
122          .onClick(() => {
123            let matrix : Matrix2D = new Matrix2D()
124            matrix.rotateX = Math.sin(45 / Math.PI)
125            this.printMatrix(this.message, matrix)
126          })
127      }
128      .width('100%')
129    }
130    .height('100%')
131  }
132}
133```
134
135### rotateY
136
137```ts
138// xxx.ets
139@Entry
140@Component
141struct Matrix2DRotateY {
142  @State message: string = 'Matrix2D RotateY'
143
144  printMatrix(title: string, matrix: Matrix2D) {
145    console.log(title)
146    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
147                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
148                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
149  }
150  build() {
151    Row() {
152      Column() {
153        Text(this.message)
154          .fontSize(20)
155          .fontWeight(FontWeight.Bold)
156        Button("Set rotateY")
157          .onClick(() => {
158            let matrix : Matrix2D = new Matrix2D()
159            matrix.rotateY = Math.cos(45 / Math.PI)
160            this.printMatrix(this.message, matrix)
161          })
162      }
163      .width('100%')
164    }
165    .height('100%')
166  }
167}
168```
169
170### translateX
171
172```ts
173// xxx.ets
174@Entry
175@Component
176struct Matrix2DTranslateX {
177  @State message: string = 'Matrix2D TranslateX'
178
179  printMatrix(title: string, matrix: Matrix2D) {
180    console.log(title)
181    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
182                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
183                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
184  }
185  build() {
186    Row() {
187      Column() {
188        Text(this.message)
189          .fontSize(20)
190          .fontWeight(FontWeight.Bold)
191        Button("Set translateX")
192          .onClick(() => {
193            let matrix : Matrix2D = new Matrix2D()
194            matrix.translateX = 10
195            this.printMatrix(this.message, matrix)
196          })
197      }
198      .width('100%')
199    }
200    .height('100%')
201  }
202}
203```
204
205### translateY
206
207```ts
208// xxx.ets
209@Entry
210@Component
211struct Matrix2DTranslateY {
212  @State message: string = 'Matrix2D TranslateY'
213
214  printMatrix(title: string, matrix: Matrix2D) {
215    console.log(title)
216    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
217                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
218                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
219  }
220  build() {
221    Row() {
222      Column() {
223        Text(this.message)
224          .fontSize(20)
225          .fontWeight(FontWeight.Bold)
226        Button("Set translateY")
227          .onClick(() => {
228            let matrix : Matrix2D = new Matrix2D()
229            matrix.translateY = 10
230            this.printMatrix(this.message, matrix)
231          })
232      }
233      .width('100%')
234    }
235    .height('100%')
236  }
237}
238```
239
240## 方法
241
242### identity
243
244identity(): Matrix2D
245
246创建一个单位矩阵。
247
248从API version 9开始，该接口支持在ArkTS卡片中使用。
249
250**返回值：**
251
252| 类型                  | 说明       |
253| --------------------- | ---------- |
254| [Matrix2D](#matrix2d) | 单位矩阵。 |
255
256**示例：**
257
258```ts
259// xxx.ets
260@Entry
261@Component
262struct Matrix2DIdentity {
263  @State message: string = 'Matrix2D Identity'
264
265  printMatrix(title: string, matrix: Matrix2D) {
266    console.log(title)
267    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
268                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
269                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
270  }
271  build() {
272    Row() {
273      Column() {
274        Text(this.message)
275          .fontSize(20)
276          .fontWeight(FontWeight.Bold)
277        Button("matrix identity")
278          .onClick(() => {
279            let matrix : Matrix2D = new Matrix2D()
280            matrix = matrix.identity()
281            this.printMatrix(this.message, matrix)
282          })
283      }
284      .width('100%')
285    }
286    .height('100%')
287  }
288}
289```
290
291### invert
292
293invert(): Matrix2D
294
295得到当前矩阵的逆矩阵。
296
297从API version 9开始，该接口支持在ArkTS卡片中使用。
298
299**返回值：**
300
301| 类型                  | 说明         |
302| --------------------- | ------------ |
303| [Matrix2D](#matrix2d) | 逆矩阵结果。 |
304
305**示例：**
306
307```ts
308// xxx.ets
309@Entry
310@Component
311struct Matrix2DInvert {
312  @State message: string = 'Matrix2D Invert'
313
314  printMatrix(title: string, matrix: Matrix2D) {
315    console.log(title)
316    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
317                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
318                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
319  }
320  build() {
321    Row() {
322      Column() {
323        Text(this.message)
324          .fontSize(20)
325          .fontWeight(FontWeight.Bold)
326        Button("matrix invert")
327          .onClick(() => {
328            let matrix : Matrix2D = new Matrix2D()
329            matrix.scaleX = 2
330            matrix.scaleY = 1
331            matrix.rotateX = 0
332            matrix.rotateY = 0
333            matrix.translateX = 10
334            matrix.translateY = 20
335            matrix.invert()
336            this.printMatrix(this.message, matrix)
337          })
338      }
339      .width('100%')
340    }
341    .height('100%')
342  }
343}
344```
345
346### multiply<sup>(deprecated) </sup>
347
348multiply(other?: Matrix2D): Matrix2D
349
350当前矩阵与目标矩阵相乘。
351
352从API version 9开始，该接口支持在ArkTS卡片中使用。该接口为空接口。
353
354该接口从API version 10开始废弃。
355
356**参数：**
357
358| 参数  | 类型     | 必填 | 默认值 | 描述       |
359| ----- | -------- | ---- | ------ | ---------- |
360| other | Matrix2D | 否   | null   | 目标矩阵。 |
361
362**返回值：**
363
364| 类型                  | 说明           |
365| --------------------- | -------------- |
366| [Matrix2D](#matrix2d) | 相乘结果矩阵。 |
367
368**示例：**
369
370```ts
371// xxx.ets
372@Entry
373@Component
374struct Matrix2DMultiply {
375  @State message: string = 'Matrix2D Multiply'
376
377  printMatrix(title: string, matrix: Matrix2D) {
378    console.log(title)
379    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
380                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
381                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
382  }
383  build() {
384    Row() {
385      Column() {
386        Text(this.message)
387          .fontSize(20)
388          .fontWeight(FontWeight.Bold)
389        Button("matrix multiply")
390          .onClick(() => {
391            let matrix : Matrix2D = new Matrix2D()
392            matrix.scaleX = 1
393            matrix.scaleY = 1
394            matrix.rotateX = 0
395            matrix.rotateY = 0
396            matrix.translateX = 0
397            matrix.translateY = 0
398            let other: Matrix2D = new Matrix2D()
399            other.scaleX = 2
400            other.scaleY = 2
401            other.rotateX = 0
402            other.rotateY = 0
403            other.translateX = 10
404            other.translateY = 10
405            other.multiply(other)
406            this.printMatrix(this.message, matrix)
407          })
408      }
409      .width('100%')
410    }
411    .height('100%')
412  }
413}
414```
415
416### rotate<sup>(deprecated) </sup>
417
418rotate(rx?: number, ry?: number): Matrix2D
419
420对当前矩阵进行旋转运算。
421
422从API version 9开始，该接口支持在ArkTS卡片中使用。该接口为空接口。
423
424该接口从API version 10开始废弃，推荐使用[rotate](#rotate10)。
425
426**参数：**
427
428| 参数 | 类型   | 必填 | 默认值 | 描述                             |
429| ---- | ------ | ---- | ------ | -------------------------------- |
430| rx   | number | 否   | 0      | 旋转点的水平方向坐标，单位为vp。 |
431| ry   | number | 否   | 0      | 旋转点的垂直方向坐标，单位为vp。 |
432
433**返回值：**
434
435| 类型                  | 说明                 |
436| --------------------- | -------------------- |
437| [Matrix2D](#matrix2d) | 旋转后结果矩阵对象。 |
438
439**示例：**
440
441```ts
442// xxx.ets
443@Entry
444@Component
445struct Matrix2DRotate {
446  @State message: string = 'Matrix2D Rotate'
447
448  printMatrix(title: string, matrix: Matrix2D) {
449    console.log(title)
450    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
451                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
452                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
453  }
454  build() {
455    Row() {
456      Column() {
457        Text(this.message)
458          .fontSize(20)
459          .fontWeight(FontWeight.Bold)
460        Button("matrix rotate")
461          .onClick(() => {
462            let matrix : Matrix2D = new Matrix2D()
463            matrix.scaleX = 1
464            matrix.scaleY = 1
465            matrix.rotateX = 0
466            matrix.rotateY = 0
467            matrix.translateX = 0
468            matrix.translateY = 0
469            matrix.rotate(10, 10)
470            this.printMatrix(this.message, matrix)
471          })
472      }
473      .width('100%')
474    }
475    .height('100%')
476  }
477}
478```
479
480### rotate<sup>10+</sup>
481
482rotate(degree: number, rx?: number, ry?: number): Matrix2D
483
484以旋转点为中心、对当前矩阵进行右乘旋转运算。
485
486从API version 10开始，该接口支持在ArkTS卡片中使用。
487
488**参数：**
489
490| 参数   | 类型   | 必填 | 默认值 | 描述                                                         |
491| ------ | ------ | ---- | ------ | ------------------------------------------------------------ |
492| degree | number | 是   | 0      | 旋转角度，单位为弧度。顺时针方向为正角度，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
493| rx     | number | 否   | 0      | 旋转点的水平方向坐标，单位为vp。                             |
494| ry     | number | 否   | 0      | 旋转点的垂直方向坐标，单位为vp。                             |
495
496**返回值：**
497
498| 类型                  | 说明                 |
499| --------------------- | -------------------- |
500| [Matrix2D](#matrix2d) | 旋转后结果矩阵对象。 |
501
502**示例：**
503
504```ts
505// xxx.ets
506@Entry
507@Component
508struct Matrix2DRotate {
509  @State message: string = 'Matrix2D Rotate'
510
511  printMatrix(title: string, matrix: Matrix2D) {
512    console.log(title)
513    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
514                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
515                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
516  }
517  build() {
518    Row() {
519      Column() {
520        Text(this.message)
521          .fontSize(20)
522          .fontWeight(FontWeight.Bold)
523        Button("matrix rotate")
524          .onClick(() => {
525            let matrix : Matrix2D = new Matrix2D()
526            matrix.scaleX = 1
527            matrix.scaleY = 1
528            matrix.rotateX = 0
529            matrix.rotateY = 0
530            matrix.translateX = 0
531            matrix.translateY = 0
532            matrix.rotate(90 / Math.PI, 10, 10)
533            this.printMatrix(this.message, matrix)
534          })
535      }
536      .width('100%')
537    }
538    .height('100%')
539  }
540}
541```
542
543### translate
544
545translate(tx?: number, ty?: number): Matrix2D
546
547对当前矩阵进行左乘平移运算。
548
549从API version 9开始，该接口支持在ArkTS卡片中使用。
550
551**参数：**
552
553| 参数 | 类型   | 必填 | 默认值 | 描述                         |
554| ---- | ------ | ---- | ------ | ---------------------------- |
555| tx   | number | 否   | 0      | 水平方向平移距离，单位为vp。 |
556| ty   | number | 否   | 0      | 垂直方向平移距离，单位为vp。 |
557
558**返回值：**
559
560| 类型                  | 说明                 |
561| --------------------- | -------------------- |
562| [Matrix2D](#matrix2d) | 平移后结果矩阵对象。 |
563
564**示例：**
565
566```ts
567// xxx.ets
568@Entry
569@Component
570struct Matrix2DTranslate {
571  @State message: string = 'Matrix2D Translate'
572
573  printMatrix(title: string, matrix: Matrix2D) {
574    console.log(title)
575    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
576                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
577                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
578  }
579  build() {
580    Row() {
581      Column() {
582        Text(this.message)
583          .fontSize(20)
584          .fontWeight(FontWeight.Bold)
585        Button("matrix translate")
586          .onClick(() => {
587            let matrix : Matrix2D = new Matrix2D()
588            matrix.scaleX = 1
589            matrix.scaleY = 1
590            matrix.rotateX = 0
591            matrix.rotateY = 0
592            matrix.translateX = 0
593            matrix.translateY = 0
594            matrix.translate(100, 100)
595            this.printMatrix(this.message, matrix)
596          })
597      }
598      .width('100%')
599    }
600    .height('100%')
601  }
602}
603```
604
605### scale
606
607scale(sx?: number, sy?: number): Matrix2D
608
609对当前矩阵进行右乘缩放运算。
610
611从API version 9开始，该接口支持在ArkTS卡片中使用。
612
613**参数：**
614
615| 参数 | 类型   | 必填 | 默认值 | 描述               |
616| ---- | ------ | ---- | ------ | ------------------ |
617| sx   | number | 否   | 1      | 水平缩放比例系数。 |
618| sy   | number | 否   | 1      | 垂直缩放比例系数。 |
619
620**返回值：**
621
622| 类型                  | 说明               |
623| --------------------- | ------------------ |
624| [Matrix2D](#matrix2d) | 缩放结果矩阵对象。 |
625
626**示例：**
627
628```ts
629// xxx.ets
630@Entry
631@Component
632struct Matrix2DScale {
633  @State message: string = 'Matrix2D Scale'
634
635  printMatrix(title: string, matrix: Matrix2D) {
636    console.log(title)
637    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
638                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
639                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
640  }
641  build() {
642    Row() {
643      Column() {
644        Text(this.message)
645          .fontSize(20)
646          .fontWeight(FontWeight.Bold)
647        Button("matrix scale")
648          .onClick(() => {
649            let matrix : Matrix2D = new Matrix2D()
650            matrix.scaleX = 1
651            matrix.scaleY = 1
652            matrix.rotateX = 0
653            matrix.rotateY = 0
654            matrix.translateX = 0
655            matrix.translateY = 0
656            matrix.scale(0.5, 0.5)
657            this.printMatrix(this.message, matrix)
658          })
659      }
660      .width('100%')
661    }
662    .height('100%')
663  }
664}
665```