小菜剛學習了 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 涉及的範圍很廣泛,還有很多方法小菜沒有研究到,隻是嘗試了一些常用的構造方法,若有錯誤的地方請多多指導!