鸿蒙5.0开发进阶：ArkTS API UI界面-@ohos.matrix4 (矩阵变换)

往期鸿蒙全套实战文章必看：（文中附带全栈鸿蒙学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

@ohos.matrix4 (矩阵变换)

本模块提供矩阵变换功能，可对图形进行平移、旋转和缩放等。

说明

本模块首批接口从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

导入模块

import { matrix4 } from '@kit.ArkUI';

matrix4.init

init(options: [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number]): Matrix4Transit

Matrix的构造函数，可以通过传入的参数创建一个四阶矩阵，矩阵为列优先。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
options	[number,number,number,number, number,number,number,number, number,number,number,number, number,number,number,number]	是	参数为长度为16（4*4）的number数组, 详情见四阶矩阵说明。 默认值： [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]

返回值：

类型	说明
Matrix4Transit	根据入参创建的四阶矩阵对象。

四阶矩阵说明：

参数名	类型	必填	说明
m00	number	是	x轴缩放值，单位矩阵默认为1。
m01	number	是	第2个值，xyz轴旋转或倾斜会影响这个值。
m02	number	是	第3个值，xyz轴旋转会影响这个值。
m03	number	是	第4个值，透视投影会影响这个值。
m10	number	是	第5个值，xyz轴旋转或倾斜会影响这个值。
m11	number	是	y轴缩放值，单位矩阵默认为1。
m12	number	是	第7个值，xyz轴旋转会影响这个值。
m13	number	是	第8个值，透视投影会影响这个值。
m20	number	是	第9个值，xyz轴旋转会影响这个值。
m21	number	是	第10个值，xyz轴旋转会影响这个值。
m22	number	是	z轴缩放值，单位矩阵默认为1。
m23	number	是	第12个值，透视投影会影响这个值。
m30	number	是	x轴平移值，单位px，单位矩阵默认为0。
m31	number	是	y轴平移值，单位px，单位矩阵默认为0。
m32	number	是	z轴平移值，单位px，单位矩阵默认为0。
m33	number	是	齐次坐标下生效，产生透视投影效果。

示例

import { matrix4 } from '@kit.ArkUI';
// 创建一个四阶矩阵
let matrix = matrix4.init([1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0])
@Entry
@Component
struct Tests {
build() {
Column() {
Image($r("app.media.zh"))
.width("40%")
.height(100)
.transform(matrix)
}
}
}

matrix4.identity

identity(): Matrix4Transit

Matrix的初始化函数，可以返回一个单位矩阵对象。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

类型	说明
Matrix4Transit	单位矩阵对象。

示例：

// matrix1 和 matrix2 效果一致
import { matrix4 } from '@kit.ArkUI';
let matrix1 = matrix4.init([1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0])
let matrix2 = matrix4.identity()
@Entry
@Component
struct Tests {
build() {
Column() {
Image($r("app.media.zh"))
.width("40%")
.height(100)
.transform(matrix1)
Image($r("app.media.zh"))
.width("40%")
.height(100)
.margin({ top: 150 })
.transform(matrix2)
}
}
}

Matrix4Transit

矩阵对象。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

copy

copy(): Matrix4Transit

Matrix的拷贝函数，可以拷贝一份当前的矩阵对象。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

类型	说明
Matrix4Transit	当前矩阵的拷贝对象。

示例：

// xxx.ets
import { matrix4 } from '@kit.ArkUI';

@Entry
@Component
struct Test {
private matrix1 = matrix4.identity().scale({ x: 1.5 })
private matrix2 = this.matrix1.copy().translate({ x: 200 })
imageSize:Length = '300px'
build() {
Column({space:"50px"}) {
Image($r("app.media.testImage"))
.width(this.imageSize)
.height(this.imageSize)
Image($r("app.media.testImage"))
.width(this.imageSize)
.height(this.imageSize)
.transform(this.matrix1)
Image($r("app.media.testImage"))
.width(this.imageSize)
.height(this.imageSize)
.transform(this.matrix2)
}.alignItems(HorizontalAlign.Center)
.height('100%').width("100%")
.justifyContent(FlexAlign.Center)
}
}

combine

combine(options: Matrix4Transit): Matrix4Transit

Matrix的叠加函数，可以将两个矩阵的效果叠加起来生成一个新的矩阵对象。会改变调用该函数的原始矩阵。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填