矩陣變換

導(dǎo)入模塊

import matrix4 from '@ohos.matrix4'

matrix4.init

init(options: [number,number,number,number,number,number,number,number,number,number,number,number,number,number,number,number]): Matrix4Transit

Matrix的構(gòu)造函數(shù)，可以通過傳入的參數(shù)創(chuàng)建一個(gè)四階矩陣，矩陣為列優(yōu)先。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

返回值：

四階矩陣說明：

示例

import matrix4 from '@ohos.matrix4'
// 創(chuàng)建一個(gè)四階矩陣
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])
@Entry
@Component
struct Tests {
  build() {
    Column() {
      Image($r("app.media.zh"))
        .width("40%")
        .height(100)
        .transform(matrix)
    }
  }
}

matrix4.identity

identity(): Matrix4Transit

Matrix的初始化函數(shù)，可以返回一個(gè)單位矩陣對象。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

示例：

// matrix1 和 matrix2 效果一致
import matrix4 from '@ohos.matrix4'
let matrix1 = 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()
@Entry
@Component
struct Tests {
  build() {
    Column() {
      Image($r("app.media.zh"))
        .width("40%")
        .height(100)
        .transform(matrix1)
      Image($r("app.media.zh"))
        .width("40%")
        .height(100)
        .margin({ top: 150 })
        .transform(matrix2)
    }
  }
}

matrix4.copy

copy(): Matrix4Transit

Matrix的拷貝函數(shù)，可以拷貝一份當(dāng)前的矩陣對象。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

示例：

// xxx.ets
import matrix4 from '@ohos.matrix4'

@Entry
@Component
struct Test {
  private matrix1 = matrix4.identity().translate({ x: 100 })
  // 對matrix1的拷貝矩陣做scale操作，不影響到matrix1
  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.invert

invert(): Matrix4Transit

Matrix的逆函數(shù)，可以返回一個(gè)當(dāng)前矩陣對象的逆矩陣，即效果正好相反。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

matrix4.combine

combine(options: Matrix4Transit): Matrix4Transit

Matrix的疊加函數(shù)，可以將兩個(gè)矩陣的效果疊加起來生成一個(gè)新的矩陣對象。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

返回值：

matrix4.translate

translate(options: TranslateOption): Matrix4Transit

Matrix的平移函數(shù)，可以為當(dāng)前矩陣增加x軸/y軸/z軸平移效果。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

返回值：

matrix4.scale

scale(options: ScaleOption): Matrix4Transit

Matrix的縮放函數(shù)，可以為當(dāng)前矩陣增加x軸/y軸/z軸縮放效果。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

返回值：

matrix4.rotate

rotate(options: RotateOption): Matrix4Transit

Matrix的旋轉(zhuǎn)函數(shù)，可以為當(dāng)前矩陣增加x軸/y軸/z軸旋轉(zhuǎn)效果。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

返回值：

matrix4.transformPoint

transformPoint(options: [number, number]): [number, number]

Matrix的坐標(biāo)點(diǎn)轉(zhuǎn)換函數(shù)，可以將當(dāng)前的變換效果作用到一個(gè)坐標(biāo)點(diǎn)上。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

返回值：

Matrix4Transit

combine

combine(options: Matrix4Transit): Matrix4Transit

Matrix的疊加函數(shù)，可以將兩個(gè)矩陣的效果疊加起來生成一個(gè)新的矩陣對象。會(huì)改變調(diào)用該函數(shù)的原始矩陣。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

返回值：

示例：

// xxx.ets
import matrix4 from '@ohos.matrix4'

@Entry
@Component
struct Test {
  private matrix1 = matrix4.identity().translate({ x: 200 })
  private matrix2 = matrix4.identity().scale({ x: 2 })

  build() {
    Column() {
      // 矩陣變換前
      Image($r("app.media.icon"))
        .width("40%")
        .height(100)
        .margin({ top: 50 })
      // 先平移x軸200px，再縮放兩倍x軸，得到矩陣變換后的效果圖
      Image($r("app.media.icon"))
        .transform(this.matrix1.copy().combine(this.matrix2))
        .width("40%")
        .height(100)
        .margin({ top: 50 })
    }
  }
}

invert

invert(): Matrix4Transit

Matrix的逆函數(shù)，可以返回一個(gè)當(dāng)前矩陣對象的逆矩陣，即效果正好相反。會(huì)改變調(diào)用該函數(shù)的原始矩陣。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

返回值：

示例：

import matrix4 from '@ohos.matrix4'
// matrix1(寬放大2倍) 和 matrix2(寬縮小2倍) 效果相反
let matrix1 = matrix4.identity().scale({ x: 2 })
let matrix2 = matrix1.copy().invert()

@Entry
@Component
struct Tests {
  build() {
    Column() {
      Image($r("app.media.zh"))
        .width(200)
        .height(100)
        .transform(matrix1)
        .margin({ top: 100 })
      Image($r("app.media.zh"))
        .width(200)
        .height(100)
        .margin({ top: 150 })
        .transform(matrix2)
    }
  }
}

translate

translate(options: TranslateOption): Matrix4Transit

Matrix的平移函數(shù)，可以為當(dāng)前矩陣增加x軸/y軸/z軸平移效果。會(huì)改變調(diào)用該函數(shù)的原始矩陣。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

返回值：

示例：

// 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)
    }
  }
}

scale

scale(options: ScaleOption): Matrix4Transit

Matrix的縮放函數(shù)，可以為當(dāng)前矩陣增加x軸/y軸/z軸縮放效果。會(huì)改變調(diào)用該函數(shù)的原始矩陣。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

返回值：

示例：

// 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)
    }
  }
}

rotate

rotate(options: RotateOption): Matrix4Transit

Matrix的旋轉(zhuǎn)函數(shù)，可以為當(dāng)前矩陣增加x軸/y軸/z軸旋轉(zhuǎn)效果。會(huì)改變調(diào)用該函數(shù)的原始矩陣。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

返回值：

示例：

// 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 })
  }
}

transformPoint

transformPoint(options: [number, number]): [number, number]

Matrix的坐標(biāo)點(diǎn)轉(zhuǎn)換函數(shù)，可以將當(dāng)前的變換效果作用到一個(gè)坐標(biāo)點(diǎn)上。

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

參數(shù)：

返回值：

示例：

// xxx.ets
import matrix4 from '@ohos.matrix4'

@Entry
@Component
struct Test {
  private originPoint: number[] = [50, 50]
  private matrix_1 = matrix4.identity().translate({ x: 150, y: -50 })
  private transformPoint = this.matrix_1.transformPoint([this.originPoint[0], this.originPoint[1]])
  private matrix_2 = matrix4.identity().translate({ x: this.transformPoint[0], y: this.transformPoint[1] })

  build() {
    Column() {
      Text(`矩陣變換前的坐標(biāo)：[${this.originPoint}]`)
        .fontSize(16)
      Image($r("app.media.image"))
        .width('600px')
        .height('300px')
        .margin({ top: 50 })
      Text(`矩陣變換后的坐標(biāo)：[${this.transformPoint}]`)
        .fontSize(16)
        .margin({ top: 100 })
      Image($r("app.media.image"))
        .width('600px')
        .height('300px')
        .margin({ top: 50 })
        .transform(this.matrix_2)
    }.width("100%").padding(50)
  }
}

TranslateOption

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

ScaleOption

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full

RotateOption

系統(tǒng)能力： SystemCapability.ArkUI.ArkUI.Full