ActionScript 3.0で円グラフを描画する

2012年1月2日 月曜日

下記サイト様の投稿を参考に、sketchbookライブラリを使用して描画。
減衰公式使ってアニメーションしました。

trick7 – sketchbookライブラリを使わせてもらう
にゃあプロジェクト – ウェブログ – [AS3.0] sketchbookを試すのだ!

はじめにライブラリをインポートして、初期化する。

import sketchbook.SketchBook;
import sketchbook.display.SpriteHelper;
import sketchbook.graphics.GraphicsHelper;

//初期化
SketchBook.init(stage);

ENTER_FRAMEイベントでダミーに描画して、完了後にダミーをremoveChildする。

//描画円グラフ半径
var inside:Number = 100;
//描画開始角度
var startNum:Number = 0;
//描画角度量
var volNum:Number = 120;
//描画アニメーション用数値
var drawNum:Number = 0;


//完成図までの表示用
var dummyMc:MovieClip = new MovieClip();

addEventListener( Event.ENTER_FRAME, Ef);
function Ef(e:Event):void {
	//描画角度を減衰で計算
	drawNum += (volNum - drawNum)/5;
	
	//Shapeクラス
	var pie:Shape = new Shape();
	//GraphicsHelperクラス
	var helper:GraphicsHelper = new GraphicsHelper(pie.graphics);
	helper.beginFill(0xFFCC00);
	
	if (drawNum >= (volNum - 1)) {
		//実行中のイベント、ムービークリップを破棄
		removeEventListener(Event.ENTER_FRAME, arguments.callee);
		removeChild(dummyMc);
		
		//完成の図形
		addChild(pie);
		helper.lineStyle (1, 0xFF6600, 1.0);
		helper.drawPie(0, 0, inside,volNum,(startNum - 90));
	}else {
		//途中経過の図形
		dummyMc.addChild(pie);
		helper.lineStyle (1, 0xFF6600, 1.0);
		helper.drawPie(0, 0, inside,drawNum,(startNum - 90));
	}
	helper.endFill();
}

GraphicsHelperのdrawPieメソッドの引数
drawPie(x位置 ,y位置 ,半径 ,描画角度 ,開始角度);

→DEMO

Tweenerみたいに細かく時間とかイージングとか設定出来る描画ライブラリとかないもんかなぁ。

(Visited 827 times, 1 visits today)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

トラックバック

 トラックバックURL
http://lettuce-eater.com/blog/archives/63/trackback