矩阵变换

About 26 min

矩阵变换

导入模块

import matrix4 from '@ohos.matrix4'
1

权限

matrix4.init

init(array: Array<number>): Object

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

  • 参数

    参数名

    类型

    必填

    默认值

    说明

    array

    Array<number>

    [1, 0, 0, 0,

    0, 1, 0, 0,

    0, 0, 1, 0,

    0, 0, 0, 1]

    参数为长度为16(4*4)的number数组, 详情见参数描述

  • 返回值

    类型

    说明

    Object

    根据入参创建的四阶矩阵对象。

  • 参数描述

    参数名

    类型

    必填

    说明

    m00

    number

    x轴缩放值,单位矩阵默认为1。

    m01

    number

    第2个值,xyz轴旋转会影响这个值。

    m02

    number

    第3个值,xyz轴旋转会影响这个值。

    m03

    number

    无实际意义。

    m10

    number

    第5个值,xyz轴旋转会影响这个值。

    m11

    number

    y轴缩放值,单位矩阵默认为1。

    m12

    number

    第7个值,xyz轴旋转会影响这个值。

    m13

    number

    无实际意义。

    m20

    number

    第9个值,xyz轴旋转会影响这个值。

    m21

    number

    第10个值,xyz轴旋转会影响这个值。

    m22

    number

    z轴缩放值,单位矩阵默认为1。

    m23

    number

    无实际意义。

    m30

    number

    x轴平移值,单位px,单位矩阵默认为0。

    m31

    number

    y轴平移值,单位px,单位矩阵默认为0。

    m32

    number

    z轴平移值,单位px,单位矩阵默认为0。

    m33

    number

    齐次坐标下生效,产生透视投影效果。

  • 示例

    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])
    
    1
    2
    3
    4
    5
    6

matrix4.identity

identity(): Object

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

  • 返回值

    类型

    说明

    Object

    单位矩阵对象。

  • 示例

    // matrix1 和 matrix2 效果一致
    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()
    
    1
    2
    3
    4
    5
    6
    7

matrix4.copy

copy(): Object

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

  • 返回值

    类型

    说明

    Object

    当前矩阵的拷贝对象。

  • 示例

    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)
        }
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

Matrix4

combine

combine(matrix: Matrix4): Object

Matrix的叠加函数,可以将两个矩阵的效果叠加起来生成一个新的矩阵对象。

  • 参数

    参数名

    类型

    必填

    默认值

    说明

    matrix

    Matrix4

    -

    待叠加的矩阵对象。

  • 返回值

    类型

    说明

    Object

    矩阵叠加后的对象。

  • 示例

    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() {
         // 先平移x轴100px,再缩放两倍x轴
          Image($r("app.media.bg1")).transform(this.matrix1.combine(this.matrix2)) 
            .width("40%")
            .height(100)
            .margin({top:50})
        }
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

invert

invert(): Object

Matrix的逆函数,可以返回一个当前矩阵对象的逆矩阵,即效果正好相反。

  • 返回值

    类型

    说明

    Object

    当前矩阵的逆矩阵对象。

  • 示例

    import Matrix4 from '@ohos.matrix4'
    // matrix1(宽放大2倍) 和 matrix2(宽缩小2倍) 效果相反
    let matrix1 = Matrix4.identity().scale({x:2})
    let matrix2 = matrix1.invert()
    
    1
    2
    3
    4

translate

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

Matrix的平移函数,可以为当前矩阵增加x轴/Y轴/Z轴平移效果。

  • 参数

    参数名

    类型

    必填

    默认值

    说明

    x

    number

    0

    x轴的平移距离,单位px。

    y

    number

    0

    y轴的平移距离,单位px。

    z

    number

    0

    z轴的平移距离,单位px。

  • 返回值

    类型

    说明

    Object

    增加好平移效果后的矩阵对象。

  • 示例

    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)
        }
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

scale

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

Matrix的缩放函数,可以为当前矩阵增加x轴/Y轴/Z轴缩放效果。

  • 参数

    参数名

    类型

    必填

    默认值

    说明

    x

    number

    1

    x轴的缩放倍数。

    y

    number

    1

    y轴的缩放倍数。

    z

    number

    1

    z轴的缩放倍数。

    centerX

    number

    0

    变换中心点x轴坐标。

    centerY

    number

    0

    变换中心点y轴坐标。

  • 返回值

    类型

    说明

    Object

    增加好缩放效果后的矩阵对象。

  • 示例

    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)
        }
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

rotate

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

Matrix的旋转函数,可以为当前矩阵增加x轴/Y轴/Z轴旋转效果。

  • 参数

    参数名

    类型

    必填

    默认值

    说明

    x

    number

    1

    旋转轴向量x坐标。

    y

    number

    1

    旋转轴向量y坐标。

    z

    number

    1

    旋转轴向量z坐标。

    angle

    number

    0

    旋转角度。

    centerX

    number

    0

    变换中心点x轴坐标。

    centerY

    number

    0

    变换中心点y轴坐标。

  • 返回值

    类型

    说明

    Object

    增加好旋转效果后的矩阵对象。

  • 示例

    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})
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

transformPoint

transformPoint(point: Point): Point

Matrix的坐标点转换函数,可以将当前的变换效果作用到一个坐标点上。

  • 参数

    参数名

    类型

    必填

    默认值

    说明

    point

    Point

    -

    需要转换的坐标点。

  • 返回值

    类型

    说明

    Point

    返回矩阵变换后的Point对象。

  • 示例

    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)
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16