Matrix4矩陣變化

連載：flutter布局-1-column
連載：flutter布局-2-row
連載：flutter布局-3-center
連載：flutter布局-4-container

這個(gè)是用來變換的矩陣，總計(jì)需要16個(gè)參數(shù)也可以理解成4*4的矩陣。
具體有以下參數(shù)：

scale：縮放比例
transform: 移動(dòng)
rotationZ：繞Z軸旋轉(zhuǎn)
rotationX：繞X軸旋轉(zhuǎn)
rotationY：繞Y軸旋轉(zhuǎn)
columns：設(shè)置一個(gè)新的矩陣
compose：復(fù)合平移、旋轉(zhuǎn)、縮放，形成新的狀態(tài)
copy：復(fù)制一個(gè)4*4的張量(矩陣)

4*4矩陣：

Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

1、scale：縮放比例 transform: Matrix4.diagonal3Values(2, 10, 1),

縮放.png

Matrix4.diagonal3Values(1, 1, 1)
表示縮放的比例，分別沿x,y,z三個(gè)方向，x軸正向向右，y軸正向向下，z軸正向從屏幕朝上，正值表示正向，>1表示放大，小于1大于0表示縮小，負(fù)值表示反向。

scale.png

上面的值紅框的寬高都是80，里面的小框?qū)捀叨际?0，縮放的時(shí)間這樣更能體現(xiàn)兩個(gè)的相對(duì)位置。
具體的使用方法或者值，大家可以仔細(xì)看下上面的圖片。
Z軸的變化在平面手機(jī)上看不出效果，后面我們?cè)谧鲂D(zhuǎn)的時(shí)間可以具體看下z軸的變化。

縮放有以下幾種寫法：
舉個(gè)例子：向x軸正向放大2倍。

1. Matrix4.diagonal3Values(2, 1, 1)
2. Matrix4.diagonal3(v.Vector3(2, 1, 1))
3. Matrix4.diagonal3(v.Vector3.array([2, 1, 1]))
4. Matrix4(2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
   上述三種寫法都表示向x軸正方向移動(dòng)30個(gè)單位距離。
   第2、3兩中寫法是用三維向量表示的，但是需要導(dǎo)入向量包
   import 'package:vector_math/vector_math_64.dart' as v;
   第4中寫法是4*4的矩陣寫法：
   其中矩陣的第1、6、11個(gè)值分別代表的是x軸縮放、y軸縮放、z軸縮放

2、transform: 移動(dòng)

transform.png

表示平移的距離，分別沿x,y,z三個(gè)方向，
x軸正向向右，
y軸正向向下，
z軸正向從屏幕朝上，
正值表示正向移動(dòng)，負(fù)值表示負(fù)向移動(dòng)，
其中z軸移動(dòng)在平面上無法看出小錯(cuò)

移動(dòng)有以下幾種寫法：
舉個(gè)例子：向右移動(dòng)30個(gè)單位的距離。

1. Matrix4.translationValues(30, 0, 0)
2. Matrix4.translation(v.Vector3(30, 0, 0))
3. Matrix4.translation(v.Vector3.array([0, -30, 0]))
4. Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 30, 0, 0, 1)
   上述三種寫法都表示向x軸正方向移動(dòng)30個(gè)單位距離。
   第2、3兩中寫法是用三維向量表示的，但是需要導(dǎo)入向量包
   import 'package:vector_math/vector_math_64.dart' as v;
   第4中寫法是4*4的矩陣寫法：
   其中矩陣的第13、14、15個(gè)值分別代表的是x軸平移、y軸平移、z軸平移

3、rotationZ：繞Z軸旋轉(zhuǎn)

rotationZ.png

繞著Z軸旋轉(zhuǎn)，正向是順時(shí)針，負(fù)向是逆時(shí)針，
正向也就是從x軸正向往y軸正向旋轉(zhuǎn)

兩種寫法：

1. Matrix4.rotationZ(pi / 6) ， 參數(shù)是弧度
2. Matrix4(cos(pi / 6), sin(pi / 6), 0, 0,-sin(pi / 6), cos(pi / 6), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) ， 參數(shù)是弧度。
   也就是改變 1、2、5、6這個(gè)4個(gè)值
   其中1、6的值相同，為cos值
   2、5相反，2位sin值，5為-sin值

4、rotationX：繞X軸旋轉(zhuǎn)

rotationX.png

繞著X軸旋轉(zhuǎn)，正向是順時(shí)針，負(fù)向是逆時(shí)針，
正向也就是從y軸正向往z軸正向旋轉(zhuǎn)

兩種寫法：

1. Matrix4.rotationX(pi / 6) ， 參數(shù)是弧度
2. Matrix4(1, 0, 0, 0, 0, cos(pi / 6), sin(pi / 6), 0, 0, -sin(pi / 6), cos(pi / 6), 0, 0, 0, 0, 1) ， 參數(shù)是弧度。
   也就是改變 6、7、10、11這個(gè)4個(gè)值
   矩陣的6 cos(pi/6)， 7的值 sin(pi/6)， 10的值 -sin(pi/6)， 11的值 cos(pi/6)

