canvasライブラリを作ろう！その3【html5】

photo by losmininos

バグフィックスをした以外は特にアップデートしていませんが、今回は複雑な形状のパスについて書いてみようと思います。

ソースはこちら。
http://meat18.mods.jp/new/library/canvas_ctr.js

lineTo、bezierCurveToなどのメソッドを使ってオリジナルの複雑な形状を描きたい場合は、DisplayObjectクラスを継承したクラスを作り、makePathメソッドをオーバーライドしてください。

var MyDisplayObject = function(){
this.initialize.apply(this,arguments);
}
/*DisplayObjectのインターフェースをプロトタイプ継承する*/
MyDisplayObject.prototype = new CANVAS_CTR.DisplayObject.Interface();

これで新しいクラスができます。

次に新しくできたクラスのmakePathメソッドをオーバーライドします。
例えば、CircleクラスのmakePathメソッドはこんな感じになっています。
引数には対象となるコンテキストを取ります。

this.makePath = function(ctx){
ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
};

さきほど作ったMyDisplayObjectクラスのmakePathメソッドをオーバーライドするにはこのように記述します。

MyDisplayObject.prototype.makePath = function(ctx){
/*lineTo ～ などパスを好きなように記述*/
};

このように好きなようにパスを描き、他のDisplayObjectと同じように扱うことができます。
インスタンス化してaddChildメソッドで表示リストに加えます。

var myObj = new MyDisplayObject({パラメータをここに記述});
context.addChild(myObj)

今日はここまでですが、引き続きご要望やアドバイスなどあれば是非！！

記事の話題関連のツイート on twitter