Matrix

Matrix クラス

[内容]

　　図形の平行移動，拡大・縮小，回転，傾斜（アフィン変換）を行います．変換は，右に示すような行列を通して行われ，各要素の意味は以下に示すとおりです．なお，変換は図形が存在する座標系の原点を基準として，座標軸に対して行われるため，原点以外の場所にある図形の変換，例えば回転を行うと，回転だけでなく位置も移動します．具体的には，使用例１を参照してください．

平行移動　　x 軸に沿って t_x，y 軸に沿って t_y だけ，座標軸を平行移動します．
拡大・縮小　　x 軸方向に a 倍，y 軸方向に b 倍します．
回転　　座標軸を反時計方向に q ラジアン回転します．結果として，図形は -q ラジアンだけ回転された状態になります．
傾斜　　x 軸に沿って qx ラジアン，y 軸に沿って qy ラジアンだけ図形を傾斜させます．

継承：　Matrix → Object

[プロパティ]

a : Number
　　a
b : Number
　　b
c : Number
　　c
d : Number
　　d
tx : Number
　　t_x
ty : Number
　　t_y

[メソッド]

Matrix(a:Number = 1, b:Number = 0, c:Number = 0, d:Number = 1, tx:Number = 0, ty:Number = 0)
　　コンストラクタ
concat(m:Matrix):void
　　変換マトリックスの連結（ 2 つの変換を同時に行う）
createGradientBox(width:Number, height:Number, rotation:Number = 0, tx:Number = 0, ty:Number = 0):void
　　Graphics クラスの beginGradientFill() メソッドおよび lineGradientStyle() メソッドで使用するスタイルを作成する．width と height は，グラディエーションをかける領域の大きさであり，残りの引数は，回転角と平行移動量である． -> 使用例２
deltaTransformPoint(point:Point):Point
　　与えられた点の変換後の座標（平行移動を考慮しない）
identity():void
　　変換マトリックスを初期状態に戻す
invert():void
　　逆変換
rotate(angle:Number):void
　　回転角の設定
scale(sx:Number, sy:Number):void
　　拡大・縮小率の設定
transformPoint(point:Point):Point
　　与えられた点の変換後の座標
translate(dx:Number, dy:Number):void
　　平行移動量の設定

[使用例]

使用例１：　「Matrix クラスの使用例」と，そのプログラム（ Matrix_e.as ）です．左上は，x 軸方向に 30 ピクセル，y 軸方向に 15 ピクセル移動しています．右上は，x 軸方向に 1.2 倍，y 軸方向に 0.8 倍しています．左下は，座標軸を反時計方向に 30 度回転しています．また，右下は，x 軸に沿って 30 度傾けています．

