Flutter 45: 圖解矩陣變換 Transform 類 (二)

yifanwu發表於2021-09-09
Flutter圖解矩陣ORM

      小菜剛學習了 Transform 類，其核心部分在於矩陣變換，而矩陣變換是由 Matrix4 處理的，且無論是如何的平移旋轉等操作，根本上還是一個四階矩陣操作的；接下來小菜學習一下 Matrix4 的基本用法；

基本構造

Matrix4(double arg0, … double arg15)

      Matrix4 預設建構函式由 16 個引數，從左到右從上到下依此排列為一個四階矩陣；

transform: Matrix4(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()

      Matrix4.identity() 會初始化一個如上的 Matrix4，可在此基礎上進行其他矩陣操作；

transform: Matrix4.identity(),
transform: Matrix4.identity()..rotateZ(pi / 4),

圖片描述

Matrix4.zero()

      Matrix4.zero() 會初始化一個所有引數值為 0 的空矩陣，在此基礎上設定具體的變化矩陣；檢視原始碼所有的初始化都是從 Matrix4.zero() 開始的；

transform: Matrix4.zero(),
transform: Matrix4.zero()..setIdentity(),

圖片描述

Matrix4.fromList()

      Matrix4.fromList() 將 List 列表中資料賦值進入 Matrix4(double arg0, … double arg15) 類似；

List<double> list = [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];
transform: Matrix4.fromList(list),

Matrix4.copy()

      Matrix4.copy() 複製一個已有的 Matrix4；

transform: Matrix4.copy(Matrix4.identity()),

Matrix4.columns()

      Matrix4.columns() 由四個 4D 列向量組成；

import 'package:vector_math/vector_math_64.dart' as v;

transform: Matrix4.columns(
    v.Vector4(1.0, 0.0, 0.0, 0.0),
    v.Vector4(0.0, 1.0, 0.0, 0.0),
    v.Vector4(0.0, 0.0, 1.0, 0.0),
    v.Vector4(0.0, 0.0, 0.0, 1.0)),

Matirx4.inverted()

      Matrix4.inverted() 為逆向矩陣，與原 Matrix4 矩陣相反(矩陣座標沿著左對角線對稱)；

transform: Matrix4.inverted(Matrix4.fromList(list)),

圖片描述

Matrix4.outer()

      Matrix4.outer() 為兩個四階矩陣的合併乘積，注意兩個四階矩陣的先後順序決定最終合併後的矩陣陣列；

transform: Matrix4.outer(v.Vector4(1.0, 1.0, 1.0, 1.20), v.Vector4.identity()),
transform: Matrix4.outer(v.Vector4.identity(), v.Vector4(1.0, 1.0, 1.0, 1.20)),

圖片描述

Scale 縮放構造方法

Matrix4.diagonal3()

      Matrix4.diagonal3() 透過 Vector3 設定縮放矩陣；

transform: Matrix4.diagonal3(v.Vector3(2.0, 1.0, 1.0)),
transform: Matrix4.diagonal3(v.Vector3.array([2.0, 2.0, 2.0])),

      分析 Vector3 兩種構造方法，三個引數分別對應 x / y /z 軸方向縮放；

factory Vector3(double x, double y, double z) =>
      new Vector3.zero()..setValues(x, y, z);
      
factory Vector3.array(List<double> array, [int offset = 0]) =>
      new Vector3.zero()..copyFromArray(array, offset);

圖片描述

Matirx4.diagonal3Values()

      Matrix4.diagonal3Values() 類似於將上述構造方法提取出來，直接對三個引數進行縮放賦值；

transform: Matrix4.diagonal3Values(2.0, 1.0, 1.0),

      分析 diagonal3Values 原始碼，發現 Matrix4 矩陣中坐對角線上的值分別對應 x / y / z 軸方向的縮放；

factory Matrix4.diagonal3Values(double x, double y, double z) =>
    new Matrix4.zero()
      .._m4storage[15] = 1.0
      .._m4storage[10] = z
      .._m4storage[5] = y
      .._m4storage[0] = x;

圖片描述

Transform 平移構造方法

Matrix4.translation()

      Matrix4.translation 同樣透過 Vector3 構造方法的各引數設定矩陣平移量；水平向右為 x 軸正向，豎直向下為 y 軸正向；

transform: Matrix4.translation(v.Vector3(10.0, 10.0, 10.0)),
transform: Matrix4.translation(v.Vector3.array([-10.0, -10.0, 10.0])),

圖片描述

Matrix4.translationValues()

      Matrix4.translationValues() 將矩陣平移量直接賦值展示；

transform: Matrix4.translationValues(10.0, 10.0, 10.0),

      分析 translationValues 原始碼，Matirx4 四階矩陣中第四行前三列分別對應 x / y / z 軸方向的偏移量；

factory Matrix4.translationValues(double x, double y, double z) =>
    new Matrix4.zero()
      ..setIdentity()
      ..setTranslationRaw(x, y, z);

void setTranslationRaw(double x, double y, double z) {
  _m4storage[14] = z;
  _m4storage[13] = y;
  _m4storage[12] = x;
}

圖片描述

Rotation 旋轉構造方法

Matrix4.rotationX()

      Matrix4.rotationX() 沿 x 軸方向旋轉；

transform: Matrix4.rotationX(pi / 3),

      分析原始碼，四階矩陣中，index 為 5/6/9/10 共同操作旋轉弧度；

void setRotationX(double radians) {
    final double c = math.cos(radians);
    final double s = math.sin(radians);
    _m4storage[0] = 1.0;  _m4storage[1] = 0.0;
    _m4storage[2] = 0.0;  _m4storage[4] = 0.0;
    _m4storage[5] = c;    _m4storage[6] = s;
    _m4storage[8] = 0.0;  _m4storage[9] = -s;
    _m4storage[10] = c;   _m4storage[3] = 0.0;
    _m4storage[7] = 0.0;  _m4storage[11] = 0.0;
}

圖片描述

Matrix4.rotationY()

      Matrix4.rotationY() 沿 y 軸方向旋轉；

transform: Matrix4.rotationY(pi / 3),

      分析原始碼，四階矩陣中，index 為 0/2/8/10 共同操作旋轉弧度；

void setRotationY(double radians) {
    final double c = math.cos(radians);
    final double s = math.sin(radians);
    _m4storage[0] = c;    _m4storage[1] = 0.0;
    _m4storage[2] = -s;   _m4storage[4] = 0.0;
    _m4storage[5] = 1.0;  _m4storage[6] = 0.0;
    _m4storage[8] = s;    _m4storage[9] = 0.0;
    _m4storage[10] = c;   _m4storage[3] = 0.0;
    _m4storage[7] = 0.0;  _m4storage[11] = 0.0;
}

圖片描述

Matrix4.rotationZ()

      Matrix4.rotationZ() 沿 z 軸方向旋轉；

transform: Matrix4.rotationZ(pi / 3),

      分析原始碼，四階矩陣中，index 為 0/1/4/5 共同操作旋轉弧度；

void setRotationZ(double radians) {
    final double c = math.cos(radians);
    final double s = math.sin(radians);
    _m4storage[0] = c;
    _m4storage[1] = s;
    _m4storage[2] = 0.0;   _m4storage[4] = -s;
    _m4storage[5] = c;     _m4storage[6] = 0.0;
    _m4storage[8] = 0.0;   _m4storage[9] = 0.0;
    _m4storage[10] = 1.0;  _m4storage[3] = 0.0;
    _m4storage[7] = 0.0;   _m4storage[11] = 0.0;
}

圖片描述

Skew 斜切

Matrix4.skewX()

      上一篇部落格稍稍介紹過，skewX() 是沿 x 軸方向斜切；

transform: Matrix4.skewX(pi / 6),

      分析原始碼，四階矩陣中，第二行第一列元素對應斜切值，即三角函式中 tan；

factory Matrix4.skewX(double alpha) {
    final Matrix4 m = new Matrix4.identity();
    m._m4storage[4] = math.tan(alpha);
    return m;
}

圖片描述

Matrix4.skewY()

      skewY() 是沿 y 軸方向斜切；

transform: Matrix4.skewY(pi / 6),

      分析原始碼，四階矩陣中，第一行第二列元素對應斜切值，即三角函式中 tan；

factory Matrix4.skewY(double beta) {
    final Matrix4 m = new Matrix4.identity();
    m._m4storage[1] = math.tan(beta);
    return m;
}

圖片描述

Matrix4.skew()

      skew() 是沿 x / y 軸方向斜切；

transform: Matrix4.skew(pi / 6, pi / 6),

      分析原始碼，四階矩陣中，將上述兩個元素結合展示效果；

factory Matrix4.skew(double alpha, double beta) {
    final Matrix4 m = new Matrix4.identity();
    m._m4storage[1] = math.tan(beta);
    m._m4storage[4] = math.tan(alpha);
    return m;
}

圖片描述

組合構造

Matrix4.compose()

      Matrix4.compose() 可以將平移/旋轉/縮放共同組合操作繪製；

transform: Matrix4.compose(v.Vector3(10.0, 10.0, 10.0), v.Quaternion.random(math.Random(10)), v.Vector3(1.5, 1.0, 1.0)),

      分析原始碼，三個引數分別對應平移量/旋轉量/縮放量；旋轉量用到了尤拉旋轉，小菜還不是很理解，只是在測試中用了 v.Quaternion.random() 的一個構造方法，還有待深入探索；

factory Matrix4.compose(
        Vector3 translation, Quaternion rotation, Vector3 scale) =>
    new Matrix4.zero()
      ..setFromTranslationRotationScale(translation, rotation, scale);

圖片描述

      Matirx4 涉及的範圍很廣泛，還有很多方法小菜沒有研究到，只是嘗試了一些常用的構造方法，若有錯誤的地方請多多指導！

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/2157/viewspace-2822932/，如需轉載，請註明出處，否則將追究法律責任。

相關文章