IGraphicsData使って描画する

（section09-03 Flash Player 10の新しいGraphicsメソッドから抜粋）

　drawPath()は描画コマンドと座標をセットにしてパスを描くメソッドですが、実際にはさらに線のスタイル、塗りのスタイルを組み合わせることで図形の描画が完成します。　drawGraphicsData()は、これらの描画に必要な値をgraphicsDataベクターにまとめ、drawGraphicsData(graphicsData)のように実行することで図形の描画を完成させることができます。
　次のHexagonクラスではdrawGraphicsData()を使って六角形の図形を描いています。スクリプトを見るとわかるように引数のgraphicsDataはstroke、fill、pathの３つの値が入っているベクターです（47〜49行目）。

var graphicsData:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
graphicsData.push(stroke, fill, path);
graphics.drawGraphicsData(graphicsData);

　stroke、fill、pathは、それぞれが線のスタイル、塗りのスタイル、描画パスを示すデータです。Hexagonクラスでは、これらの３つのデータをsetStroke()、setFill()、setPath()で作成しています。

[:script:]六角形のスプライトを作るHexagonクラス

package {
	import flash.display.*;
	import flash.geom.Matrix;
	import flash.geom.Point;

	public class Hexagon extends Sprite {
		var stroke:GraphicsStroke;
		var path:GraphicsPath;
		var fill:GraphicsGradientFill;
		var r:Number;
		public function Hexagon(size:int) {
			r=size/2;
			setStroke();
			setFill();
			setPath();
			drawGraphics();
		}
		//線のスタイル
		protected function setStroke():void {
			stroke=new GraphicsStroke(2);
			stroke.joints=JointStyle.MITER;
			stroke.fill=new GraphicsSolidFill(0xFF0000);
		}
		//グラデーションでの塗り
		protected function setFill():void {
			fill = new GraphicsGradientFill();
			fill.colors=[0xFF0000,0xFFFF00];
			fill.matrix = new Matrix();
			fill.matrix.createGradientBox(2*r,2*r,Math.PI/4,-r,-r);
		}
		//描画パス
		protected function setPath():void {
			path=new GraphicsPath();
			path.winding=GraphicsPathWinding.NON_ZERO;
			for(var i:int=0;i<6;i++){
				var pt:Point=Point.polar(r,2*Math.PI/6*i);
				if(i==0){
					path.moveTo(r,0);
				}else{
					path.lineTo(pt.x,pt.y);
				}
			}
			path.lineTo(r,0);
		}
		//グラフィックスデータを使って図形を描く
		protected function drawGraphics():void {
			var graphicsData:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
			graphicsData.push(stroke, fill, path);
			graphics.drawGraphicsData(graphicsData);
		}
	}
}

　次のフレームアクションはHexagonクラスを試すスクリプトです。sizeは六角形の対角線の長さです。基準点は六角形の中心に作られます。

[:script:]Hexagonクラスを使って六角形のスプライトを作る

var size:int=180;
var hexagonSp:Hexagon=new Hexagon(size);
hexagonSp.x=200;
hexagonSp.y=150;
addChild(hexagonSp);

カテゴリ:

カテゴリ:

タグ:

カテゴリ

検索

このブログ記事について