haraです。

今回の時計は一本の線がつながっていく時計。それだけといえばそれだけのシンプルな時計ですが、地味にFP10のグラフィックAPI、drawPathを使ってみたのでその解説を軽くいたします。

drawPathについてはもうすでに色々な解説が出ていますね。

drawPath()を使って図形を描く - ActionScript3入門ノート CS4

graphics.drawPath (1)【閃光的網站・弛緩複合体 -Review Division-

Vector型とdrawPathサンプル | (SCRATCHBRAIN.BLOG v2)

これら先達の記事を見れば、もうDrawPathはマスターしたも同然かと思いますので、僕は今回仕様したgraphics.moveToとgraphics.lineToについて書きます。

ある配列に入った座標を線でつなぎたい場合、moveToとlineToでやるとこう。

 

var i:int;
var len:int=shapeAr.length;
this.graphics.lineStyle(1,0xFFFFFF);
this.graphics.moveTo(shapeAr[0].x, shapeAr[0].y);
for(i=1;i<len;i++) {
this.graphics.lineTo(shapeAr[i].x, shapeAr[i].y);
}

最初の点だけmoveToにして、あとはlineToですね。

これをdrawPathでやるとこう。

 

var i:int;
var len:int=shapeAr.length;
var _commands:Vector.<int> = new Vector.<int>(len, true);
var _cood:Vector.<Number> = new Vector.<Number>(len*2, true);
_commands[0] = 1;
_cood[0] = shapeAr[0].x;
_cood[1] = shapeAr[0].y;
for(i=1;i<len;i++) {
	_commands[i] = 2;
	_cood[i*2] = shapeAr[i].x;
	_cood[i*2+1] = shapeAr[i].y;
}
this.graphics.lineStyle(1,0xFFFFFF);
this.graphics.drawPath(_commands, _cood, GraphicsPathWinding.NON_ZERO);

 

 drawPathでは描画の種類と描画する座標をそれぞれVector型の配列で扱うってことなんですねー。

上記のコードでは描画の種類は_commands、描画する座標は_coodに入れていて、moveToにしたい場合は_commandsに1を、lineToにしたい場合は2を入れるといいみたい。

このへんの仕様はこちらのページが参考になります。 

Adobe ActionScript 3.0 * パスの描画

描画する座標は_coodに入れているけど、これはx座標とy座標を交互に１つの配列に入れていく仕様。drawTrianglesとかもこういう指定の仕方だったけど、直感的ではないのですねー。

新しい描画APIは早くなったよ！という話を以前聞いた事があったのですが、上記のように配列で指定して一度に描画APIを走らせるから早いってことなんですね。納得。

上記のコードをwonderflに上げています。ご覧あれ。