Chap09 図形の描画: 2009年7月アーカイブ

（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()で作成しています。

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

　drawPath()の第３引数で設定するwindingプロパティは図形のパスが交差してできる領域を塗るかどうかの湾曲規則を指定します。初期値では"evenOdd"になっていて、重なりが奇数回の場合に塗ります。
　次の例ではdata1、data2、data3と３つの図形が重なったパスを使って図形を描いています。このとき、２度重なっている部分は色が塗られず、３回重なっている部分は色が塗られているのがわかります。

[:script:]重なりがある図形をwindingプロパティを"evenOdd"で塗る

var w:int=120;
var h:int=150;
var data1:Array=[0,0, w,0, w,h, 0,h, 0,0];
var data2:Array=[25,25, w+25,25, w+25,h+25, 25,h+25, 25,25];
var data3:Array=[50,50, w+50,50, w+50,h+50, 50,h+50, 50,50];
var datalist:Array=data1.concat(data2,data3);
var commands:Vector.<int>=Vector.<int>([1,2,3,2, 1,2,3,2, 1,2,2,2,2]);
var data:Vector.<Number>=Vector.<Number>(datalist);
//描画の交差領域の塗りの処理法
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);

　windingプロパティのもう一方の値は"nonZero"です。この値はGraphicsPathWinding.NON_ZEROとして定数が定義してあります。windingプロパティを"nonZero"に設定すると湾曲タイプ（点を順に線で結ぶ方向）が時計回りか反時計回りかで図形を区別します。時計回りの値を+1、反時計回りの値を-1とし、重なっている領域はこの値を合計します。そして、値の合計が0の領域は塗らず、0以外の領域は塗ります。
　次の例ではすべてがdata1、data2、data3の全部が時計回りで+1なので、重なっている領域で合計が0になるところはありません。したがって、すべての領域が塗られます。

（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);

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

　次にdrawPath()を使って図形を描くサンプルを示します。これを実行すると19行目でシェイプが作られ、このシェイプに図形を描画されます。drawPath()での描画はdrawRect()などの描画の手順と同じように図形を塗るならば描画する前にbeginFill()で塗りを開始し、描画終了でendFill()を実行します（20〜22行目）。実際に描画を行っているのは21行目のdrawPath()です。drawPathの３個の引数のcommandsとdataとwindingには、描画で必要となる値を入れておきます。
　commandsとdataはベクターです。ベクターを作るには、new Vector.<ベース型>()のようにベース型（値のデータ型）を指定してインスタンスを作ります。commandsは要素の値がint型なのでを指定します（4行目）。

[: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ベクターを見るとわかるようにこの図形の描画には５個の点を使用し、ベクターには合計10個の値が入ります。commandsでは、dataから値を順に取り出してメソッドを実行していきます。commandsに追加したメソッドとdataの座標とを付き合わせると次のようになっています。moveTo()とlineTo()の引数は２個ですが、curveTo()はコントロールポイントの座標があるので４個の値を必要とします。

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()では、描画コマンドの配列と座標の配列を指定することで、図形の描画パスを１回で命令できます。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)の３つの点の座標を示しています。

　たとえば、commandsが[1,2,2]でdataが[50,70,100,200,250,300]ならば、moveTo(50,70)、lineTo(100,200)、lineTo(250,300)を実行することになり３つの点を結ぶ直線が引かれます。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)と２個のところを(dummy,dummy,x,y)のように４個の座標値を使用し、最初の２個は無視します。これは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"をとります。この値については後ほどサンプルを示します。

（section09-02 図形の塗りと線の塗りから抜粋）

　線をビットマップで描く方法も基本的に同じです。線幅などのスタイルはlineStyle()で指定します。このとき、lineStyle()の設定をlineBitmapStyle()よりも先に行います。次のサンプルの線幅は40に指定しています（7行目）。円の塗りパターンに使う花柄のビットマップデータはビットマップシンボルから作っています（5行目）。
　線をビットマップデータのパターンで塗るにはlineBitmapStyle()を実行します。第２引数の変換マトリックスではビットマップデータを80%に縮小し、60度回転させています（9〜13行目）



