1# Matrix2D 2 3矩阵对象，可以对矩阵进行缩放、旋转、平移等变换。 4 5> **说明：** 6> 7> 从 API version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 接口 10 11Matrix2D(unit?: LengthMetricsUnit) 12 13**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 14 15**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 16 17**系统能力：** SystemCapability.ArkUI.ArkUI.Full 18 19**参数：** 20 21| 参数名 | 类型 | 必填 | 说明 | 22| ------ | -------- | ---- | ------------------------------------- | 23| unit<sup>12+</sup> | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | 否 | 用来配置Matrix2D对象的单位模式，配置后无法动态更改，配置方法同[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md#lengthmetricsunit12)。<br>默认值：DEFAULT。| 24 25## 属性 26 27**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 28 29**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33| 名称 | 类型 | 只读 | 可选 | 说明 | 34| ----- | ----- | --------------- | ------ | ------------------------ | 35| scaleX | number | 否 | 是 | 水平缩放系数。 | 36| scaleY | number | 否 | 是 | 垂直缩放系数。 | 37| rotateX | number | 否 | 是 | 水平倾斜系数。 | 38| rotateY | number | 否 | 是 | 垂直倾斜系数。 | 39| translateX | number | 否 | 是 | 水平平移距离。<br>默认单位：vp。 | 40| translateY | number | 否 | 是 | 垂直平移距离。<br>默认单位：vp。 | 41 42> **说明：** 43> 44> 可使用[px2vp](ts-pixel-units.md#像素单位转换)接口进行单位转换。 45 46**示例：** 47 48```ts 49// xxx.ets 50@Entry 51@Component 52struct Parameter { 53 private settings: RenderingContextSettings = new RenderingContextSettings(true) 54 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 55 private matrix: Matrix2D = new Matrix2D() 56 57 build() { 58 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 59 Canvas(this.context) 60 .width('240vp') 61 .height('180vp') 62 .backgroundColor('#ffff00') 63 .onReady(() => { 64 this.context.fillRect(100, 20, 50, 50) 65 this.matrix.scaleX = 1 66 this.matrix.scaleY = 1 67 this.matrix.rotateX = -0.5 68 this.matrix.rotateY = 0.5 69 this.matrix.translateX = 10 70 this.matrix.translateY = 10 71 this.context.setTransform(this.matrix) 72 this.context.fillRect(100, 20, 50, 50) 73 }) 74 } 75 .width('100%') 76 .height('100%') 77 } 78} 79``` 80 81 82 83 84## 方法 85 86### identity 87 88identity(): Matrix2D 89 90创建一个单位矩阵。 91 92**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 93 94**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 95 96**系统能力：** SystemCapability.ArkUI.ArkUI.Full 97 98**返回值：** 99 100| 类型 | 说明 | 101| --------------------- | ---------- | 102| [Matrix2D](#matrix2d) | 单位矩阵。 | 103 104**示例：** 105 106```ts 107// xxx.ets 108@Entry 109@Component 110struct Identity { 111 private settings: RenderingContextSettings = new RenderingContextSettings(true) 112 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 113 private matrix: Matrix2D = new Matrix2D() 114 115 build() { 116 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 117 Canvas(this.context) 118 .width('240vp') 119 .height('180vp') 120 .backgroundColor('#ffff00') 121 .onReady(() => { 122 this.context.fillRect(100, 20, 50, 50) 123 this.matrix = this.matrix.identity() 124 this.context.setTransform(this.matrix) 125 this.context.fillRect(100, 100, 50, 50) 126 }) 127 } 128 .width('100%') 129 .height('100%') 130 } 131} 132``` 133 134 135 136 137### invert 138 139invert(): Matrix2D 140 141得到当前矩阵的逆矩阵。 142 143**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 144 145**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 146 147**系统能力：** SystemCapability.ArkUI.ArkUI.Full 148 149**返回值：** 150 151| 类型 | 说明 | 152| --------------------- | ------------ | 153| [Matrix2D](#matrix2d) | 逆矩阵结果。 | 154 155**示例：** 156 157```ts 158// xxx.ets 159@Entry 160@Component 161struct Invert { 162 private settings: RenderingContextSettings = new RenderingContextSettings(true) 163 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 164 private matrix: Matrix2D = new Matrix2D() 165 166 build() { 167 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 168 Canvas(this.context) 169 .width('240vp') 170 .height('180vp') 171 .backgroundColor('#ffff00') 172 .onReady(() => { 173 this.context.fillRect(100, 110, 50, 50) 174 this.matrix.scaleX = 1 175 this.matrix.scaleY = 1 176 this.matrix.rotateX = -0.5 177 this.matrix.rotateY = 0.5 178 this.matrix.translateX = 10 179 this.matrix.translateY = 10 180 this.matrix.invert() 181 this.context.setTransform(this.matrix) 182 this.context.fillRect(100, 110, 50, 50) 183 }) 184 } 185 .width('100%') 186 .height('100%') 187 } 188} 189``` 190 191 192 193 194### multiply<sup>(deprecated) </sup> 195 196multiply(other?: Matrix2D): Matrix2D 197 198当前矩阵与目标矩阵相乘。 199 200**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。该接口为空接口。 201 202该接口从API version 10开始废弃，且无实际绘制效果，故不提供示例。 203 204**参数：** 205 206| 参数名 | 类型 | 必填 | 说明 | 207| ----- | -------- | ---- | ---------- | 208| other | Matrix2D | 否 | 目标矩阵。<br>默认值：null。 | 209 210**返回值：** 211 212| 类型 | 说明 | 213| --------------------- | -------------- | 214| [Matrix2D](#matrix2d) | 相乘结果矩阵。 | 215 216### rotate<sup>(deprecated) </sup> 217 218rotate(rx?: number, ry?: number): Matrix2D 219 220对当前矩阵进行旋转运算。 221 222**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。该接口为空接口。 223 224该接口从API version 10开始废弃，推荐使用[rotate](#rotate10)。 225 226**参数：** 227 228| 参数名 | 类型 | 必填 | 说明 | 229| ---- | ------ | ---- | -------------------------------- | 230| rx | number | 否 | 旋转点的水平方向坐标。<br>默认单位：vp。 | 231| ry | number | 否 | 旋转点的垂直方向坐标。<br>默认单位：vp。 | 232 233**返回值：** 234 235| 类型 | 说明 | 236| --------------------- | -------------------- | 237| [Matrix2D](#matrix2d) | 旋转后结果矩阵对象。 | 238 239**示例：** 240 241```ts 242// xxx.ets 243@Entry 244@Component 245struct Rotate { 246 private settings: RenderingContextSettings = new RenderingContextSettings(true) 247 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 248 private matrix: Matrix2D = new Matrix2D() 249 250 build() { 251 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 252 Canvas(this.context) 253 .width('240vp') 254 .height('180vp') 255 .backgroundColor('#ffff00') 256 .onReady(() => { 257 this.context.fillRect(50, 110, 50, 50) 258 this.matrix.scaleX = 1 259 this.matrix.scaleY = 1 260 this.matrix.rotateX = -0.5 261 this.matrix.rotateY = 0.5 262 this.matrix.translateX = 10 263 this.matrix.translateY = 10 264 this.matrix.rotate(5, 5) 265 this.context.setTransform(this.matrix) 266 this.context.fillRect(50, 110, 50, 50) 267 }) 268 } 269 .width('100%') 270 .height('100%') 271 } 272} 273``` 274 275 276 277 278### rotate<sup>10+</sup> 279 280rotate(degree: number, rx?: number, ry?: number): Matrix2D 281 282以旋转点为中心、对当前矩阵进行右乘旋转运算。 283 284**卡片能力：** 从API version 10开始，该接口支持在ArkTS卡片中使用。 285 286**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 287 288**系统能力：** SystemCapability.ArkUI.ArkUI.Full 289 290**参数：** 291 292| 参数名 | 类型 | 必填 | 说明 | 293| ------ | ------ | ---- | ------------------------------------------------------------ | 294| degree | number | 是 | 旋转角度。顺时针方向为正角度，可以通过 degree * Math.PI / 180 将角度转换为弧度值。<br>默认单位：弧度。| 295| rx | number | 否 | 旋转点的水平方向坐标。<br>默认单位：vp。<br>默认值：0。 | 296| ry | number | 否 | 旋转点的垂直方向坐标。<br>默认单位：vp。<br>默认值：0。 | 297 298**返回值：** 299 300| 类型 | 说明 | 301| --------------------- | -------------------- | 302| [Matrix2D](#matrix2d) | 旋转后结果矩阵对象。 | 303 304**示例：** 305 306```ts 307// xxx.ets 308@Entry 309@Component 310struct Rotate { 311 private settings: RenderingContextSettings = new RenderingContextSettings(true) 312 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 313 private matrix: Matrix2D = new Matrix2D() 314 315 build() { 316 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 317 Canvas(this.context) 318 .width('240vp') 319 .height('180vp') 320 .backgroundColor('#ffff00') 321 .onReady(() => { 322 this.context.fillRect(60, 80, 50, 50) 323 this.matrix.scaleX = 1 324 this.matrix.scaleY = 1 325 this.matrix.rotateX = -0.5 326 this.matrix.rotateY = 0.5 327 this.matrix.translateX = 10 328 this.matrix.translateY = 10 329 this.matrix.rotate(-60 * Math.PI / 180, 5, 5) 330 this.context.setTransform(this.matrix) 331 this.context.fillRect(60, 80, 50, 50) 332 }) 333 } 334 .width('100%') 335 .height('100%') 336 } 337} 338``` 339 340 341 342 343### translate 344 345translate(tx?: number, ty?: number): Matrix2D 346 347对当前矩阵进行左乘平移运算。 348 349**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 350 351**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 352 353**系统能力：** SystemCapability.ArkUI.ArkUI.Full 354 355**参数：** 356 357| 参数名 | 类型 | 必填 | 说明 | 358| ---- | ------ | ---- | ---------------------------- | 359| tx | number | 否 | 水平方向平移距离。<br>默认单位：vp。<br>默认值：0。 | 360| ty | number | 否 | 垂直方向平移距离。<br>默认单位：vp。<br>默认值：0。 | 361 362**返回值：** 363 364| 类型 | 说明 | 365| --------------------- | -------------------- | 366| [Matrix2D](#matrix2d) | 平移后结果矩阵对象。 | 367 368**示例：** 369 370```ts 371// xxx.ets 372@Entry 373@Component 374struct Translate { 375 private settings: RenderingContextSettings = new RenderingContextSettings(true) 376 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 377 private matrix: Matrix2D = new Matrix2D() 378 379 build() { 380 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 381 Canvas(this.context) 382 .width('240vp') 383 .height('180vp') 384 .backgroundColor('#ffff00') 385 .onReady(() => { 386 this.context.fillRect(40, 20, 50, 50) 387 this.matrix.scaleX = 1 388 this.matrix.scaleY = 1 389 this.matrix.rotateX = 0 390 this.matrix.rotateY = 0 391 this.matrix.translateX = 0 392 this.matrix.translateY = 0 393 this.matrix.translate(100, 100) 394 this.context.setTransform(this.matrix) 395 this.context.fillRect(40, 20, 50, 50) 396 }) 397 } 398 .width('100%') 399 .height('100%') 400 } 401} 402``` 403 404 405 406 407### scale 408 409scale(sx?: number, sy?: number): Matrix2D 410 411对当前矩阵进行右乘缩放运算。 412 413**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 414 415**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 416 417**系统能力：** SystemCapability.ArkUI.ArkUI.Full 418 419**参数：** 420 421| 参数 | 类型 | 必填 | 描述 | 422| ---- | ------ | ---- | ------------------ | 423| sx | number | 否 | 水平缩放比例系数。<br>默认值：1.0。 | 424| sy | number | 否 | 垂直缩放比例系数。<br>默认值：1.0。 | 425 426**返回值：** 427 428| 类型 | 说明 | 429| --------------------- | ------------------ | 430| [Matrix2D](#matrix2d) | 缩放结果矩阵对象。 | 431 432**示例：** 433 434```ts 435// xxx.ets 436@Entry 437@Component 438struct Scale { 439 private settings: RenderingContextSettings = new RenderingContextSettings(true) 440 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 441 private matrix: Matrix2D = new Matrix2D() 442 443 build() { 444 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 445 Canvas(this.context) 446 .width('240vp') 447 .height('180vp') 448 .backgroundColor('#ffff00') 449 .onReady(() => { 450 this.context.fillRect(120, 70, 50, 50) 451 this.matrix.scaleX = 1 452 this.matrix.scaleY = 1 453 this.matrix.rotateX = -0.5 454 this.matrix.rotateY = 0.5 455 this.matrix.translateX = 10 456 this.matrix.translateY = 10 457 this.matrix.scale(0.5, 0.5) 458 this.context.setTransform(this.matrix) 459 this.context.fillRect(120, 70, 50, 50) 460 }) 461 } 462 .width('100%') 463 .height('100%') 464 } 465} 466``` 467 468
