跳到主要内容

flutter中的变换和Matrix4

本文是Flutter动画系列的第九篇，建议读者阅读前面的教程，做到无缝衔接。

 前面的教程里已经使用了平移和旋转变换，本文将系统的介绍 flutter 里的变换和 Matrix4 。

1. 变换​

 在图形学里，变换指通过某种规则将一个图形变为另外一个图形。flutter 变换的类名为Transform，变换主要有平移变换（translation）、旋转变换（rotation）、缩放变换（scaling）和剪切变换（shear）。除了剪切变换，其他三种变换 flutter 都提供了对应的构造函数。

Transform.rotate({Key? key, required double angle, Offset? origin, AlignmentGeometry? alignment = Alignment.center, bool transformHitTests = true, FilterQuality? filterQuality, Widget? child})

Transform.scale({Key? key, double? scale, double? scaleX, double? scaleY, Offset? origin, AlignmentGeometry? alignment = Alignment.center, bool transformHitTests = true, FilterQuality? filterQuality, Widget? child})

Transform.translate({Key? key, required Offset offset, bool transformHitTests = true, FilterQuality? filterQuality, Widget? child})

2. 为什么使用矩阵来实现变换​

 图形学中，一般使用向量（Vector）来表示一个点，例如三维空间中的一个点可以表示为[x,y,z][x,y,z]，x 轴的平移变换可以表示为[x+dx,y,z][x+dx,y,z]，x 轴的缩放变换可以表示为[k∗x,y,z][k*x,y,z]。

 使用矩阵实现变换的好处是，多种变换可以融合在一起，同时变换的叠加可以通过矩阵相乘实现。

[abcdefhij][xyz]=[a∗x+b∗y+c∗zd∗x+e∗y+f∗zh∗x+i∗y+j∗z]\begin{bmatrix} a & b & c\\ d & e & f\\ h & i & j \end{bmatrix} \begin{bmatrix} x \\ y \\ z \end{bmatrix} = \begin{bmatrix} a*x + b*y + c*z \\ d*x + e*y + f*z \\ h*x + i*y + j*z \end{bmatrix}

2.1 为什么使用4*4的矩阵​

 使用3*3无法实现平移变换，所以新增了一列来实现平移变换，这称为齐坐标。沿着 x 轴平移用矩阵表示如下。

[100dx010000100001][xyz1]=[x+dxyz1]\begin{bmatrix} 1 & 0 & 0 & dx\\ 0 & 1 & 0 & 0\\ 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ z \\ 1 \end{bmatrix} = \begin{bmatrix} x+dx \\ y \\ z \\ 1 \end{bmatrix}

3. Matrix4​

 flutter 提供Matrix4类来构造变换矩阵，它的构造函数非常多，常用的构造函数如下，读者可以根据需要选用。

Matrix4.zero() //全0矩阵
Matrix4.identity() //对角线全是1，对等变换
Matrix4.rotationX(double radians) //绕x轴旋转
Matrix4.rotationY(double radians) //绕y轴旋转
Matrix4.rotationZ(double radians) //绕z轴旋转
Matrix4.diagonal3Values(double x, double y, double z)//主对角线元素值，用来缩放

  1. Why do we use 4x4 matrices to transform things in 3D?

  2. Transformation matrix

署名-非商业性使用-禁止演绎 4.0 国际