flutter布局-5-Matrix4矩阵变换

Matrix4矩阵变化

连载:flutter布局-1-column
连载:flutter布局-2-row
连载:flutter布局-3-center
连载:flutter布局-4-container

这个是用来变换的矩阵,总计需要16个参数也可以理解成4*4的矩阵。
具体有以下参数:

scale:缩放比例
transform: 移动
rotationZ:绕Z轴旋转
rotationX:绕X轴旋转
rotationY:绕Y轴旋转
columns:设置一个新的矩阵
compose:复合平移、旋转、缩放,形成新的状态
copy:复制一个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三个方向,x轴正向向右,y轴正向向下,z轴正向从屏幕朝上,正值表示正向,>1表示放大,小于1大于0表示缩小,负值表示反向。

scale.png

上面的值红框的宽高都是80,里面的小框宽高都是30,缩放的时间这样更能体现两个的相对位置。
具体的使用方法或者值,大家可以仔细看下上面的图片。
Z轴的变化在平面手机上看不出效果,后面我们在做旋转的时间可以具体看下z轴的变化。

缩放有以下几种写法:
举个例子:向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轴正方向移动30个单位距离。
    第2、3两中写法是用三维向量表示的,但是需要导入向量包
    import 'package:vector_math/vector_math_64.dart' as v;
    第4中写法是4*4的矩阵写法:
    其中矩阵的第1、6、11个值分别代表的是x轴缩放、y轴缩放、z轴缩放

2、transform: 移动

transform.png

表示平移的距离,分别沿x,y,z三个方向,
x轴正向向右,
y轴正向向下,
z轴正向从屏幕朝上,
正值表示正向移动,负值表示负向移动,
其中z轴移动在平面上无法看出小错

移动有以下几种写法:
举个例子:向右移动30个单位的距离。

  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轴正方向移动30个单位距离。
    第2、3两中写法是用三维向量表示的,但是需要导入向量包
    import 'package:vector_math/vector_math_64.dart' as v;
    第4中写法是4*4的矩阵写法:
    其中矩阵的第13、14、15个值分别代表的是x轴平移、y轴平移、z轴平移

3、rotationZ:绕Z轴旋转

rotationZ.png

绕着Z轴旋转,正向是顺时针,负向是逆时针,
正向也就是从x轴正向往y轴正向旋转

两种写法:

  1. Matrix4.rotationZ(pi / 6) , 参数是弧度
  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) , 参数是弧度。
    也就是改变 1、2、5、6这个4个值
    其中1、6的值相同,为cos值
    2、5相反,2位sin值,5为-sin值

4、rotationX:绕X轴旋转

rotationX.png

绕着X轴旋转,正向是顺时针,负向是逆时针,
正向也就是从y轴正向往z轴正向旋转

两种写法:

  1. Matrix4.rotationX(pi / 6) , 参数是弧度
  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) , 参数是弧度。
    也就是改变 6、7、10、11这个4个值
    矩阵的6 cos(pi/6), 7的值 sin(pi/6), 10的值 -sin(pi/6), 11的值 cos(pi/6)

5、rotationY:绕Y轴旋转

rotationY.png

上图的右下角坐标系表示:

左侧灰色大小是原形状
蓝色是绕Y轴旋转30°的形状
红色虚线是投影虚线

红色实线是旋转后在xy平面
也就是手机屏幕上的投影

0-90 正向旋转角度越大,最终在手机上的投影越小,90°的时间就是一条线,而线的点是无限小的,肉眼是看不到的,所以会出现90°没有东西存在的情况。
如果想看90°的效果,就把角度改成 178*pi/180,就会出现一条线

绕着Y轴旋转,正向是顺时针,负向是逆时针,
正向也就是从x轴正向往z轴正向旋转

两种写法:

  1. Matrix4.rotationY(pi / 6) , 参数是弧度
  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) , 参数是弧度。
    也就是改变 1、3、9、11这个4个值
    矩阵的1 cos(pi/6), 3的值 -sin(pi/6), 9的值 sin(pi/6), 11的值 cos(pi/6)

6、columns:设置一个新的矩阵

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

需要导入 import 'package:vector_math/vector_math_64.dart' as v;

4个参数都是一个4维的向量,也就是一个4个值的一维数组.
跟直接设置 Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)是一样的效果

7、compose:复合平移、旋转、缩放,形成新的状态

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

第一个平移参数是三维向量:v.Vector3(30,0,0),表示向右移动30个单位的距离,影响的是矩阵的13,14,15三个数值;
第二个参数是4维向量,在旋转里面也可以叫四元数,进行旋转的计算,四元数和欧拉角可以相互转换,影响矩阵的参数有 1、2、3、5、6、7、9、10、11,也就是说这几个参数是影响旋转的。
从上面的旋转rotationxyz可以看出:

x轴旋转影响的参数是 6、7、10、11
y轴旋转影响的参数是 1、3、9、11
z轴旋转影响的参数是 1、2、5、6

第三个参数是一个三维向量:进行缩放的,影响矩阵的 1、6、11

所以缩放是和旋转相关的,从上面旋转的图片结果可以看出,

计算的方法是先拿平移的参数和旋转的四元素进行计算,然后在进行缩放

8、copy:复制一个4*4的张量(矩阵)

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

9、identity:恢复初始状态,也就是4*4的单位矩阵

Matrix4.identity()

10、inverted:取相反的矩阵,就是反着来

你要往东,结果就往西

Matrix4.inverted(Matrix4(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 30, 0, 1))
里面的矩阵表示y轴向下移动30个单位距离
取反后是沿着y轴向上30个单位距离
Matrix4.inverted(Matrix4(2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1))
里面的矩阵表示 x轴 放大两倍,也就是所有的坐标都*2 
取反后是沿着x轴缩小1倍,也就是所有的坐标*0.5

其中6,7,8,9,10的示例如下:


columns_compose_identity_inverted_copy.png

11、outer(合并)、skew(扭曲)、skewX(x轴扭曲)、skewY(y轴扭曲)、zero(置零矩阵)、fromList(将一个16位的一维数组转换成4*4的矩阵)

outer.png
 * outer 两个4维向量的乘积合并
 * skew:扭曲
 * skewX:沿着x轴扭曲
 * skewY:沿着y轴扭曲
 * zero: 全是0的4*4的张量
 * fromList: 将一个16位的一维数组转换成4*4的矩阵
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

  • 转载自:http://www.geek-workshop.com/forum.php?mod=viewthread...
    为瞬间停留阅读 1,539评论 0 7
  • 变换(Transformations) 我们可以尝试着在每一帧改变物体的顶点并且重设缓冲区从而使他们移动,但这太繁...
    IceMJ阅读 3,974评论 0 1
  • 原文地址:http://www.3dgep.com/understanding-quaternios/ 转自文章:...
    徐大徐阅读 5,215评论 1 9
  • 1 换位思考,不要自说自话 站在读者立场思考。专业术语使用要谨慎,否则容易适得其反。写作不是为了炫耀你的学识。 2...
    一粟于海阅读 187评论 0 0
  • 本文为原创文章,如需转载请注明出处,谢谢! 当我老了,我还是会看书,慢慢的读着,我不着急。 当我老了,我还是会爱花...
    momo521阅读 263评论 0 2