読者です 読者をやめる 読者になる 読者になる
一人もくもく会 α verでサービス開始しました。

画像の回転

flex

flexでBitmapオブジェクトを回転させる際、
リファレンスを見るとrotaionというプロパティがあり、
それを変更することで簡単に回転が出来る。
が、よくよく見るとx=0, y=0の部分で回転しているため、
ちゃんと真ん中で回転してくれない。
リファレンスを見ると、その基準点を変更するための
プロパティも何も無いようだ。

色々調べていると、行列変換が使えることが分かった。
これで回転どころか何もかも好き勝手に出来る。
さすがflex。携帯のアプリとは違う。

具体的には、Bitmap.transform.matrixに
Matrixオブジェクトを代入しておけばよい。
行列を知らない人はなんのこっちゃと思うかもしれないが、
特に難しいことはない。

var matrix:Matrix = new Matrix();
matrix.rotate(angle);

という感じで何も分からなくても簡単に変換行列は作成できる。
で、具体的に回転させるのは、
まず基準点を画像の中心に合わせ、
それから回転、スケール変更を行い、
表示する位置に移動する、という作業。
内容的にはこれだけ。

var matrix:Matrix = new Matrix();
matrix.tx = -bitmap.bitmapData.width / 2;
matrix.ty = -bitmap.bitmapData.height / 2;
matrix.scale(scalex, scaley);
matrix.rotate(Math.PI * angle / 180);
matrix.tx += x;
matrix.ty += y;
bitmap.transform.matrix = matrix;