harmony 鸿蒙Matrix2D
Matrix2D
Matrix2D allows you to perform matrix transformation, such as scaling, rotating, and translating.
NOTE
The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
APIs
Matrix2D()
Since API version 9, this API is supported in ArkTS widgets.
Attributes
Name | Type | Description |
---|---|---|
scaleX | number | Horizontal scale factor. Since API version 9, this API is supported in ArkTS widgets. |
scaleY | number | Vertical scale factor. Since API version 9, this API is supported in ArkTS widgets. |
rotateX | number | Horizontal tilt coefficient. Since API version 9, this API is supported in ArkTS widgets. |
rotateY | number | Vertical tilt coefficient. Since API version 9, this API is supported in ArkTS widgets. |
translateX | number | Horizontal translation distance, in vp. Since API version 9, this API is supported in ArkTS widgets. |
translateY | number | Vertical translation distance, in vp. Since API version 9, this API is supported in ArkTS widgets. |
NOTE
You can use the px2vp API to convert the unit.
scaleX
// xxx.ets
@Entry
@Component
struct Matrix2DScaleX {
@State message: string = 'Matrix2D ScaleX'
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set scaleX")
.onClick(() => {
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
scaleY
// xxx.ets
@Entry
@Component
struct Matrix2DScaleY {
@State message: string = 'Matrix2D ScaleY'
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set scaleY")
.onClick(() => {
let matrix : Matrix2D = new Matrix2D()
matrix.scaleY = 1
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
rotateX
// xxx.ets
@Entry
@Component
struct Matrix2DRotateX {
@State message: string = 'Matrix2D RotateX'
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set rotateX")
.onClick(() => {
let matrix : Matrix2D = new Matrix2D()
matrix.rotateX = Math.sin(45 / Math.PI)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
rotateY
// xxx.ets
@Entry
@Component
struct Matrix2DRotateY {
@State message: string = 'Matrix2D RotateY'
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set rotateY")
.onClick(() => {
let matrix : Matrix2D = new Matrix2D()
matrix.rotateY = Math.cos(45 / Math.PI)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
translateX
// xxx.ets
@Entry
@Component
struct Matrix2DTranslateX {
@State message: string = 'Matrix2D TranslateX'
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set translateX")
.onClick(() => {
let matrix : Matrix2D = new Matrix2D()
matrix.translateX = 10
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
translateY
// xxx.ets
@Entry
@Component
struct Matrix2DTranslateY {
@State message: string = 'Matrix2D TranslateY'
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set translateY")
.onClick(() => {
let matrix : Matrix2D = new Matrix2D()
matrix.translateY = 10
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
Methods
identity
identity(): Matrix2D
Creates an identity matrix.
Since API version 9, this API is supported in ArkTS widgets.
Return value
Type | Description |
---|---|
Matrix2D | Identity matrix. |
Example
// xxx.ets
@Entry
@Component
struct Matrix2DIdentity {
@State message: string = 'Matrix2D Identity'
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix identity")
.onClick(() => {
let matrix : Matrix2D = new Matrix2D()
matrix = matrix.identity()
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
invert
invert(): Matrix2D
Obtains an inverse of this matrix.
Since API version 9, this API is supported in ArkTS widgets.
Return value
Type | Description |
---|---|
Matrix2D | Inverse of the current matrix. |
Example
// xxx.ets
@Entry
@Component
struct Matrix2DInvert {
@State message: string = 'Matrix2D Invert'
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix invert")
.onClick(() => {
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 2
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 10
matrix.translateY = 20
matrix.invert()
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
multiply(deprecated)
multiply(other?: Matrix2D): Matrix2D
Multiplies this matrix by the target matrix.
Since API version 9, this API is supported in ArkTS widgets. This API is a null API.
This API is deprecated since API version 10.
Parameters
Parameter | Type | Mandatory | Default Value | Description |
---|---|---|---|---|
other | Matrix2D | No | null | Target matrix. |
Return value
Type | Description |
---|---|
Matrix2D | Matrix of the multiplication result. |
Example
// xxx.ets
@Entry
@Component
struct Matrix2DMultiply {
@State message: string = 'Matrix2D Multiply'
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix multiply")
.onClick(() => {
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
let other: Matrix2D = new Matrix2D()
other.scaleX = 2
other.scaleY = 2
other.rotateX = 0
other.rotateY = 0
other.translateX = 10
other.translateY = 10
other.multiply(other)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
rotate(deprecated)
rotate(rx?: number, ry?: number): Matrix2D
Performs a rotation operation on this matrix.
Since API version 9, this API is supported in ArkTS widgets. This API is a null API.
This API is deprecated since API version 10. You are advised to use rotate instead.
Parameters
Parameter | Type | Mandatory | Default Value | Description |
---|---|---|---|---|
rx | number | No | 0 | Horizontal coordinate (in vp) of the rotation point. |
ry | number | No | 0 | Vertical coordinate (in vp) of the rotation point. |
Return value
Type | Description |
---|---|
Matrix2D | Matrix of the rotation result. |
Example
// xxx.ets
@Entry
@Component
struct Matrix2DRotate {
@State message: string = 'Matrix2D Rotate'
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix rotate")
.onClick(() => {
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
matrix.rotate(10, 10)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
rotate10+
rotate(degree: number, rx?: number, ry?: number): Matrix2D
Performs a right multiplication rotation operation on this matrix, with the specified rotation point as the transform origin.
Since API version 10, this API is supported in ArkTS widgets.
Parameters
Parameter | Type | Mandatory | Default Value | Description |
---|---|---|---|---|
degree | number | Yes | 0 | Rotation angle, in radians. A positive angle denotes a clockwise rotation. You can use Math.PI& / 180 to convert the angle to a radian value. |
rx | number | No | 0 | Horizontal coordinate (in vp) of the rotation point. |
ry | number | No | 0 | Vertical coordinate (in vp) of the rotation point. |
Return value
Type | Description |
---|---|
Matrix2D | Matrix of the rotation result. |
Example
// xxx.ets
@Entry
@Component
struct Matrix2DRotate {
@State message: string = 'Matrix2D Rotate'
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix rotate")
.onClick(() => {
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
matrix.rotate(90 / Math.PI, 10, 10)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
translate
translate(tx?: number, ty?: number): Matrix2D
Performs a left multiplication translation operation on this matrix.
Since API version 9, this API is supported in ArkTS widgets.
Parameters
Parameter | Type | Mandatory | Default Value | Description |
---|---|---|---|---|
tx | number | No | 0 | Horizontal translation distance, in vp. |
ty | number | No | 0 | Vertical translation distance, in vp. |
Return value
Type | Description |
---|---|
Matrix2D | Matrix of the translation result. |
Example
// xxx.ets
@Entry
@Component
struct Matrix2DTranslate {
@State message: string = 'Matrix2D Translate'
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix translate")
.onClick(() => {
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
matrix.translate(100, 100)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
scale
scale(sx?: number, sy?: number): Matrix2D
Performs a right multiplication scaling operation on this matrix.
Since API version 9, this API is supported in ArkTS widgets.
Parameters
Parameter | Type | Mandatory | Default Value | Description |
---|---|---|---|---|
sx | number | No | 1 | Horizontal scale factor. |
sy | number | No | 1 | Vertical scale factor. |
Return value
Type | Description |
---|---|
Matrix2D | Matrix of the scale result. |
Example
// xxx.ets
@Entry
@Component
struct Matrix2DScale {
@State message: string = 'Matrix2D Scale'
printMatrix(title: string, matrix: Matrix2D) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix scale")
.onClick(() => {
let matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
matrix.scale(0.5, 0.5)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
你可能感兴趣的鸿蒙文章
harmony 鸿蒙ArkTS-based Declarative Development Paradigm
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