as3のMatrixクラスを使ったムービークリップの変形

| コメント(0) | トラックバック(0)
as3のflash.geom.Matrixクラスを使うと、変換行列を使ったオブジェクトの変形を行うことができます。

一般的に、オブジェクトの変形は、そのオブジェクトのtransformプロパティを再設定することで行います。変換行列による変換は、このtransformプロパティに変換行列を適用して、再設定してやればできます。

以下、とりあえず、簡単に出来る変換について、サンプルとソースです。
MatrixTest.zip

以下、今回のサンプルの肝な部分です。

平行移動

function translate(target:MovieClip, tx:Number, ty:Number) {
	var mat:Matrix = target.transform.matrix;
	mat.translate(tx, ty);
	target.transform.matrix = mat;
}
拡大・縮小

function scale(target:MovieClip, sx:Number, sy:Number) {
	var mat:Matrix = target.transform.matrix;
	mat.scale(sx, sy);
	target.transform.matrix = mat;
}
回転

function rotate(target:MovieClip, q:Number) {
	var radians:Number = q * Math.PI / 180;
	var mat:Matrix = target.transform.matrix;
	mat.rotate(radians);
	target.transform.matrix = mat;
}
基本的な流れは、以下の通りです。
  1. 変換するオブジェクトの変換行列を取得
  2. 取得した変換行列に対して、変換を適用
  3. 変換するオブジェクトへの再設定
回転変換は、パラメータとして渡された値をラジアンに変換していますが、それ以外はほぼ同じ流れです。

また、変換行列を初期化することで、元の状態にもどすこともできます。

リセット

function reset(target:MovieClip) {
	var mat:Matrix = new Matrix();
	target.transform.matrix = mat;
}

5/19追記:
ソースを載せるのを忘れてたので追加しました。

あと、一つとても重要なことが抜けていたのですが、これらの変換はそのオブジェクトの位置する座標系を基準として行われます。

ソースを見てもらえば分かりますが、今回はオブジェクトの中心の座標が(0,0)になるようにしてあるので、回転や拡大では単純にオブジェクトが回転、拡大していますが、(0,0)座標が違う場所にあると、そこを基準として変換がされるので注意してください。

8/9追記:
上記の5/19追記に関して、ムービークリップ自身の座標系を基準として変形する方法をまとめました。

トラックバック(0)

トラックバックURL: http://www.1010real.com/mt/mt-tb.cgi/4

コメントする