2008-03-05に投稿

画像の回転

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

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

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

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

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

|java|
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;
||

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント