flashで円の描画。

質問

長文失礼します。
FLASH,CS3でActionScript2.0で作業しています。

FLASHで複数の円を重ねて円グラフの様な描画をしたくて、ネット上にあったソースを自分で少しいじりました。
しかし複数の円を描画しようとすると他の円が消えてしまいます。

外部に円を描画するスクリプト（DrawArc.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);
}
}
}
}

そしてFLASHのフレーム内に
import DrawArc;
mc = new DrawArc(this);
targetNum = 0;
onEnterFrame = function () {
if (targetNum<=220) {
targetNum += 2;
change();
} else {
delete this.onEnterFrame;
}
};

function change() {
mc.drawLine(Stage.width/2,65,40,-targetNum,90,30,0x69f203,100);
}
とかいてあります。

これで円を描画してくれるんですが、
さらにもう一つの円を重ねて表示させたいので

FLASHのフレーム内に
import DrawArc;
mc = new DrawArc(this);
mc2 = new DrawArc(this);//新しい用
targetNum = 0;
targetNum2 = 0;//新しい用
onEnterFrame = function () {
if (targetNum<=220) {
targetNum += 2;
change();
}
if (targetNum2<=210) {
targetNum2 += 2;
change2();
}
};

function change() {
mc.drawLine(Stage.width/2,65,40,-targetNum,90,30,0x002503,100);
mc.mc.swapDepths(10);
trace(mc.mc.getDepth());
}

function change2() {
mc2.drawLine(Stage.width/2,65,40,-targetNum2,90,30,0x69f203,100);
mc2.mc.swapDepths(11);
trace(mc2.mc.getDepth());
}

と書いたのですがDepthが両方とも10になってしまいます。このDepthが別々になれば両方ちゃんと表示されると思うのですが、手詰まりになってしまいました。

どなたか解決策が分かる方教えてください。

回答No.1

DPE · ベストアンサー

実際に円弧を描画する drawLine メソッドの冒頭に

　> mc.clear();

という一文がありますよね。

MovieClip クラスの clear メソッドは、ムービークリップ内にある lineTo や curveTo などのメソッド（描画メソッド）で描いた描画オブジェクトを全て消去する命令です。
つまりこの drawLine メソッドは、”今まで描いた線を全て消してから”次の線を描画する設計になっているため、先に描いた円弧を残したまま他の円弧を描画することができません。
従って、１つのムービークリップ内に描画できるのは常に１つの円弧だけ、ということになります。
深度の指定に誤りがあって１つしか表示されないのはよくある話ですが、今回の件は深度の衝突が原因ではないと思います。

解決策は２通り考えられます。

　1) DrawArc.as ファイル内の mc.clear(); を削除、またはコメントにする
　2) new DrawArc の引数に、それぞれ違うムービークリップを指定する

1) は、要するに前に描画した線が clear メソッドにより消されてしまうことが原因なのですから、これをなくすということです。
ただし、古い線がいつまでも残ることになるため、drawLine メソッドを呼び出すたびに余計な線の描画処理も行われ、場合によっては、処理が重くなったり線が汚く見える可能性も考えられます。

2) は、円弧を描画する数だけムービークリップを用意する方法です。
１つのムービークリップにつき１つの円弧しか描けないのなら、必要な分だけムービークリップを用意すれば、いくつでも円弧を同時に表示することができると言えます。

DrawArc クラスでは、new DrawArc の引数で指定されたムービークリップに描画する設計になっています。
クラスのオブジェクトを２つ作っても、new DrawArc に渡す引数が同じでは円弧が１つだけになってしまいますので、それぞれに違うムービークリップを指定します。

ムービークリップはステージに予め配置しておいても構いませんし、createEmptyMovieClip で作成しても構いません。
このクラスで円弧が１種類しか描けない件は深度の衝突が直接の原因ではないと思われますが、createEmptyMovieClip でムービークリップを作成する際は深度の衝突にご注意ください。

１つの円弧につき１つのムービークリップを用意すると、swapDepths メソッドで深度を変更して重ね順を変える演出も作りやすく、クラスファイルを編集する必要もありません。
また、ムービークリップであるということは、グラフ内の特定の項目をクリックして何かを表示するといった機能も簡単に作れますから、2) の方法がオススメです。

ご提示のスクリプトでは、new DrawArc にいずれも this を渡していますが、この部分を例えば、

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）

　import DrawArc;

　//円弧を描画するムービークリップを作成
　clip1 = this.createEmptyMovieClip( "arc1" , 　this.getNextHighestDepth() );
　clip2 = this.createEmptyMovieClip( "arc2" , this.getNextHighestDepth() );

　mc = new DrawArc( clip1 );
　mc2 = new DrawArc( clip2 );//新しい用

このように、それぞれ違うムービークリップに変更してみてください。
DrawArc.as ファイルを編集しなくても、２つの円弧を同時に表示することができます。

円弧の重なり順はムービークリップの深度の順序に従います。
上記の例では、createEmptyMovieClip でそれぞれの円弧を描くムービークリップを作る際に、黄緑の円弧（ DrawArc オブジェクト” mc2 ”で描画する円弧）が上に重なるように深度を指定していますので、change およびchange2 関数内の swapDepths は不要です。

お礼

できました！！ありがとうございます！

深度が問題ではなかったんですね。恥ずかしい限りです。。。