开源鸿蒙 矩阵变换

  • 2022-08-09
  • 浏览 (713)

矩阵变换

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

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

导入模块

import matrix4 from '@ohos.matrix4'

权限列表

无

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

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的叠加函数，可以将两个矩阵的效果叠加起来生成一个新的矩阵对象。

  • 参数 | 参数名 | 类型 | 必填 | 默认值 | 说明 | | —— | ——- | —- | —- | ——— | | matrix | Matrix4 | 是 | - | 待叠加的矩阵对象。 |

  • 返回值 | 类型 | 说明 | | —— | ——— | | 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轴平移效果。

  • 参数 | 参数名 | 类型 | 必填 | 默认值 | 说明 | | —- | —— | —- | —- | ————- | | x | number | 否 | 0 | x轴的平移距离，单位px。 | | y | number | 否 | 0 | y轴的平移距离，单位px。 | | z | number | 否 | 0 | z轴的平移距离，单位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轴缩放效果。

  • 参数 | 参数名 | 类型 | 必填 | 默认值 | 说明 | | ——- | —— | —- | —- | ———- | | x | number | 否 | 1 | x轴的缩放倍数。 | | y | number | 否 | 1 | y轴的缩放倍数。 | | z | number | 否 | 1 | z轴的缩放倍数。 | | centerX | number | 否 | 0 | 变换中心点x轴坐标。 | | centerY | number | 否 | 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轴旋转效果。

  • 参数 | 参数名 | 类型 | 必填 | 默认值 | 说明 | | ——- | —— | —- | —- | ———- | | x | number | 否 | 1 | 旋转轴向量x坐标。 | | y | number | 否 | 1 | 旋转轴向量y坐标。 | | z | number | 否 | 1 | 旋转轴向量z坐标。 | | angle | number | 否 | 0 | 旋转角度。 | | centerX | number | 否 | 0 | 变换中心点x轴坐标。 | | centerY | number | 否 | 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的坐标点转换函数，可以将当前的变换效果作用到一个坐标点上。

  • 参数 | 参数名 | 类型 | 必填 | 默认值 | 说明 | | —– | —– | —- | —- | ——— | | point | Point | 是 | - | 需要转换的坐标点。 |

  • 返回值 | 类型 | 说明 | | —– | —————- | | Point | 返回矩阵变换后的Point对象。 |

  • 示例 “`ts // 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

0  赞
  • 所属分类： 后端技术
  • 本文标签： 软件 鸿蒙
  • 版权声明： 原创文章如转载，请注明本文链接: https://m.seaxiang.com/blog/3cc19cd9fb66430da41e117f37642d86
热门推荐
标签云
Linux Java Spring Spring Boot docker 大数据 前端 生活 maven golang 软件 spring cloud fintech mac vscode 其他 区块链 以太坊 V神 开发者 技术 股票 git greenplum 分布式事务 chrome mysql flink kafka 设计模式 原理 鸿蒙 seo
最新文章
本文目录