ActionScript 3.0入門ノート CS4でタグ「GraphicsPathCommand」が付けられているもの

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

 次の例はdrowPath()を使って渦巻き状に線を引くサンプルです。このように座標を計算式で求めることで図形を効率よく描けます。

[:script:]drawPath()を使って渦巻きを描く
var r:Number=1;
var rad:Number=2*Math.PI/8;
//描画コマンド
var commands:Vector.<int>=new Vector.<int>();
//描画に使う座標
var data:Vector.<Number>=new Vector.<Number>();
//コマンドと座標を追加する
commands.push(GraphicsPathCommand.MOVE_TO);
data.push(0,0);
for (var i:int=1; i<50; i++) {
	commands.push(GraphicsPathCommand.LINE_TO);
	r=i*i/20;
	var pt:Point=Point.polar(r,rad*i);
	data.push(pt.x,pt.y);
}
//図形を描く
var shape:Shape=new Shape();
shape.graphics.lineStyle(1,0x005500);
shape.graphics.drawPath(commands, data);
shape.x=stage.stageWidth/2;
shape.y=stage.stageHeight/2;
addChild(shape);
fig09-03-02.jpg
(section09-03 Flash Player 10の新しいGraphicsメソッドから抜粋)

 次にdrawPath()を使って図形を描くサンプルを示します。これを実行すると19行目でシェイプが作られ、このシェイプに図形を描画されます。drawPath()での描画はdrawRect()などの描画の手順と同じように図形を塗るならば描画する前にbeginFill()で塗りを開始し、描画終了でendFill()を実行します(20〜22行目)。実際に描画を行っているのは21行目のdrawPath()です。drawPathの3個の引数のcommandsとdataとwindingには、描画で必要となる値を入れておきます。
 commandsとdataはベクターです。ベクターを作るには、new Vector.<ベース型>()のようにベース型(値のデータ型)を指定してインスタンスを作ります。commandsは要素の値がint型なのでを指定します(4行目)。
fig09-03-01.jpg
[:script:]drawPath()を使って図形を描く
var w:int=150;
var h:int=120;
//描画コマンド
var commands:Vector.<int>=new Vector.<int>();
commands.push(GraphicsPathCommand.MOVE_TO);
commands.push(GraphicsPathCommand.LINE_TO);
commands.push(GraphicsPathCommand.CURVE_TO);
commands.push(GraphicsPathCommand.LINE_TO);
//描画に使う座標
var data:Vector.<Number>=new Vector.<Number>();
data.push(0,0);
data.push(w,0);
data.push(w,h);
data.push(0,h);
data.push(0,0);
//描画の交差領域の塗りの処理法
var winding:String=GraphicsPathWinding.EVEN_ODD;
//図形を描く
var shape:Shape=new Shape();
shape.graphics.beginFill(0xFF0000);
shape.graphics.drawPath(commands, data, winding);
shape.graphics.endFill();
shape.x=200;
shape.y=150;
addChild(shape);
 dataベクターを見るとわかるようにこの図形の描画には5個の点を使用し、ベクターには合計10個の値が入ります。commandsでは、dataから値を順に取り出してメソッドを実行していきます。commandsに追加したメソッドとdataの座標とを付き合わせると次のようになっています。moveTo()とlineTo()の引数は2個ですが、curveTo()はコントロールポイントの座標があるので4個の値を必要とします。
data.push(0,0);//moveTo(0,0)
data.push(w,0);//lineTo(w,0)
data.push(w,h);//curveTo(w,h,0,h)
data.push(0,h);
data.push(0,0);//lineTo(0,0)
(section09-03 Flash Player 10の新しいGraphicsメソッドから抜粋)

 moveTo()、lineTo()、curveTo()を使って直線や曲線で座標を結ぶことで図形を描くことができますが、辺の数だけ線を結ぶステートメントが必要です。新しく追加されたdrawPath()では、描画コマンドの配列と座標の配列を指定することで、図形の描画パスを1回で命令できます。drawPath()を使うことで描画スクリプトが簡潔になり、座標を数式で計算したり、外部から読み込む場合などにも対応しやすくなります。

書式
drawPath(commands:Vector, data:Vector, winding:String = "evenOdd"):void

 commandsは描画で使用するメソッドのベクター(データ型を指定した配列)です。使用できるコマンドは基本的にはmoveTo()、lineTo()、curveTo()と同じで、それぞれに1、2、3の数値が割り当ててあります。[1,2,2]ならば、moveTo()、lineTo()、lineTo()の順に実行することになります。dataは描画で使用する座標(x,y)のベクターです。[50,70,100,200,250,300]ならば、(50,70)と(100,200)と(250,300)の3つの点の座標を示しています。

 たとえば、commandsが[1,2,2]でdataが[50,70,100,200,250,300]ならば、moveTo(50,70)、lineTo(100,200)、lineTo(250,300)を実行することになり3つの点を結ぶ直線が引かれます。commandsが[1,3]ならば、moveTo(50,70)、curveTo(100,200,250,300)を実行して、(50,70)から(250,300)への曲線が引かれます。(100,200)の点は曲線を描くためのコントロールポイントの座標として使用されます。

 ところで、commandsには0、4、5の数値に割り当ててあるコマンドもあります。0は何もせずに次のコマンドに進みます。4、5はそれぞれmoveTo()とlineTo()を実行しますが、通常は引数が(x,y)と2個のところを(dummy,dummy,x,y)のように4個の座標値を使用し、最初の2個は無視します。これはcurveTo()で使用するコントロールポイントの座標を無視して描画するためです。先の例のcommandsが[1,3]のところを[1,5]にするとコントロールポイントの座標を無視して(50,70)から(250,300)へ直線で結びます。
 commandsで使用する0〜5の値は、次のようにGraphicsPathCommandクラスでクラス定数として定義してあります。


値  定数              実行するメソッド
0  GraphicsPathCommand.NO_OP  何も実行しない
1  GraphicsPathCommand.MOVE_TO  moveTo(x1,y1)
2  GraphicsPathCommand.LINE_TO  lineTo(x1,y1)
3  GraphicsPathCommand.CURVE_TO  curveTo(x1,y1,x2,y2)
4  GraphicsPathCommand.WIDE_MOVE_TO  値を2個とばしてmoveTo(x2,y2)
5  GraphicsPathCommand.WIDE_LINE_TO  値を2個とばしてlineTo(x2,y2)


 最後のwindingは図形が交差した領域を塗るかどうかを決めるパラメータです。値は"evenOdd"または"nonZero"をとります。この値については後ほどサンプルを示します。
まったく新しいAS3の世界!
694a.jpg
Adobe Flash CS4
詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

楽しいActionScript。
新たなる1歩へと踏み出しましょう。
■内容は?→ 目次を見る
■評判は?→ 書評を読む
この本を書いたわけ

タグ

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

あわせて読みたいブログパーツ