円弧の描画：タコメーターみたいな

昨日のエントリのdrawCircle()メソッド界隈を調べていたら、Adobeサイト内に、円弧の描画のイケてるカスタムメソッドを見つけたので触ってみました。

見つけた記事は、だいぶ昔のもので、ActionScript1.0だったので、2.0に書き換え、外部ASファイルに書き直ました。以下がそのサンプルです。（要FlashPlayer8以上）

こういう円の描画アニメって、マスクとかトゥイーンでは結構作りにくい印象だったので、これを使えばだいぶ楽かも。外部ASファイルは以下のようにしました。

DrawArc.as

class DrawArc {
var mc:MovieClip;
function DrawArc(target:MovieClip) {
mc = target;
}
function drawLine(x:Number, y:Number, radius:Number, arc:Number, startAngle:Number, thickness:Number, color:Number, alpha:Number, yRadius:Number) {
mc.clear();
mc.lineStyle(thickness, color, alpha, false, "none", "none");
mc.moveTo(x, y);
if (arguments.length<8) {
return;
}
if (yRadius == undefined) {
yRadius = radius;
}
if (Math.abs(arc)>360) {
arc = 360;
}
var segs = Math.ceil(Math.abs(arc)/45);
var segAngle = arc/segs;
var theta = -(segAngle/180)*Math.PI;
var angle = -(startAngle/180)*Math.PI;
var ax = x-Math.cos(angle)*radius;
var ay = y-Math.sin(angle)*yRadius;
if (segs>0) {
for (var i = 0; i<segs; i++) {
angle += theta;
var angleMid = angle-(theta/2);
var bx = ax+Math.cos(angle)*radius;
var by = ay+Math.sin(angle)*yRadius;
var cx = ax+Math.cos(angleMid)*(radius/Math.cos(theta/2));
var cy = ay+Math.sin(angleMid)*(yRadius/Math.cos(theta/2));
mc.curveTo(cx, cy, bx, by);
}
}
}
}

Flash8のlineStyle()はパラメータの種類が増えて、６番目の引数＝線の端の処理（capsStyle）を”none”にすれば、今回のように角のある線が描画できます。

drawLineメソッドのパラメータですが、あれもこれも設定できた方がいいかもと思っていたら、めちゃ長くなりました。

• x … 円描画の始点のx座標。
• y … 円描画の始点のy座標。
• radius … 円の半径
• arc … 描画する弧の角度。負の数にすると逆方向（時計回り）にアニメーション。
• startAngle … どの角度から円を書き始めるか。（0〜360）
• thickness … 線の太さ。
• color … 線の色。（例：0xff0000）
• alpha … 線の透明度。
• yRadius（オプション） … radiusに対し、y軸方向の径を設定できるので、楕円が描画できる。

という感じです。

で、flaファイルのフレームアクションに、

import DrawArc;
mc=new DrawArc(_root)
slider.changeHandler=change
function change(){
mc.drawLine(175,65,60,slider.value,90,20,0x0C79C0,100)
arc.text=Math.round(slider.value)
}
change()

スライダとの連携の都合で、ちょっと長くなっていますが、要は

//DrawArcクラスをインポートして
import DrawArc;
//引数に_rootを渡してできたクラスインスタンスの参照mcをつくります。
mc=new DrawArc(_root)

で、あとはchange関数を呼び出します。あるいはそのまま

mc.drawLine(175,65,60,slider.value,90,20,0x0C79C0,100)

と直接クラスインスタンスのメソッドを呼ぶだけです。

（今回は弧を表す第４引数arcにスライダバーの値である slider.value を割り当ててます。この値を変化させれば円弧アニメになります）

今回はスライダでいじれるようにしましたが、もちろんonEnterFrameで自動で描画できるので、ローディング中のアニメとかにも使えます。毎フレームで太さとか色とかを変化させていっても楽しいかも。

回転の方向とかがFlashの体系と逆だったりとかで気持ち悪いと思われるかもしれませんが、drawArcメソッドっていうのは他言語でもあるらしく、定形の仕様とかあったらややこしいので、できるだけ参考元のままにしておきました。

参考元；
Macromedia – Developer Center : Advanced drawing methods in Macromedia Flash MX
（ActionScript1.0ですが、他にも興味深いメソッドがたくさんあります。）

10/17追記：「Reflektions miniml > draw arc v2」のブログで、コードは違えど、ほとんど同じようなサンプルを公開中。クラス化はされていないようです。でもこの方はv1, v2…と記事をバージョンアップされるので、次で負けてしまうでしょう。