Zenn
🐸

【Flutter】Matrix4 を使ったオブジェクトの変換

2023/12/08に公開
Flutter
tech

Matrix4 とは

Matrix4 は 4x4 の行列を表し、それぞれの値を変更することでオブジェクトの回転、スケール、移動、透視変換などの変換を実現します。

Flutter では Matrix4 クラスとして用意されています。

Matrix4
Matrix4(
  m11, m12, m13, m14,
  m21, m22, m23, m24,
  m31, m32, m33, m34,
  m41, m42, m43, m44
)

https://api.flutter.dev/flutter/vector_math_64/Matrix4-class.html

オブジェクトを変換する

Flutter では Matrix4 に対し、様々なメソッドが用意されているので m11,m12 などの値を直接変更する必要はない。

今回は、identity()を使って変換します。
identity()は Matrix4 の基準行列を生成します。これに対し、scale()などを加えて任意の Matrix4 を定義します。

仮に、Matrix4.identity()..scale(3, 2, 1)を実行するとか下記のような行列となります。

1  0  0  0          3  0  0  0
0  1  0  0    ->    0  2  0  0
0  0  1  0          0  0  1  0
0  0  0  1          0  0  0  1

この Matrix4 を使ってオブジェクトを Transform() することで変換される。

Transform
Transform(
    transform: Matrix4.identity()..scale(3, 2, 1),
    child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
    ),
),

左が変換前、右が変換後
実行例
さらに Z 軸回転を..rotateZ(0.1)で加えると 3D 変換らしくなります。
実行例

検証ページ

実行例

↓ Matrix4 の各値に対するオブジェクトの変化を確認できページを作成しましたので、下記より確認してみてください。

Matrix4 Transform Demo

Discussion