揭開(kāi) Matrix4 的神秘面紗并利用 Transform Widget 的全部功能
翻譯自: 德文·喬西

Flutter 目錄中最強(qiáng)大的小部件之一（對(duì)我來(lái)說(shuō)，也是最被低估的小部件之一）是 Transform 小部件。Transform小部件允許我們從根本上改變小部件的外觀(guān)和行為方式丧叽，允許我們創(chuàng)建新的帚稠、復(fù)雜類(lèi)型的動(dòng)畫(huà)惧盹。Transform 小部件內(nèi)部用一個(gè) 4D 矩陣驅(qū)動(dòng)實(shí)際的變換(Matrix4 類(lèi))搀绣。雖然 Flutter 提供了簡(jiǎn)單的方法來(lái)進(jìn)行平移振乏、縮放和旋轉(zhuǎn)等變換恢准，但我們可以使用 Matrix4 來(lái)創(chuàng)建更棒的東西魂挂，例如 3D 透視變換。在本文中馁筐，我們將探索 4D 矩陣本身以及其中的各個(gè)值的作用锰蓬。

什么是 4D 矩陣？

盡管默認(rèn)情況下任何帶有“4D”的東西聽(tīng)起來(lái)很酷眯漩，但實(shí)際上芹扭，4D 矩陣只是一個(gè)具有 4 行 4 列的矩陣。我們需要使用 4D 矩陣來(lái)轉(zhuǎn)換 3 維對(duì)象（這里赦抖，維度是我們習(xí)慣的：長(zhǎng)度舱卡、寬度和高度）。

這種矩陣的形式稱(chēng)為單位矩陣队萤÷肿叮考慮單位矩陣的最佳方式是，它等同于矩陣形式中的數(shù)字“1”——它在用于轉(zhuǎn)換小部件時(shí)保持不變要尔。在這個(gè)矩陣中使用不同的數(shù)字組合舍杜，我們可以操縱給定對(duì)象的形狀新娜、大小、方向等, 讓我們看看我們?nèi)绾巫龅竭@一點(diǎn)既绩。

基本設(shè)置

讓我們看一下我們將用于實(shí)驗(yàn)的代碼：

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

class _MyHomePageState extends State<MyHomePage> {

  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,
            ),
          ),
        ),
      ),
    );
  }
}

該代碼僅使用一個(gè) Transform 小部件來(lái)進(jìn)行轉(zhuǎn)換概龄。我們?yōu)槠瘘c(diǎn)定義了一個(gè)Matrix4。GestureDectector 的其余代碼允許我們?cè)?X 和 Y 方向旋轉(zhuǎn)正方形饲握。x私杜、y 和 z 變量用于跟蹤已經(jīng)完成的旋轉(zhuǎn)量。

我們稍后會(huì)回到為什么允許用戶(hù)旋轉(zhuǎn)正方形救欧，現(xiàn)在衰粹，我們專(zhuān)注于矩陣和基本的 2D 結(jié)果。

這是屏幕現(xiàn)在的樣子

使用矩陣縮放

讓我們嘗試在 X笆怠、Y铝耻、Z 方向上縮放（擴(kuò)展/收縮）正方形，然后一起縮放蹬刷。

X 中的縮放

image.png

要在 X 方向（水平）縮放對(duì)象瓢捉，請(qǐng)使用所需的縮放因子更改矩陣(0,0) 值。
讓我們嘗試這樣做箍铭〔醇恚縮放因子為 1.5 時(shí)，我們的正方形變?yōu)椋?/p>

image.png

同理:
1.要在 Y 方向（垂直）縮放對(duì)象诈火，請(qǐng)使用所需的縮放因子更改矩陣的 (1,1) 值兽赁。
2.要在 Z 方向縮放對(duì)象，更改矩陣的 (2,2) 值, 效果在我們這個(gè)2D正方形上是看不見(jiàn)效果的
3.在所有方向上縮放的一種方法是結(jié)合上述方法并使用它來(lái)統(tǒng)一縮放我們的正方形冷守。但是刀崖，我們也可以使用另一種方法：
我們可以用 1 除以我們想要使用的比例因子來(lái)代替位置 (3,3)。因此拍摇，如果我們想讓正方形變大兩倍亮钦，我們使用 1/2，即 0.5充活。

使用矩陣進(jìn)行平移

要在 X蜂莉、Y 或 Z 方向上進(jìn)行平移，我們可以輕松地分別更改 X混卵、Y 和 Z 值的底部三個(gè)值映穗。

重要提示：上面給出的矩陣表示代碼中的矩陣。由于實(shí)際的 Matrix4 采用列優(yōu)先格式幕随，因此 X蚁滋、Y 和 Z 將分別位于 (0,3)、(1,3) 和 (2,3)。

使用矩陣旋轉(zhuǎn)

繞 X 軸旋轉(zhuǎn)

繞Y軸旋轉(zhuǎn)

繞Z軸旋轉(zhuǎn)

透視變換

透視變換修改沿軸位置的長(zhǎng)度辕录。最常見(jiàn)的用途是給用戶(hù)一種深度感——鐵路軌道在你站立的地方看起來(lái)很寬睦霎，但隨著你看得更遠(yuǎn)而變得越來(lái)越短。在這種情況下走诞，正方形靠近我們的一側(cè)應(yīng)該看起來(lái)更大副女，而遠(yuǎn)離我們的一側(cè)應(yīng)該看起來(lái)更小。
[圖片上傳失敗...(image-7452de-1628245278985)]
當(dāng)前的代碼, 正方形旋轉(zhuǎn)時(shí)沒(méi)有深度感速梗。我們可以使用透視變換來(lái)解決這個(gè)問(wèn)題肮塞。為了在 Z 方向啟用深度感知襟齿，我們需要在代碼中的矩陣中設(shè)置這個(gè)值——