Matrix Transformation

NOTE

This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Modules to Import

import matrix4 from '@ohos.matrix4'

Required Permissions

None

matrix4.init

init(array: Array<number>): Object

Implements a 4x4 matrix by using the input parameter. The column-major order is used.

• Parameters

• Return value

• Parameter description

• Example

  import matrix4 from '@ohos.matrix4'
  // Create a 4x4 matrix.
  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])
  

matrix4.identity

identity(): Object

Performs matrix initialization. This API returns an identity matrix object.

• Return value

• Example

  // The effect of matrix 1 is the same as that of matrix 2.
  import matrix4 from '@ohos.matrix4'
  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])
  let matrix2 = Matrix4.identity()
  

matrix4.copy

copy(): Object

Copies this matrix object.

• Return value

• Example

  import matrix4 from '@ohos.matrix4'
  @Entry
  @Component
  struct Test {
    private matrix1 = matrix4.identity().translate({x:100})
    private matrix2 = this.matrix1.copy().scale({x:2})
    build() {
      Column() {
        Image($r("app.media.bg1"))
          .width("40%")
          .height(100)
          .transform(this.matrix1)
        Image($r("app.media.bg2"))
          .width("40%")
          .height(100)
          .margin({top:50})
          .transform(this.matrix2)
      }
    }
  }
  

  

Matrix4

combine

combine(matrix: Matrix4): Object

Combines this matrix object with another to generate a new matrix object.

• Parameters

• Return value

• Example

  import matrix4 from '@ohos.matrix4'
  @Entry
  @Component
  struct Test {
    private matrix1 = matrix4.identity().translate({x:200}).copy()
    private matrix2 = matrix4.identity().scale({x:2}).copy()
    build() {
      Column() {
       // Translate the x-axis by 100 pixels and then scale it up or down by 2x.
        Image($r("app.media.bg1")).transform(this.matrix1.combine(this.matrix2)) 
          .width("40%")
          .height(100)
          .margin({top:50})
      }
    }
  }
  

  

invert

invert(): Object

Inverts this matrix object.

• Return value

• Example

  import matrix4 from '@ohos.matrix4'
  // The effect of matrix 1 (width scaled up by 2x) is opposite to that of matrix 2 (width scaled down by 2x).
  let matrix1 = matrix4.identity().scale({x:2})
  let matrix2 = matrix1.copy().invert()
  

translate

translate({x?: number, y?: number, z?: number}): Object

Translates this matrix object along the x, y, and z axes.

• Parameters

• Return value

• Example

  import matrix4 from '@ohos.matrix4'
  @Entry
  @Component
  struct Test {
    private matrix1 = matrix4.identity().translate({x:100, y:200, z:30})
    build() {
      Column() {
        Image($r("app.media.bg1")).transform(this.matrix1)
          .width("40%")
          .height(100)
      }
    }
  }
  

  

scale

scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Object

Scales this matrix object along the x, y, and z axes.

• Parameters

• Return value

• Example

  import matrix4 from '@ohos.matrix4'
  @Entry
  @Component
  struct Test {
    private matrix1 = matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50})
    build() {
      Column() { 
        Image($r("app.media.bg1")).transform(this.matrix1)
          .width("40%")
          .height(100)
      }
    }
  }
  

  

rotate

rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Object

Rotates this matrix object along x, y, and z axes.

• Parameters

• Return value

• Example

  import matrix4 from '@ohos.matrix4'
  @Entry
  @Component
  struct Test {
    private matrix1 = matrix4.identity().rotate({x:1, y:1, z:2, angle:30})
    build() {
      Column() {
        Image($r("app.media.bg1")).transform(this.matrix1)
          .width("40%")
          .height(100)
      }.width("100%").margin({top:50})
    }
  }
  

  

transformPoint

transformPoint(point: Point): Point

Applies this transformation effect to a coordinate point.

• Parameters

• Return value

• Example

  import matrix4 from '@ohos.matrix4'
  import prompt from '@system.prompt'
  
  @Entry
  @Component
  struct Test {
    private matrix1 = matrix4.identity().transformPoint([100, 10])
    build() {
      Column() {
       Button("get Point")
        .onClick(() => {
         prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000})
        }).backgroundColor(0x2788D9)
      }.width("100%").padding(50)
    }
  }