最近、getBoundsの存在と、Matrxの便利さにようやく気づきました。

基準点と違う場所を基準にオブジェクトを変形したい場面に遭遇して、
widthやheight、rotationにsin,cosまで持ち出して悩んでたんですが
getBounds + Matrixを使うことでさくっと簡単にできちゃうんですね。


手順は

(1).Matrix.translate でオブジェクトを移動して、基準点を変えて
(2).Matrix.scale,Matrix.rotateでオブジェクトに任意の変形を加えて
(3).Matrix.translate でオブジェクトを元の位置に移動してあげる

の3STEP。


ここで、基準点を変えるときに役に立つのがgetBounds。
getBoundsは表示オブジェクトの領域を、矩形(Rectangle)で返してくれるメソッドで、
基準点の位置や、オブジェクトの変形の状態に関係なく
表示オブジェクトの最小X,Yと領域の幅と高さを簡単に取得できます。

getRectっていうのもあるみたいですが、これは領域に線を含めるgetBoundsに対して、
領域に線を含めないもので、使い方はgetBoundsと同じようです。



例えば、オブジェクトの中心を基準に45度回転させたいってときは

//オブジェクトの現状のマトリクスを取得。
var matrix:Matrix = _object.transform.matrix;

//オブジェクトの領域を取得
var rect:Rectangle = _object.getBouns(_containerOfObject);

//(0,0)にオブジェクトの中心を合わせる。(1)
matrix.translate(-(rect.left + rect.width / 2), -(rect.top + rect.height / 2));

//45度(Math.PI / 4)回転させる(2)
matrix.rotate(45 / 180 * Math.PI);

//もとの位置にオブジェクトを移動する。(3)
matrix.translate(rect.left + rect.width / 2, rect.top + rect.height / 2);

で完成!



右下を基準に、なら
(1)を
matrix.translate(-(rect.left + rect.width), -(rect.top + rect.height));
(3)を
matrix.translate(rect.left + rect.width, rect.top + rect.height);

左上を基準に、なら
(1)を
matrix.translate(-rect.left, -rect.top);
(3)を
matrix.translate(rect.left, rect.top);

てな感じですかね。


ではではよりよいas3ライフを!

HTML5飯