[:script:]円をビットマップデータの線で描く

var shape1:Shape=new Shape();
var w:int=250;
var h:int=200;
//ビットマップデータを作る
var bmpdata:BitmapData=new PatternImg(0,0);
//線幅を設定する
shape1.graphics.lineStyle(40);
//変換マトリックス
var mtrx:Matrix=new Matrix();
mtrx.scale(0.8,0.8);
mtrx.rotate(Math.PI/3);
//線をビットマップデータのパターンで塗る
shape1.graphics.lineBitmapStyle(bmpdata,mtrx,true,true);
//円を描く
shape1.graphics.drawCircle(0,0,80);
//ステージに置く
shape1.x=stage.stageWidth/2;
shape1.y=stage.stageHeight/2;
addChild(shape1);

（section09-02 図形の塗りと線の塗りから抜粋）

　図形や線をビットマップデータで塗ることができます。図形をビットマップデータで塗るにはbeginBitmapFill()、線をビットマップデータで塗るにはlineBitmapStyle()でそれぞれ塗りに使うビットマップデータや塗り方を指定します。

書式：図形をビットマップで塗る
beginBitmapFill(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false):void

書式：線をビットマップで塗る
lineBitmapStyle(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false):void

　bitmapdataはビットマップデータです。ビットマップデータはBitmapDataクラスで作りますが、ビットマップシンボルや外部イメージファイルから読み込んで作るといったこともできます。matrixはグラデーションの塗りでも使用した変形マトリックスです。ビットマップの拡大縮小や回転などを設定できます。
　repeatはビットマップのサイズより大きな領域を塗ったときにビットマップのパターンを繰り返すかどうかをtrue、falseで指定します。falseを指定した場合はパターンの繰り返しを行わずにビットマップの境界の色がそのまま連続します。smoothは伸縮したビットマップにスムージング処理のアルゴリズムを適用するかどうかを指定します。trueに設定するとスムーズになりますが、表示の処理はfaleのほうが高速です。


図形をビットマップで塗る
　次のサンプルはスクリプトで描いた四角形をビットマップシンボルのビットマップデータで塗っています。ビットシンボルからビットマップデータを取り出すには、ビットマップシンボルのリンケージ書き出し設定を行い、new演算子でインスタンス化します（4行目）。このとき、EZ_logo(0,0)のように２個の数値の引数が必要です。数値の大きさには意味がありません。
　ビットマップデータが作れたならば、図形を描く前にbeginBitmapFill()を実行し、図形を描いたらendFill()を実行します。beginBitmapFill()の第２引数の変換マトリックスは45度回転させています。第４引数のsmoothもtrueにしているので、パターンを回転させていてもイメージのジャギーが目立たずにスムーズです（9行目）。

　

[:script:]ビットマップデータのパターンで塗った円形を描く

var shape1:Shape=new Shape();
var r:int=150;
//ビットマップデータを作る
var bmpdata:BitmapData=new EZ_logo(0,0);
//変換マトリックス
var mtrx:Matrix=new Matrix();
mtrx.rotate(Math.PI/4);
//図形をビットマップデータのパターンで塗る
shape1.graphics.beginBitmapFill(bmpdata,mtrx,true,true);
//円を描く
shape1.graphics.drawCircle(0,0,r);
//塗り終わり
shape1.graphics.endFill();
//ステージの中央に置く
shape1.x=stage.stageWidth/2;
shape1.y=stage.stageHeight/2;
addChild(shape1);

（section09-02 図形の塗りと線の塗りから抜粋）

　線をグラデーションで塗りたい場合は、先にlineStyle()で線の太さや両端の形などを指定し、続いてlineGradientStyle()を実行してグラデーションを指定します。線の設定を行ったならば線や図形を描きます。
　次の例は黄色と黒の斜めのグラデーションで線を縞々に塗っています。縞々の繰り返しのグラデーションにするには、spreadオプションをSpreadMethod.REFLECTかSpreadMethod.REPEATのどちらかにします。SpreadMethod.REPEATは単純な繰り返しですが、SpreadMethod.REFLECTは色の変化が反転するように繰り返されます（14行目）。縞の幅はcreateGradientBox()の第１引数で10に設定しています（12行目）。



