- 2008-09-09 (火) 18:01
- action script
標準の ActionScript では用意されていないけど、fladdict さんの Sketchbook ライブラリ（関連エントリ）等を使えば扇型（パイ）をスクリプトで描画できます。
// 例：Sketchbook ライブラリの Spritehelper クラスより（※split は分割数。細かいほど円が滑らかになる）： drawPie(x:Number, y:Number, radius:Number, degree:Number, fromDegree:Number=0, split:Number=36)
さて、扇型が使えるということでパイチャートと呼ばれる扇型グラフを描画しようとすると7角形の時に上図のように隙間が空きました。
というのは嘘です。僕のミスでした。以下、その顛末。
// 勘違いここから。———-
僕が用意したスクリプト的はオーソドックスに「円をX分割して！」とパラメーターで渡すとX分割のパイチャートができる仕様。なので、上述の drawPie メソッドの degree パラメーターの部分に
degree = 360 /（分割数）;
で求めた値を入れることになります。なぜ隙間が開くかというと、7角形の時には上記の角度が（たぶん四捨五入されて）が51度になるんですね。（←ここで気付け！）
51度×7で357度ということで最終的に3度隙間が残る。分割数を上げると1ユニットずつの累積誤差が大きくなるので隙間が大きくなるケースが出てきます。
ああ、これはまずいと思って、
Math.ceil(degree = 360 /（分割数）);
と切り上げで52度になるようにすると、今度は分割数を上げた時に覆いかぶさるようになってしまう。
じゃあ、解決法は for ループで１ユニット分づつ残りの角度を算出して次々に（分割数-1）で割って・・・みたいなことを考えはじめていたところで自分の重大な勘違いに気付きました。
「扇型」みたいなややこしい描画は、整数角度しか受け取ってくれないだろうというのがそもそもの勘違いです。
// 勘違いここまで。———-
そうですね。Sketchbook の drawPie はじめ、おそらくほとんどの扇型描画メソッドでも小数点での角度指定も大丈夫ですね。
そしてみなさんお気づきの通り、僕はスクリプトのはじめの方で
private var degree:int;
と書いてたんですね。int 型と宣言すると強制的に整数になると。なので
private var degree:Number;
とすれば、小数点以下も受け入れてくれる Number 型となるので、これを drawPie に渡してやれば
はいこの通り。
この何気ない１行に気付かずに、僕は Sketchbook ライブラリの中身を探検してしまっていました。（でも素敵なメソッド見つけたので無駄足ではないよ。）
こんな感じで、うっかりミスの連発しつつも、なんとか AS 書いてるわけです。
- Newer: AS3 で swapDepths 的なことをやる時
- Older: ActionScript 3.0 Animation
Comments:3
Trackbacks:0
- Trackback URL for this entry
- http://www.trick7.com/blog/2008/09/09-180148.php/trackback
- Listed below are links to weblogs that reference
- 扇型グラフを ActionScript で描く from trick7
