Flutter: Matirx4和透视变换

揭开 Matrix4 的神秘面纱并利用 Transform Widget 的全部功能
翻译自: 德文·乔西

Flutter 目录中最强大的小部件之一（对我来说，也是最被低估的小部件之一）是 Transform 小部件。Transform小部件允许我们从根本上改变小部件的外观和行为方式，允许我们创建新的、复杂类型的动画。Transform 小部件内部用一个 4D 矩阵驱动实际的变换(Matrix4 类)。虽然 Flutter 提供了简单的方法来进行平移、缩放和旋转等变换，但我们可以使用 Matrix4 来创建更棒的东西，例如 3D 透视变换。在本文中，我们将探索 4D 矩阵本身以及其中的各个值的作用。

什么是 4D 矩阵？

尽管默认情况下任何带有“4D”的东西听起来很酷，但实际上，4D 矩阵只是一个具有 4 行 4 列的矩阵。我们需要使用 4D 矩阵来转换 3 维对象（这里，维度是我们习惯的：长度、宽度和高度）。

这种矩阵的形式称为单位矩阵。考虑单位矩阵的最佳方式是，它等同于矩阵形式中的数字“1”——它在用于转换小部件时保持不变。在这个矩阵中使用不同的数字组合，我们可以操纵给定对象的形状、大小、方向等, 让我们看看我们如何做到这一点。

基本设置

让我们看一下我们将用于实验的代码：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {

  double x = 0;
  double y = 0;
  double z = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Transform(
          transform: Matrix4(
              1,0,0,0,
              0,1,0,0,
              0,0,1,0,
              0,0,0,1,
          )..rotateX(x)..rotateY(y)..rotateZ(z),
          alignment: FractionalOffset.center,
          child: GestureDetector(
            onPanUpdate: (details) {
              setState(() {
                y = y - details.delta.dx / 100;
                x = x + details.delta.dy / 100;
              });
            },
            child: Container(
              color: Colors.red,
              height: 200.0,
              width: 200.0,
            ),
          ),
        ),
      ),
    );
  }
}

该代码仅使用一个 Transform 小部件来进行转换。我们为起点定义了一个Matrix4。GestureDectector 的其余代码允许我们在 X 和 Y 方向旋转正方形。x、y 和 z 变量用于跟踪已经完成的旋转量。

我们稍后会回到为什么允许用户旋转正方形，现在，我们专注于矩阵和基本的 2D 结果。

这是屏幕现在的样子

使用矩阵缩放

让我们尝试在 X、Y、Z 方向上缩放（扩展/收缩）正方形，然后一起缩放。

X 中的缩放

image.png

要在 X 方向（水平）缩放对象，请使用所需的缩放因子更改矩阵(0,0) 值。
让我们尝试这样做。缩放因子为 1.5 时，我们的正方形变为：

image.png

同理:
1.要在 Y 方向（垂直）缩放对象，请使用所需的缩放因子更改矩阵的 (1,1) 值。
2.要在 Z 方向缩放对象，更改矩阵的 (2,2) 值, 效果在我们这个2D正方形上是看不见效果的
3.在所有方向上缩放的一种方法是结合上述方法并使用它来统一缩放我们的正方形。但是，我们也可以使用另一种方法：
我们可以用 1 除以我们想要使用的比例因子来代替位置 (3,3)。因此，如果我们想让正方形变大两倍，我们使用 1/2，即 0.5。

使用矩阵进行平移

要在 X、Y 或 Z 方向上进行平移，我们可以轻松地分别更改 X、Y 和 Z 值的底部三个值。

重要提示：上面给出的矩阵表示代码中的矩阵。由于实际的 Matrix4 采用列优先格式，因此 X、Y 和 Z 将分别位于 (0,3)、(1,3) 和 (2,3)。

使用矩阵旋转

绕 X 轴旋转

绕Y轴旋转

绕Z轴旋转

透视变换

透视变换修改沿轴位置的长度。最常见的用途是给用户一种深度感——铁路轨道在你站立的地方看起来很宽，但随着你看得更远而变得越来越短。在这种情况下，正方形靠近我们的一侧应该看起来更大，而远离我们的一侧应该看起来更小。
[图片上传失败...(image-7452de-1628245278985)]
当前的代码, 正方形旋转时没有深度感。我们可以使用透视变换来解决这个问题。为了在 Z 方向启用深度感知，我们需要在代码中的矩阵中设置这个值——

让我们将 z 值设置为 0.002，看看我们的正方形会发生什么。