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

(section09-02 図形の塗りと線の塗りから抜粋)

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

fig09-02-05.jpg

[: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-01 基本的な図形を描くから抜粋)

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

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

 a、b、c、dの各点を図で示すと次のようになります。
fig09-01-20_shiji.jpg
 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を結ぶ補助線も引いていますが、もちろんこの線がなくてもベジェ曲線は描かれます

fig09-01-21.jpg

[: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 基本的な図形を描くから抜粋)

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

fig09-01-11a.jpg fig09-01-11b.jpg
[: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行目を取り去ると線が引かれれなくなりますが、線は見えなくても図形の塗りが行われます。
fig09-01-12.jpg
(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行目)。

fig09-01-07.jpgswfを試す

[: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()を設定し直しているので、横線は円の線とは違うスタイルで引かれます。
fig09-01-06.jpgswfを試す


[: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);

当たり判定を使って線を描く

|

元々は線を描くだけのサンプルだったんですが、せっかくなので動くバージョンも作りました。
fig09-01-07.jpg
→swfを見る

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

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

タグ

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

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