CreateJSのGraphicsクラスに大幅な変更が加えられる [Edit]
投稿者：野中 文雄 | 投稿日：2014.07.22 | [CreateJS][HTML5][野中ゼミ]CreateJSの開発者Grant Skinner氏はGoogle+の「CreateJS Developers」に、2014年7月21日付でつぎのような記事を公開しました。
EaselJSライブラリのGraphicsクラスに大幅な変更が加えられます。これまでのコンテンツに問題が生じないかどうか、次期バージョン候補(NEXT)でお確かめください。
Graphicsクラスは処理のキューで成立ちます。キューに納められたオブジェクトはCommand.exec()メソッドを公開しています。描画はキューから処理を取出しては、順に実行するだけです。
これまで、処理は一般的なオブジェクトで、Function.apply()メソッドにより実行されました。その実装を改め、すべての処理(たとえばGraphics.LineTo()メソッド)を専用のCommandオブジェクトで行うこととしました。
これにより、型が判定できたり、Function.apply()メソッドを使わずに済むようになるなど、パフォーマンスが改善できました。また、Graphics.getInstructions()メソッドにより、キューの情報が得られます。さらに重要なのは、処理内容が動的に変えられることです。
// graphics.beginFill()のCommandオブジェクトをつくって保持
var fill = myShape.graphics.beginFill("red").command;
// Graphics.drawRect()について同様
var rect = myShape.graphics.drawRect(0, 0, 100, 100).command;
// キューをつくり直すことなく設定変更
fill.style = "green";
rect.width *= 2;
また、簡単にCommandオブジェクトを独自につくることができ、Graphics.append()メソッドでキューに加えられます。
myShape.graphics.append({exec:function(ctx2d, shape) {
// context2Dの描画処理
});
開発に際して、キューの処理が多い(Commandオブジェクトが数千の)場合にGraphicsクラスのパフォーマンスに問題が生じました。そこで、大幅な最適化を加えることにより、最悪のケース(Graphicsインスタンスに塗りや線の異なる大量のシェイプを描く場合)の負荷を100倍以上削減しました。また、そうしたケースのメモリとのやり取りも改善しています。
そして、ひとつのGraphicsインスタンス50,000の矩形を異なる塗りと線で描くテストでは、10秒かかった処理が20ミリ秒以下で済みました。
以上の変更は、Grant Skinner氏のすべての基本的なテストをパスしています。しかし、その範囲は広範にわたりますので、NEXTバージョンで実際に試して、何か問題が生じたら、速やかにSkinner氏にお知らせください。