package
{
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.geom.Matrix;

	[SWF(backgroundColor="0xeeffee", width="400", height="300", frameRate="20")]

	public class Matrix_e extends Sprite
	{
		public function Matrix_e()
		{
			init();
		}
		
		private function init():void
		{
			var box11 : Shape = new Shape();
			box11.graphics.lineStyle(2, 0x000000);
			box11.graphics.drawRect(50, 37, 100, 75);
			addChild(box11);
			trace("box11 : " + box11.transform.pixelBounds);

			var box21 : Shape = new Shape();
			box21.graphics.lineStyle(2, 0x000000);
			box21.graphics.drawRect(250, 37, 100, 75);
			addChild(box21);

			var box31 : Shape = new Shape();
			box31.graphics.lineStyle(2, 0x000000);
			box31.graphics.drawRect(50, 187, 100, 75);
			addChild(box31);

			var box41 : Shape = new Shape();
			box41.graphics.lineStyle(2, 0x000000);
			box41.graphics.drawRect(250, 187, 100, 75);
			addChild(box41);
					// 平行移動
			var box12 : Shape = new Shape();
			box12.graphics.lineStyle(2, 0xff0000);
			box12.graphics.drawRect(50, 37, 100, 75);
			addChild(box12);
			box12.transform.matrix = new Matrix(1, 0, 0, 1, 30, 15);
			trace("box12 : " + box12.transform.pixelBounds);
					// 拡大・縮小
			var box22 : Shape = new Shape();
			box22.graphics.lineStyle(2, 0xff0000);
			box22.graphics.drawRect(0, 0, 100, 75);
			addChild(box22);
			box22.transform.matrix = new Matrix(1.2, 0, 0, 0.8, 0, 0);
			box22.x = 250;
			box22.y = 37;
			trace("box22 : " + box22.transform.pixelBounds);
					// 回転（ 30 度）
			var box32 : Shape = new Shape();
			box32.graphics.lineStyle(2, 0xff0000);
			box32.graphics.drawRect(0, 0, 100, 75);
			addChild(box32);
			var ang : Number = 30.0 * Math.PI / 180.0;
			box32.transform.matrix = new Matrix(Math.cos(ang), Math.sin(ang), -Math.sin(ang), Math.cos(ang), 0, 0);
			box32.x = 50;
			box32.y = 187;
			trace("box32 : " + box32.transform.pixelBounds);
					// 傾斜（ 30 度）
			var box42 : Shape = new Shape();
			box42.graphics.lineStyle(2, 0xff0000);
			box42.graphics.drawRect(0, 0, 100, 75);
			addChild(box42);
			box42.transform.matrix = new Matrix(1, 0, Math.tan(ang), 1, 0, 0);
			box42.x = 250;
			box42.y = 187;
			trace("box42 : " + box42.transform.pixelBounds);
		}
	}
}

　　変換前及び変換後の各オブジェクトの大きさは以下のようになります．

box11 : (x=49, y=36, w=102, h=77)
box12 : (x=79, y=51, w=102, h=77)
box22 : (x=248, y=36, w=123, h=62)
box32 : (x=11, y=185, w=127, h=118)
box42 : (x=248, y=186, w=147, h=77)

使用例２：　Matrix クラスの「 createGradientBox() メソッドの使用例」と，そのプログラム（ Matrix_g.as ）です．左は水平方向に，右は斜め（ 45 度方向）にグラディエーションをかけています．

package
{
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.display.GradientType;
	import flash.display.SpreadMethod;
	import flash.display.InterpolationMethod;
	import flash.geom.Matrix;

	[SWF(backgroundColor="0xeeffee", width="400", height="200", frameRate="20")]

	public class Matrix_g extends Sprite
	{
		public function Matrix_g()
		{
			init();
		}
		
		private function init():void
		{
			var color : Array = [0x00ff00, 0x0000ff];
			var alpha : Array = [1, 1];
			var ratio : Array = [0, 255];
					// 横方向
			var mt1 : Matrix = new Matrix();
			mt1.createGradientBox(100, 100);
			var box1 : Shape = new Shape();
			box1.graphics.lineStyle(1);
			box1.graphics.lineGradientStyle(GradientType.LINEAR, color, alpha, ratio, mt1, SpreadMethod.PAD, InterpolationMethod.LINEAR_RGB );
			box1.graphics.beginGradientFill(GradientType.LINEAR, color, alpha, ratio, mt1, SpreadMethod.PAD, InterpolationMethod.LINEAR_RGB );
			box1.graphics.drawRect(0, 0, 100, 100);
			box1.graphics.endFill();
			box1.x = 50;
			box1.y = 50;
			addChild(box1);
					// 斜め
			var mt2 : Matrix = new Matrix();
			mt2.createGradientBox(100, 100, Math.PI/4);
			var box2 : Shape = new Shape();
			box2.graphics.lineStyle(1);
			box2.graphics.lineGradientStyle(GradientType.LINEAR, color, alpha, ratio, mt2, SpreadMethod.PAD, InterpolationMethod.LINEAR_RGB );
			box2.graphics.beginGradientFill(GradientType.LINEAR, color, alpha, ratio, mt2, SpreadMethod.PAD, InterpolationMethod.LINEAR_RGB );
			box2.graphics.drawRect(0, 0, 100, 100);
			box2.graphics.endFill();
			box2.x = 250;
			box2.y = 50;
			addChild(box2);
		}
	}
}

[参照]

Graphics クラス， Transform クラス