揭開 Matrix4 的神秘面紗并利用 Transform Widget 的全部功能
翻譯自: 德文·喬西
Flutter 目錄中最強大的小部件之一（對我來說，也是最被低估的小部件之一）是 Transform 小部件。Transform小部件允許我們從根本上改變小部件的外觀和行為方式，允許我們創(chuàng)建新的、復雜類型的動畫。Transform 小部件內(nèi)部用一個 4D 矩陣驅動實際的變換(Matrix4 類)。雖然 Flutter 提供了簡單的方法來進行平移、縮放和旋轉等變換，但我們可以使用 Matrix4 來創(chuàng)建更棒的東西，例如 3D 透視變換。在本文中，我們將探索 4D 矩陣本身以及其中的各個值的作用。
什么是 4D 矩陣？
盡管默認情況下任何帶有“4D”的東西聽起來很酷，但實際上，4D 矩陣只是一個具有 4 行 4 列的矩陣。我們需要使用 4D 矩陣來轉換 3 維對象（這里，維度是我們習慣的：長度、寬度和高度）。
這種矩陣的形式稱為單位矩陣?？紤]單位矩陣的最佳方式是，它等同于矩陣形式中的數(shù)字“1”——它在用于轉換小部件時保持不變。在這個矩陣中使用不同的數(shù)字組合，我們可以操縱給定對象的形狀、大小、方向等, 讓我們看看我們?nèi)绾巫龅竭@一點。
基本設置
讓我們看一下我們將用于實驗的代碼：
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,
),
),
),
),
);
}
}
該代碼僅使用一個 Transform 小部件來進行轉換。我們?yōu)槠瘘c定義了一個Matrix4。GestureDectector 的其余代碼允許我們在 X 和 Y 方向旋轉正方形。x、y 和 z 變量用于跟蹤已經(jīng)完成的旋轉量。
我們稍后會回到為什么允許用戶旋轉正方形，現(xiàn)在，我們專注于矩陣和基本的 2D 結果。
使用矩陣縮放
讓我們嘗試在 X、Y、Z 方向上縮放（擴展/收縮）正方形，然后一起縮放。
X 中的縮放
要在 X 方向（水平）縮放對象，請使用所需的縮放因子更改矩陣(0,0) 值。
讓我們嘗試這樣做。縮放因子為 1.5 時，我們的正方形變?yōu)椋?/p>
同理:
1.要在 Y 方向（垂直）縮放對象，請使用所需的縮放因子更改矩陣的 (1,1) 值。
2.要在 Z 方向縮放對象，更改矩陣的 (2,2) 值, 效果在我們這個2D正方形上是看不見效果的
3.在所有方向上縮放的一種方法是結合上述方法并使用它來統(tǒng)一縮放我們的正方形。但是，我們也可以使用另一種方法：
我們可以用 1 除以我們想要使用的比例因子來代替位置 (3,3)。因此，如果我們想讓正方形變大兩倍，我們使用 1/2，即 0.5。
使用矩陣進行平移
要在 X、Y 或 Z 方向上進行平移，我們可以輕松地分別更改 X、Y 和 Z 值的底部三個值。
重要提示：上面給出的矩陣表示代碼中的矩陣。由于實際的 Matrix4 采用列優(yōu)先格式，因此 X、Y 和 Z 將分別位于 (0,3)、(1,3) 和 (2,3)。
使用矩陣旋轉
透視變換
透視變換修改沿軸位置的長度。最常見的用途是給用戶一種深度感——鐵路軌道在你站立的地方看起來很寬，但隨著你看得更遠而變得越來越短。在這種情況下，正方形靠近我們的一側應該看起來更大，而遠離我們的一側應該看起來更小。
[圖片上傳失敗...(image-7452de-1628245278985)]
當前的代碼, 正方形旋轉時沒有深度感。我們可以使用透視變換來解決這個問題。為了在 Z 方向啟用深度感知，我們需要在代碼中的矩陣中設置這個值——
讓我們將 z 值設置為 0.002，看看我們的正方形會發(fā)生什么。
