静岡理工科大学 菅沼ホーム ActionScript 目次 索引

Matrix クラス

[内容]

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

継承: Matrix → Object

[プロパティ]

[メソッド]

[使用例]

  1. 使用例1 : 「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)
    			

  2. 使用例2 : 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 クラス

静岡理工科大学 菅沼ホーム ActionScript 目次 索引