ピクセル職人に捧ぐ – BitmapData for EaselJS –

久々のブログ更新になってしまいました。最近、首の痛みに悩まされているkudoxです。現在のEaselJSには、BitmapDataクラスが定義されていないため、canvasのピクセルを操作するには低レベルのHTML5 Canvas APIを使う必要があり、非常に手間がかかります。そこでEaselJSにActionScript3.0と同様のインターフェイスを備えたBitmapDataクラスを追加する「BitmapData for EaselJS」を作ってみました。MITライセンスで公開していますので、商用でも無料でお使い頂けます。

BitmapData for EaselJS

下記のリンクより、BitmapData for EaselJSをダウンロードして頂けます。zip内のexampleフォルダに簡単なサンプルを入れていますが、サンプルの多くはhttpでアクセスしないと見れないので、ローカルのテストサーバーに設置してご覧下さい。

基本的な使い方

BitmapData for EaselJSの基本的な使い方を見てみましょう。BitmapData for EaselJSは、基本的なインターフェイスをActionScript3.0に合わせているため、Flasherの方であれば違和感なく使いこなせると思います。

bitmapdata.jsの読み込み

まず、HTMLのhead領域に下記のように記述して、BitmapData for EaselJSのjsファイルを読み込みます。これだけで名前空間createjsにBitmapData, BitmapDataChannel, ColorTransformクラスが追加されます。

HTML

<script type="text/javascript" src="js/preloadjs-0.3.1.min.js"></script>
<script type="text/javascript" src="js/easeljs-0.6.1.min.js"></script>
<script type="text/javascript" src="js/bitmapdata-0.8.2.min.js"></script>

BitmapDataインスタンスの生成と表示

BitmapDataインスタンスは、new演算子により生成することができます。コンストラクタの引数はActionScript3.0と異なり、第1引数に読み込みの終わったHTMLImageElementを渡すと、その画像のBitmapDataインスタンスが生成されます。

塗りのBitmapDataを作成したい場合は、第1引数にnullを渡し、続けてwidth, height, fillColorを指定します。色の指定は、EaselJSのGraphicsクラスと同様にCSS文字列が使えるほか、0xAARRGGBB形式の16進数値でも指定することができます。また、HTML5のcanvasはアルファチャンネルをサポートしているため、BitmapData for EaselJSにはtransparentプロパティを定義していません。transparentは常にtrueであるとお考え下さい。

BitmapDataクラスはDisplayObjectを継承していないため、実際にStage上に表示するにはBitmapクラスを使います。この流れはFlashと同様ですが、BitmapクラスのコンストラクタにはBitmapDataインスタンスではなく、インスタンスのcanvasプロパティを渡します。これで作成したBitmapDataがStage上に表示されます。

JavaScript

_bmd01 = new createjs.BitmapData(HTMLImageElement);
_bitmap01 = new createjs.Bitmap(_bmd01.canvas);
_stage.addChild(_bitmap01);
var width = 200;
var height = 200;
var fillColor = 0x80FF0000;
_bmd02 = new createjs.BitmapData(null, width, height, fillColor);
_bitmap02 = new createjs.Bitmap(_bmd02.canvas);
_stage.addChild(_bitmap02);

cache()したDisplayObjectをBitmapDataとして取得する

ShapeやContainerといったDisplayObjectを継承したクラスのインスタンスは、cache()することにより、BitmapDataとして取得することができます。下記の例では、BitmapDataクラスのstaticメソッドgetBitmapData()により、cache()したShapeインスタンスをBitmapDataとして取得し、colorTransform()で色を変更しています。

JavaScript

_shape = new createjs.Shape();
var g = _shape.graphics;
g.f("rgba(0, 0, 255, 1)").dp(0, 0, 100, 5, 0.6, -90).ef();
_shape.cache(-100, -100, 200, 200);
_bmd01 = createjs.BitmapData.getBitmapData(_shape);
var colorTransform = new createjs.ColorTransform(1, 1, 0, 1, 255);
var rect = new createjs.Rectangle(0, 0, _bmd01.width >> 1, _bmd01.height);
_bmd01.colorTransform(rect, colorTransform);
_stage.addChild(_shape);

プロパティ・メソッドについて

BitmapData for EaselJSは、基本的にFlashのBitmapDataクラスに合わせてプロパティ・メソッドを定義していますが、私の未熟さもあり、若干仕様が異なる部分があります。この点については、こちらのページで詳しく解説していますので、合わせてご覧下さい。

お問い合わせ先

バグ報告・ご質問・機能追加のご要望などございましたら、Contactページからお問い合わせ頂くか、Twitterで@u_kudox宛にMentionして下さい。可能な限り、対応するつもりです。