drawPath()を使って図形を描く

|
(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)
まったく新しいAS3の世界!
694a.jpg
Adobe Flash CS4
詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

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

このブログ記事について

このページは、oshigeが2009年7月26日 13:55に書いたブログ記事です。

ひとつ前のブログ記事は「描画コマンドと座標を配列で指定して描く drawPath()」です。

次のブログ記事は「drawPath()を使って渦巻きを描く」です。

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

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