[:script:]]四角形の線を斜めの縞々で塗る

var shape1:Shape=new Shape();
var w:int=250;
var h:int=200;
//線幅
shape1.graphics.lineStyle(15);
//線のグラデーション
var type:String=GradientType.LINEAR;
var colors:Array=[0xFFFF00,0x000000];
var alphas:Array=[1, 1];
var ratios:Array=[0,255];
var mtrx:Matrix=new Matrix();
mtrx.createGradientBox(10,h,0,0,0)
mtrx.rotate(Math.PI/4);
var spread:String=SpreadMethod.REFLECT;
shape1.graphics.lineGradientStyle(type,colors,alphas,ratios,mtrx,spread);
//四角形を描く
shape1.graphics.beginFill(0xFFFF99);
shape1.graphics.drawRect(0,0,w,h);
shape1.graphics.endFill();
//ステージの中央に置く
shape1.x=stage.stageWidth/2-w/2;
shape1.y=stage.stageHeight/2-h/2;
addChild(shape1);

（section09-02 図形の塗りと線の塗りから抜粋）

　図形や線をグラデーションで塗ることができます。図形をグラデーションで塗るにはbeginGradientFill()、線をグラデーションで塗るにはlineGradientStyle()でそれぞれグラデーションの色やタイプを指定します。

