FlutterのMatrix4Dでtransformする方法

4D matrix とは

三次元を表現するために4*4の行列で表すものが4D matrixです。

なので、Matrix4クラスのコンストラクタは16個の引数を必要とします。

Matrix4(
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0,
  0, 0, 0, 1,
)

上記のコードのように、右下がりの対角線上にある成分がすべて1で、残りの成分がすべて0であるものを identity matrix （単位行列）と呼びます。

identity matrix をtransformに与えても何も変更されません。

4D matrix を使ってScaleしてみる

こちらのデモはボタンを押すとx方向に2倍になります。

See the Pen matrix4D scale by うぃむ@謳って⤴謳って⤴雲の上ぇぇええ☁🥰 (@wim_web) on CodePen.

このように行列の値を変化させることでScaleしたりtranslateしたりできます。

しかし行列を直接いじるためには知識が必要になってしまうので（Rotationはsin, cosもでてくる）、簡単に扱えるようにMatrix4クラスにはファクトリが定義されています。

いろんなファクトリ

大きさを変える

Matrix4.diagonal3Values(double x, double y, double z)

回転させる

Matrix4.rotationX(double radians)
Matrix4.rotationY(double radians)
Matrix4.rotationZ(double radians)

X, Y, Zは回転軸を表しています。

引数に渡すのは回転させたい角度ではなくてラジアンで指定します。

radian = angle * (pi / 180)

たとえば90度回転させたい場合は、

radian = 90 * (pi / 180) = 0.5 * pi

となります。

ななめにする　ゆがめる

説明が難しいのでデモを見てください。

Matrix4.skewX(double alpha)

See the Pen skewX by うぃむ@謳って⤴謳って⤴雲の上ぇぇええ☁🥰 (@wim_web) on CodePen.

Matrix4.skewY(double beta)

See the Pen skewY by うぃむ@謳って⤴謳って⤴雲の上ぇぇええ☁🥰 (@wim_web) on CodePen.

それぞれに渡す引数の計算式はこちらです。

alpha = angle * (pi / 180)
beta = angle * (pi / 180)

ラジアンではなくタンジェントで計算されているので90度（0.5 * pi）は定義されません。（見えなくなる）

移動させる

Matrix4.translationValues(double x, double y, double z)

反対のMatrix4を作成する

Matrix4.inverted(Matrix4 other)

たとえばx方向に2倍させるMatrix4を引数に渡すと、x方向に1/2倍させるMatrix4が返ってきます。

以下のコードが同じになります。

Matrix4.diagonal3Values(0.5, 1, 1)

Matrix4.inverted(Matrix4.diagonal3Values(2, 1, 1))

See the Pen matrix4D inverted by うぃむ@謳って⤴謳って⤴雲の上ぇぇええ☁🥰 (@wim_web) on CodePen.

メソッド

ファクトリはあくまで初期化なので、あるMatrix4クラスを変化させたいときはメソッドを使います。

だいたい似たような名前なのでなんとなくわかると思います。

こんな感じで使えます。

child: Transform(
  transform: Matrix4.identity()..rotateY(pi),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.indigo[500],
  ),
),

参考

Advanced Flutter: Matrix4 And Perspective Transformations

Matrix4 class