5、rotationY：繞Y軸旋轉(zhuǎn)

rotationY.png

上圖的右下角坐標(biāo)系表示：

左側(cè)灰色大小是原形狀
藍(lán)色是繞Y軸旋轉(zhuǎn)30°的形狀
紅色虛線是投影虛線

紅色實(shí)線是旋轉(zhuǎn)后在xy平面
也就是手機(jī)屏幕上的投影

0-90 正向旋轉(zhuǎn)角度越大，最終在手機(jī)上的投影越小，90°的時(shí)間就是一條線，而線的點(diǎn)是無限小的，肉眼是看不到的，所以會(huì)出現(xiàn)90°沒有東西存在的情況。
如果想看90°的效果，就把角度改成 178*pi/180，就會(huì)出現(xiàn)一條線

繞著Y軸旋轉(zhuǎn)，正向是順時(shí)針，負(fù)向是逆時(shí)針，
正向也就是從x軸正向往z軸正向旋轉(zhuǎn)

兩種寫法：

1. Matrix4.rotationY(pi / 6) ， 參數(shù)是弧度
2. Matrix4(cos(pi / 6), 0, -sin(pi / 6), 0, 0, 1, 0, 0, sin(pi / 6), 0, cos(pi / 6), 0, 0, 0, 0, 1) ， 參數(shù)是弧度。
   也就是改變 1、3、9、11這個(gè)4個(gè)值
   矩陣的1 cos(pi/6)， 3的值 -sin(pi/6)， 9的值 sin(pi/6)， 11的值 cos(pi/6)

6、columns：設(shè)置一個(gè)新的矩陣

 Matrix4.columns(
                        v.Vector4(1, 0, 0, 0),
                        v.Vector4(0, 1, 0, 0),
                        v.Vector4(0, 0, 1, 0),
                        v.Vector4(0, 0, 0, 1)) 

需要導(dǎo)入 import 'package:vector_math/vector_math_64.dart' as v;

4個(gè)參數(shù)都是一個(gè)4維的向量，也就是一個(gè)4個(gè)值的一維數(shù)組.
跟直接設(shè)置 Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)是一樣的效果

7、compose：復(fù)合平移、旋轉(zhuǎn)、縮放，形成新的狀態(tài)

Matrix4.columns( 
Vector3 translation, 
Quaternion rotation, 
Vector3 scale) 

第一個(gè)平移參數(shù)是三維向量：v.Vector3(30,0,0)，表示向右移動(dòng)30個(gè)單位的距離，影響的是矩陣的13，14，15三個(gè)數(shù)值；
第二個(gè)參數(shù)是4維向量，在旋轉(zhuǎn)里面也可以叫四元數(shù)，進(jìn)行旋轉(zhuǎn)的計(jì)算，四元數(shù)和歐拉角可以相互轉(zhuǎn)換，影響矩陣的參數(shù)有 1、2、3、5、6、7、9、10、11，也就是說這幾個(gè)參數(shù)是影響旋轉(zhuǎn)的。
從上面的旋轉(zhuǎn)rotationxyz可以看出:

x軸旋轉(zhuǎn)影響的參數(shù)是 6、7、10、11
y軸旋轉(zhuǎn)影響的參數(shù)是 1、3、9、11
z軸旋轉(zhuǎn)影響的參數(shù)是 1、2、5、6

第三個(gè)參數(shù)是一個(gè)三維向量：進(jìn)行縮放的,影響矩陣的 1、6、11。

所以縮放是和旋轉(zhuǎn)相關(guān)的，從上面旋轉(zhuǎn)的圖片結(jié)果可以看出，

計(jì)算的方法是先拿平移的參數(shù)和旋轉(zhuǎn)的四元素進(jìn)行計(jì)算，然后在進(jìn)行縮放

8、copy：復(fù)制一個(gè)4*4的張量(矩陣)

Matrix4.copy( Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) )

9、identity：恢復(fù)初始狀態(tài)，也就是4*4的單位矩陣

Matrix4.identity()

10、inverted：取相反的矩陣，就是反著來

你要往東，結(jié)果就往西

Matrix4.inverted(Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 30, 0, 1))
里面的矩陣表示y軸向下移動(dòng)30個(gè)單位距離
取反后是沿著y軸向上30個(gè)單位距離

Matrix4.inverted(Matrix4(2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1))
里面的矩陣表示 x軸 放大兩倍，也就是所有的坐標(biāo)都*2 
取反后是沿著x軸縮小1倍，也就是所有的坐標(biāo)*0.5

其中6，7，8，9，10的示例如下：

columns_compose_identity_inverted_copy.png

11、outer(合并)、skew(扭曲)、skewX(x軸扭曲)、skewY(y軸扭曲)、zero(置零矩陣)、fromList(將一個(gè)16位的一維數(shù)組轉(zhuǎn)換成4*4的矩陣)

outer.png

 * outer 兩個(gè)4維向量的乘積合并
 * skew：扭曲
 * skewX：沿著x軸扭曲
 * skewY：沿著y軸扭曲
 * zero: 全是0的4*4的張量
 * fromList： 將一個(gè)16位的一維數(shù)組轉(zhuǎn)換成4*4的矩陣