下载.jpeg

大家好呀，每周都 GetMore ，就会越来越强。

基于最近在实践的一个低代码h5画报的一个项目，就编辑框方位拖动和旋转的技术实现做一个分析。里面所需要用到的技术点之一就是matrix矩阵，CSS 函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。

css3 matrix()矩阵

1 怎么表示矩阵

matrix()有六个参数：matrix(a,b,c,d,e,f) 这些值表示以下函数： matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

1.1 原始矩阵

transforms: matrix(1,0,0,1,0,0); 写成数学里矩阵的形式是这样的:

| 1 0 0 |
| 0 1 0 |
| 0 0 1 |

1.2 位移矩阵

transforms: matrix(1,0,0,1,x,y); 写成数学里矩阵的形式是这样的:

| 1 0 x |
| 0 1 y |
| 0 0 1 |

得出：matrix(1,0,0,1,x,y) === translate(x,y)

1.3 缩放矩阵

transforms: matrix(n,0,0,m,0,0); 写成数学里矩阵的形式是这样的:

| n 0 0 |
| 0 m 0 |
| 0 0 1 |

得出：matrix(n,0,0,m,0,0) === scale(n,m)

1.4 旋转矩阵

transforms: matrix(cos(θ),sin(θ),-sin(θ),cos(θ),0,0); 写成数学里矩阵的形式是这样的:

| cos(θ) -sin(θ) 0 |
| sin(θ)  cos(θ) 0 |
|   0      0     1 |

得出：matrix(cos(θ),sin(θ),-sin(θ),cos(θ),0,0) === rotate(θ)

单一规则的矩阵其实很简单，从找规律的方式也能推断出来；那如果是复合规则的矩阵呢，又该怎么表示呢？

矩阵的计算规则

首先了解矩阵的计算规则，矩阵相乘

          | a c e |
      A = | b d f |
          | 0 0 1 |
-----------------------------------------
          | x j |
      B = | y k |
          | 1 2 |
-----------------------------------------
          | ax + cy + 1e aj + ck + 1e |
C = AB =  | bx + dy + 2f bj + dk + 1f |
          | 0x + 0y + 1  0j + 0k + 2  |

看着迷糊了吧，其实有迹可循。

当矩阵A的列数（column）等于矩阵B的行数（row）时，A与B可以相乘。
矩阵C的行数等于矩阵A的行数，C的列数等于B的列数。
乘积C的第m行第n列的元素等于矩阵A的第m行的元素与矩阵B的第n列对应元素乘积之和。

第三点很重要，这又是什么意思呢？

C的第1行第1列 = A的第一行元素 * B的第一列元素

即：

C(1,1) = A(1,1)*B(1,1) + A(1,2)*B(2,1) + A(1,3)*B(3,1)

// 活学活用一下吧，可以推断得到以下公式：
|a c e|   |x|   |ax + cy + 2e|
|b d f| * |y| = |bx + dy + 2f|
|1 1 2|   |2|   |1x + 1y + 4 |

|a c e|   |x j|   |ax + cy + 2e  aj + ck + e|
|b d f| * |y k| = |bx + dy + 2f  bj + dk + f|
|1 1 2|   |2 1|   |x  + y  + 4   j  + k  + 2|

|a c e|   |x j l|   |ax + cy + 2e  aj + ck + e al + cm + 1e|
|b d f| * |y k m| = |bx + dy + 2f  bj + dk + f bl + dm + 1f|
|1 1 2|   |2 1 1|   |1x + 1y + 4   1j + 1k + 2 1l + 1m + 2 |

还是来个实际的例子吧！

求位移(200,150)和旋转45°的矩阵

// 位移矩阵
| 1 0 200 |
| 0 1 150 |
| 0 0  1  |
-----------
// 旋转矩阵
| 0.707107 -0.707107 0 |
| 0.707107  0.707107 0 |
|     0         0    1 |

得到的复合矩阵是这样滴

| 0.707107 -0.707107 200 |
| 0.707107  0.707107 150 |
|     0         0     1  |

怎么样，学废了吗？对矩阵这块的知识有所了解了吧。下期再见，后续会更新在项目中的具体使用。

也该了解下matrix矩阵计算规则了吧