mod017 指定した座標を順番に通る線の描画

2007.8.3公開

flashPlayer version7.0以降

あらかじめ複数の点のx座標とy座標を指定すると、それらを順番に通るように線が描かれていきます。

//パブリッシュのverを7にしているのはgetNextHighestDepth()を使用するため
var lineT:Number = 9;//線の太さpt
var lineC:Number = 0xff66ff;//線の色
var lineA:Number =30;//線の透過度
var duration:Number = 30;//描画関数呼び出し間隔msec
var speedD:Number = 5;//描画関数呼び出し毎の線描画長px

//x座標とy座標設定 スタートの点を0番目とする
//0番目がx座標、1番目がy座標を意味する
//例:arrayXY[3][0] 三番目の点のx座標
var arrayXY:Array = [[150,5],[105,105],[5,105],[80,195],[65,295],[150,220],[235,295],[220,195],[295,105],[195,105],[150,5]];
var pointN:Number = arrayXY.length - 1;//線を引く際の目標点の数 スタートの点を除いた数とする
var drawC:Number;//描画長カウント用
var lineN:Number = 1;//現在何個目の点を目指しているカウントする
var nowX:Number = arrayXY[0][0];//現在のx座標
var nowY:Number = arrayXY[0][1];//現在のy座標
var tempX:Number;//x移動長計算用変数
var tempY:Number;//y移動長計算用変数
var tempP:Number;//xとyの長さの比率計算用変数
var tempM:Number;//目標点までの長さ計算用変数
//ライン描画用設定
_root.createEmptyMovieClip("draw_mc", _root.getNextHighestDepth());//ムービークリップ生成
draw_mc.lineStyle(lineT, lineC , lineA);//ラインスタイル設定
draw_mc.moveTo(nowX, nowY);//最初の座標へ移動

//ライン描画関数呼び出し設定
var intervalId:Number = setInterval(drawLine, duration);

//文字表示関数
function drawLine():Void{
drawC = speedD;

//今回の線の描画が終了していない間繰り返し
while(drawC > 0){
//現在描画している線のyとxの長さの比率を求める
tempP = (arrayXY[lineN][1] - arrayXY[lineN - 1][1]) / (arrayXY[lineN][0] - arrayXY[lineN - 1][0]);
tempP = Math.abs(tempP);//比率が負なら正に変える
tempX = drawC / Math.sqrt(1 + tempP * tempP);//tempPを元にxの移動長を計算
tempY = tempP * tempX;//tempPを元にyの移動長を計算
if(arrayXY[lineN][0] < arrayXY[lineN - 1][0] )tempX *= -1;//移動が負の方向の場合
if(arrayXY[lineN][1] < arrayXY[lineN - 1][1] )tempY *= -1;//移動が負の方向の場合

//次の目標点までの長さを計算
tempM = Math.sqrt((arrayXY[lineN][0] - nowX) * (arrayXY[lineN][0] - nowX) + (arrayXY[lineN][1] - nowY) * (arrayXY[lineN][1] - nowY));

//今回の移動では次の目標点に到達しないとき
if(Math.sqrt(tempX * tempX + tempY * tempY) < tempM){
nowX += tempX;//現在のx座標の変更
nowY += tempY;//現在のy座標の変更
draw_mc.lineTo(nowX, nowY);//線を引く
break;
}
else{//今回の移動で次の目標点に到達するとき
//今回の線の描画長から次の目標点までの長さをマイナスする
drawC -= tempM;
nowX = arrayXY[lineN][0];//現在のx座標の変更
nowY = arrayXY[lineN][1];//現在のy座標の変更
draw_mc.linetTo(nowX,nowY);//線を引く
lineN++;//目標点を進める
}
if(lineN > pointN){//描画完了
clearInterval(intervalId);//関数呼び出し消去
break;
}
}
}

ダウンロード
サンプル