开源鸿蒙 矩阵变换

2022-08-09 浏览 (948)

矩阵变换

可对图形进行平移、旋转和缩放等。

说明： 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

导入模块

import matrix4 from '@ohos.matrix4'

权限列表

无

matrix4.init

init(array: Array<number>): Object

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

  • 参数

    参数名类型必填默认值说明
    arrayArray<number>是[1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1]    		参数为长度为16（4*4）的number数组, 详情见参数描述。

  • 返回值

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

  • 参数描述

    参数名类型必填说明
    m00number是x轴缩放值，单位矩阵默认为1。
    m01number是第2个值，xyz轴旋转会影响这个值。
    m02number是第3个值，xyz轴旋转会影响这个值。
    m03number是无实际意义。
    m10number是第5个值，xyz轴旋转会影响这个值。
    m11number是y轴缩放值，单位矩阵默认为1。
    m12number是第7个值，xyz轴旋转会影响这个值。
    m13number是无实际意义。
    m20number是第9个值，xyz轴旋转会影响这个值。
    m21number是第10个值，xyz轴旋转会影响这个值。
    m22number是z轴缩放值，单位矩阵默认为1。
    m23number是无实际意义。
    m30number是x轴平移值，单位px，单位矩阵默认为0。
    m31number是y轴平移值，单位px，单位矩阵默认为0。
    m32number是z轴平移值，单位px，单位矩阵默认为0。
    m33number是齐次坐标下生效，产生透视投影效果。

  • 示例

    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])

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()

matrix4.copy

copy(): Object

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

  • 返回值

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

  • 示例

    // xxx.ets
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)
    }
  }
}

    zh-cn_image_0000001219744181

Matrix4

combine

combine(matrix: Matrix4): Object

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

  • 参数

    参数名类型必填默认值说明
    matrixMatrix4是-待叠加的矩阵对象。

  • 返回值

    类型说明
    Object矩阵叠加后的对象。

  • 示例

    // xxx.ets
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})
    }
  }
}

    zh-cn_image_0000001174582846

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()

translate

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

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

  • 参数

    参数名类型必填默认值说明
    xnumber否0x轴的平移距离，单位px。
    ynumber否0y轴的平移距离，单位px。
    znumber否0z轴的平移距离，单位px。

  • 返回值

    类型说明
    Object增加好平移效果后的矩阵对象。

  • 示例

    // xxx.ets
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)
    }
  }
}

    zh-cn_image_0000001219662645

scale

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

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

  • 参数

    参数名类型必填默认值说明
    xnumber否1x轴的缩放倍数。
    ynumber否1y轴的缩放倍数。
    znumber否1z轴的缩放倍数。
    centerXnumber否0变换中心点x轴坐标。
    centerYnumber否0变换中心点y轴坐标。

  • 返回值

    类型说明
    Object增加好缩放效果后的矩阵对象。

  • 示例

    // xxx.ets
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)
    }
  }
}

    zh-cn_image_0000001219864131

rotate

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

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

  • 参数

    参数名类型必填默认值说明
    xnumber否1旋转轴向量x坐标。
    ynumber否1旋转轴向量y坐标。
    znumber否1旋转轴向量z坐标。
    anglenumber否0旋转角度。
    centerXnumber否0变换中心点x轴坐标。
    centerYnumber否0变换中心点y轴坐标。

  • 返回值

    类型说明
    Object增加好旋转效果后的矩阵对象。

  • 示例

    // xxx.ets
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})
  }
}

    zh-cn_image_0000001174422898

transformPoint

transformPoint(point: Point): Point

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

  • 参数

    参数名类型必填默认值说明
    pointPoint是-需要转换的坐标点。

  • 返回值

    类型说明
    Point返回矩阵变换后的Point对象。

  • 示例

    // xxx.ets
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)
  }
}

    zh-cn_image_0000001219864133

你可能感兴趣的文章

开源鸿蒙 基于TS扩展的声明式开发范式

开源鸿蒙 属性动画

开源鸿蒙 文档中涉及到的内置枚举值

开源鸿蒙 Blank

开源鸿蒙 Button

开源鸿蒙 Checkbox

开源鸿蒙 CheckboxGroup

开源鸿蒙 DataPanel

开源鸿蒙 DatePicker

开源鸿蒙 Divider

  • 所属分类： 后端技术
  • 本文标签： 软件 鸿蒙
  • 版权声明： 本文链接 https://seaxiang.com/blog/3cc19cd9fb66430da41e117f37642d86