書式：図形をグラデーションで塗る
beginGradientFill(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void

書式：線をグラデーションで塗る
lineGradientStyle(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void

　typeはグラデーションのタイプをGradientType.LINEAR（線状）またはGradientType.RADIAL（放射状）のどちらかで指定します。colorsはグラデーションする色の配列です。たとえば、赤から緑のグラデーションならば[0xFF0000,0x00FF00]、赤緑青の三色のグラデーションならば[0xFF0000,0x00FF00,0x0000FF]のように指定します。alphasはそれぞれの色のアルファ値を配列で指定します。ratiosはグラデーションの各色の開始位置を比率（0〜255）で指定します。2色のグラデーションで両端が指定色になるようにするならば[0,255]になり、最初は１色で後半からグラデーションを開始するようにするには[127,255]のように指定します。
　matrixではグラデーションの幅と高さ、平行移動、回転、縮尺などを変換マトリックスを使って指定します。変換マトリックスはMatrixクラスのインスタンスを作り、createGradientBox()、translate()、scale()、rotate()といったメソッドを利用して変換の値を設定します。
　spreadMethodはグラデーションの広がりをSpreadMethod.PAD、SpreadMethod.REFLECT、SpreadMethod.REPEATから選びます。focalPointRatioはグラデーションの焦点を決める値（-1〜1）です。

（section09-01 基本的な図形を描くから抜粋）

　BezierSegmentクラスを利用すると比較的簡単にベジェ曲線を描くことができます。ベジェ曲線を描くには線の始点aと終点dのアンカーポイントと曲線の向きを決める２個のコントロールポイントb、cが必要です。BezierSegmentクラスのコンストラクタではこれらの４点のPointオブジェクトをa、b、c、dの順で引数として与えます。

書式
var bezier:BezierSegment=new BezierSegment(a:Point, b:Point, c:Point, d:Point);

　a、b、c、dの各点を図で示すと次のようになります。

　BezierSegmentクラスのインスタンスを作ると、コンストラクタで指定したアンカーポイントとコントロールポイントをもったベジェ曲線が作られます。ただし、BezierSegmentクラスには曲線を描くメソッドはなく、ベジェ曲線の軌跡の座標が計算されるだけです。ベジェ曲線を線として描くためには、getValue()を利用して曲線の途中の点の座標を求めて直線でつないでいきます。
　getValue()はPointクラスのinterpolate()と同じようなメソッドで、曲線を始点の位置を0、終点の位置を1として比率で途中の点を示します。たとえば、全体をtCnt分割するならば、t番目の位置の座標はbezier.getValue(t/tCnt)になります。分割するtCntの数が多いほど曲線の途中の点を細かく取ることになり、より滑らかな曲線を描けますが、その分だけ処理は重くなります。
　次のサンプルではステージのb_mcとc_mcの座標をコントロールポイントに使って、a_mcとc_mcの間にベジェ曲線を描いてます。便宜上、a-b、d-cを結ぶ補助線も引いていますが、もちろんこの線がなくてもベジェ曲線は描かれます



[:script:]ベジェ曲線を描く

import fl.motion.BezierSegment;
//アンカーポイントa,b　コントロールポイントb,c
var a:Point=new Point(a_mc.x,a_mc.y);
var b:Point=new Point(b_mc.x,b_mc.y);
var c:Point=new Point(c_mc.x,c_mc.y);
var d:Point=new Point(d_mc.x,d_mc.y);
//補助線を描く
graphics.lineStyle(1,0x666666);
graphics.moveTo(a.x,a.y);
graphics.lineTo(b.x,b.y);
graphics.moveTo(d.x,d.y);
graphics.lineTo(c.x,c.y);
//ベジェ曲線を描く
var bezier:BezierSegment=new BezierSegment(a,b,c,d);
var tCnt:int=100;//曲線上の点の個数
graphics.lineStyle(2);
graphics.moveTo(a.x,a.y);
for (var t=0; t<=tCnt; t++) {
	//曲線上の点
	var tmpPt:Point=bezier.getValue(t/tCnt);
	//前の点と直線で結ぶ
	graphics.lineTo(tmpPt.x,tmpPt.y);
}

（section09-01 基本的な図形を描くから抜粋）

　シェイプやスプライトで描く図形の活用としてマスクをあげることができます。次の例では写真のムービークリップインスタンスに円を描いたシェイプをマスクとして設定し、写真を円形に切り抜いて表示しています。

　

[:script:]写真にシェイプマスクをかける

//コンテナを作る
var container:Sprite=new Sprite();
container.x=100;
container.y=50;
addChild(container);
//写真のmcを作る
var photo_mc:MovieClip=new Photo();
//マスクに使うシェイプを作る
var shape1:Shape=new Shape();
shape1.graphics.beginFill(0xFF0000);
shape1.graphics.drawCircle(0,0,100);
shape1.graphics.endFill();
shape1.x=photo_mc.width/2;
shape1.y=photo_mc.height/2;
//コンテナに追加する
container.addChild(photo_mc);
container.addChild(shape1);
//shape1をphoto_mcのマスクに設定する
photo_mc.mask=shape1;

（section09-01 基本的な図形を描くから抜粋）

　描いた図形や線を消すにはclear()を実行します。描画によるアニメーションを行うには、描画とclear()を繰り返します。
　次のサンプルは曲線の描き方で使ったcurveTo.flaを改良し、線を結ぶインスタンスをドラッグできるようにしたものです。インスタンスをドラッグすると、それに合わせて線が再描画されます（36〜45行目）。

→swfを試す

[:script:]ドラッグできるインスタンスを直線と曲線で結ぶ

var shape1:Shape=new Shape();
var stageRect:Rectangle=new Rectangle(0,0,stage.stageWidth,stage.stageHeight);
//ステージに配置する
shape1.x=0;
shape1.y=0;
addChild(shape1);

//最初に線を引く
updateLines();

//頂点をドラッグできるようにする
pt1.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
pt2.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
ctrlPt.addEventListener(MouseEvent.MOUSE_DOWN, onStartDrag);
stage.addEventListener(MouseEvent.MOUSE_UP, onStopDrag);

//ドラッグ開始
function onStartDrag(eventObj:MouseEvent):void {
	var mc:MovieClip=eventObj.target as MovieClip;
	mc.startDrag(false,stageRect);
	stage.addEventListener(MouseEvent.MOUSE_MOVE,updateLines);
}

//ドラッグ終了
function onStopDrag(eventObj:MouseEvent):void {
	stopDrag();
	stage.removeEventListener(MouseEvent.MOUSE_MOVE,updateLines);
}

//ドラッグ中は再描画する
function updateLines(eventObj:MouseEvent=null):void {
	if (eventObj != null) {
		//ドラッグに合わせて画面更新
		eventObj.updateAfterEvent();
	}
	//描画を消す
	shape1.graphics.clear();
	//pt1-pt2の曲線を引く
	shape1.graphics.lineStyle(1,0x000000);
	shape1.graphics.moveTo(pt1.x,pt1.y);
	shape1.graphics.curveTo(ctrlPt.x,ctrlPt.y,pt2.x,pt2.y);
	//pt1-ctrlPtの接線を引く
	shape1.graphics.lineStyle(1,0x666666);
	shape1.graphics.moveTo(pt1.x,pt1.y);
	shape1.graphics.lineTo(ctrlPt.x,ctrlPt.y);
}

（section09-01 基本的な図形を描くから抜粋）

　endFill()を実行しなくても図形の塗りは実行されます。たとえば、次のように円を描いた場合、endFill()を実行しなくても図形が塗られます。

[:script:]endFill()を実行していない

var sp:Sprite=new Sprite();
sp.graphics.beginFill(0xFF0000);
sp.graphics.drawCircle(0,0,100);
sp.x=200;
sp.y=150;
addChild(sp);

　では、endFill()は必要ないかと言えばそうではありません。次のように重なるように円を描いた場合、塗りが重なっている部分は塗られません。

[:script:]円を重ねて描くと、塗りが重なった部分が塗られません。

var sp:Sprite=new Sprite();
sp.graphics.beginFill(0xFF0000);
sp.graphics.drawCircle(0,0,100);
sp.graphics.drawCircle(-80,0,50);
sp.x=200;
sp.y=150;
addChild(sp);

　２つの円がどちらも塗られるようにするには、図形の塗りの終了ごとにendFill()を実行することで円を１個ずつ塗ります。

[:script:]重なっている円を塗る

var sp:Sprite=new Sprite();
//塗りの開始
sp.graphics.beginFill(0xFF0000);
sp.graphics.drawCircle(0,0,100);
sp.graphics.endFill();
//塗り終了
//塗りの開始
sp.graphics.beginFill(0xFF0000);
sp.graphics.drawCircle(-80,0,50);
sp.graphics.endFill();
//塗り終了
sp.x=200;
sp.y=150;
addChild(sp);

（section09-01 基本的な図形を描くから抜粋）

　図形の内部を塗るには図形の描画を開始する前にbeginFill()を実行し、図形の描画が終わったならばendFill()で塗りを終了します。beginFill()では塗り色と塗りの透明度を指定できます。
　次のサンプルではpt1からpt2、pt2からpt3の直線を２本引いています。２本の線では図形として閉じていませんが、塗りを行うと自動的にpt3からpt1への線が引かれて３点を頂点とした三角形になり、内部が塗られます。


[:script:]図形を塗りつぶす

var pt1:Point=new Point(0,0);
var pt2:Point=new Point(150,100);
var pt3:Point=new Point(80,150);
var sp:Sprite=new Sprite();
//線のスタイル
sp.graphics.lineStyle(3,0x000000);
//塗り始め
sp.graphics.beginFill(0x999999);
//線を引く
sp.graphics.moveTo(pt1.x,pt1.y);
sp.graphics.lineTo(pt2.x,pt2.y);
sp.graphics.lineTo(pt3.x,pt3.y);
//塗り終わり
sp.graphics.endFill();
sp.x=100;
sp.y=100;
addChild(sp);

　また、線のスタイルを指定している6行目を取り去ると線が引かれれなくなりますが、線は見えなくても図形の塗りが行われます。

（section09-01 基本的な図形を描くから抜粋）

　曲線はcurveTo()を使って引きます。描き方の手順はlineTo()を使った直線の描き方と基本的に同じですが、curveTo()では曲線の終点とは別に曲線の接線方向を示すコントロールポイントを指定します。
　次の例ではステージにpt1、pt2、ctrlPtの３つのインスタンスが作ってあります。そして、ctrlPtをコントロールポイントの座標に使い、始点pt1と終点pt2を結ぶ曲線を引きます（2〜5行目）。
　さらに始点pt1とコントロールポイントctrlPの直線も描いています。始点pt1とコントロールポイントctrlPの直線を引くと、この直線を接線として曲線が描かれているのがわかります（7〜9行目）。
　なお、lineTo()、curveTo()で指定する座標はshape1のローカル座標ですが、pt1、pt2、ctrlPtの座標はステージを基準としたグローバル座標です。この座標を合わせるためにshape1はステージの(0,0)の位置にaddChild()します。

→swfを試す

[:script:]曲線を引く

var shape1:Shape=new Shape();
//pt1-pt2の曲線を引く
shape1.graphics.lineStyle(1,0x000000);
shape1.graphics.moveTo(pt1.x,pt1.y);
shape1.graphics.curveTo(ctrlPt.x,ctrlPt.y,pt2.x,pt2.y);
//pt1-ctrlPtの接線を引く
shape1.graphics.lineStyle(1,0x666666);
shape1.graphics.moveTo(pt1.x,pt1.y);
shape1.graphics.lineTo(ctrlPt.x,ctrlPt.y);
//ステージに配置する
shape1.x=0;
shape1.y=0;
addChild(shape1);

（section09-01 基本的な図形を描くから抜粋）

　次の例はJapanと書いたjapan_mcインスタンスにトゲを刺すように線を引いています。まず、japan_mcの矩形内のランダムな点pt1(pt1x,pt1y)を求めます（9、10行目）。その座標をグローバル座標の点pt1に変換し、pt1がjapan_mcのイメージと衝突しているかどうかをhitTestPoint()で判定します（15行目）。そして、衝突しているならばその点を線を引く始点pt1にし、線の終点pt2は、ランダムに決めた線の長さと角度からPoint.polar(lineLength,rad)で計算します（19〜24行目）。そのままではpt2は(0,0)からの点になるので、pt1の位置からの距離と角度になるようにoffset()で座標を補正します（25行目）。これで線の始点pt1と終点pt2が決まったので、pt1にペン先を移動してpt2までの線を引きます（27、28行目）。

→swfを試す

[:script:]インスタンスにトゲを刺すように線を引く

//線（トゲ）の本数
var num:int=4000;
//線を描くシェイプ
var lines_shape:Shape=new Shape();
addChild(lines_shape);
//線を繰り返し描く
for (var i=1; i<=num; i++) {
	//線の始点pt1の座標
	var pt1x:Number=japan_mc.width*Math.random();
	var pt1y:Number=japan_mc.height*Math.random();
	var pt1:Point=new Point(pt1x,pt1y);
	//pt1をグローバル座標に変換する
	pt1=japan_mc.localToGlobal(pt1);
	//始点pt1がjapan_mcに刺さっているならば線を描く
	if (japan_mc.hitTestPoint(pt1.x,pt1.y,true)) {
		//線のスタイル
		var lineColor:Number=0xFFFFFF*Math.random();
		lines_shape.graphics.lineStyle(1,lineColor,0.6);
		//線の長さ
		var lineLength:Number=3+17*Math.random();
		//線の角度
		var rad:Number=2*Math.PI*Math.random();
		//線の終点pt2を求める
		var pt2:Point=Point.polar(lineLength,rad);
		pt2.offset(pt1.x,pt1.y);
		//線を引く
		lines_shape.graphics.moveTo(pt1.x,pt1.y);
		lines_shape.graphics.lineTo(pt2.x,pt2.y);
	}
}

　＊元々はここまでのサンプルだったんですが、せっかくなのでトゲが動くバージョンも作りました。（書籍には動くスクリプトも掲載してあります）
→トゲが動くバージョン

（section09-01 基本的な図形を描くから抜粋）

　直線を描くにはmoveTo()とlineTo()を使います。moveTo()は線を引き始める座標にペン先を移動します。lineTo()は現在のペン先位置から指定の座標まで直線を引きます。次の例では円を描いた後に円の中心を水平に横切る直線を引いています。横線を引く前にlineStyle()を設定し直しているので、横線は円の線とは違うスタイルで引かれます。
→swfを試す


[:script:]円に横線を引く

var shape1:Shape=new Shape();
shape1.graphics.lineStyle(5,0x666666);
//円を描く
var r:int=40;
shape1.graphics.drawCircle(0,0,r);
//横線を引く
shape1.graphics.lineStyle(10,0xFF0000,1,false,"normal","round");
var len:int=2*(r+10);
shape1.graphics.moveTo(len/2,0);
shape1.graphics.lineTo(-len/2,0);
//ステージの中央に置く
shape1.x=stage.stageWidth/2;
shape1.y=stage.stageHeight/2;
addChild(shape1);

（section09-01 基本的な図形を描くから抜粋）

　図形を描く線の色とスタイルはlineStyle()の引数で設定します。引数は次の書式のように8つあります。

書式：
lineStyle(thickness:Number = NaN, color:uint = 0, alpha:Number = 1.0, pixelHinting:Boolean = false, scaleMode:String = "normal", caps:String = null, joints:String = null, miterLimit:Number = 3):void

　pixelHintingは角丸四角形の角などの直線と曲線のつながりの部分でのピクセルのずれがめだたないように修正するかどうかを指定する設定です。初期値は修正しないfalseになっていますが、修正する場合はtrueに設定します。線の設定を変えて角丸四角形を描いた場合の比較例を次に示します。左がpixelHintingがfalseのshape1、右がpixelHintingがtrueのshape2です。左のshape1は左辺の角と辺のつながりが不連続になっている部分が目立ちます。

→swfを試す

[:script:]lineStyleのpixelHintingの設定を変えて角丸四角形を描く

var shape1:Shape=new Shape();
var shape2:Shape=new Shape();
//pixelHinting=false
shape1.graphics.lineStyle(3,0x000000,1,false);
shape1.graphics.drawRoundRect(0,0,100,100,30,80)
shape1.x=100;
shape1.y=150;
addChild(shape1);
//pixelHinting=true
shape2.graphics.lineStyle(3,0x000000,1,true);
shape2.graphics.drawRoundRect(0,0,100,100,30,80)
shape2.x=250;
shape2.y=150;
addChild(shape2);

（section09-01 基本的な図形を描くから抜粋）

　図形の描画はGraphicsクラスの描画メソッドを使いますが、Graphicsクラスのインスタンスを作って直接利用することはできません。また、Graphicsクラスを継承して描画可能なクラスを再定義することもできません。
　Graphicsクラスの描画メソッドを利用するには、Shapeクラス、Spriteクラス、そしてSpriteクラスのサブクラスであるMovieClipクラスのgraphicsプロパティを介してGraphicsクラスのオブジェクトにアクセスします。

図形を描く
　Graphicsクラスの描画メソッドを使うと、円、楕円、四角形、角丸四角形の図形を描くことができます。次のスクリプトはGraphicsクラスのdrawCircle()を使って、Shapeクラスのインスタンスに円を描いています。
　なお、Shapeクラスは単純なシェイプを作成するときに利用されます。ShapeクラスはSpriteクラスと違ってDisplayObjectContainerとInteractiveObjectを継承していません。つまり、ほかの表示オブジェクトを入れ子にもつことができず、クリックイベントなどのイベントを受け取りません。その分だけSpriteクラスよりもメモリを消費しません。

[:script:]円を描く

var shape1:Shape=new Shape();
//線幅3、赤色の線
shape1.graphics.lineStyle(3,0xFF0000);
//円を描く
shape1.graphics.drawCircle(0,0,80);
//ステージの中央に置く
shape1.x=stage.stageWidth/2;
shape1.y=stage.stageHeight/2;
addChild(shape1);

　drawCircle(0,0,80)は、中心点の座標(0,0)と半径80の円を描きます。座標の(0,0)はステージの座標ではなく、addChild()する親オブジェクトの中心点を基準とするローカル座標です。図形を描く線はlineStyle()で指定します。lineStyle()のオプションはたくさんありますが、ここでは線幅3と線色0xFF0000（赤）を指定しています。

→swfを試す