HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第8回 ぼかしフィルタとアルファマスク

この記事を読むのに必要な時間:およそ 10 分

今回からまた新たなお題を,EaselJSサイトのデモから頂戴しよう。ALPHAMASK FILTERというサンプルで,アルファチャネルのマスクが動的につくられる図1)⁠EaselJSのDisplayObjectインスタンスには,ShapeオブジェクトでベクターマスクがかけられるDisplayObject.maskプロパティ)⁠アルファマスクは,ベクターマスクとは異なり,AlphaMaskFilterクラスで扱われるフィルタだ。⁠ALPHAMASK FILTER」では,さらにBoxBlurFilterクラスで,インスタンスのイメージにぼかしを加えている。今回は,まずこのふたつのフィルタの使い方を学ぼう。

図1 EaselJSサイトのデモ「ALPHAMASK FILTER」

図1 EaselJSサイトのデモ「ALPHAMASK FILTER」

外部画像ファイルから読込んだイメージをインスタンスにしてステージに置く

フィルタをかけるには,ステージにその対象となるインスタンスが置かれていなければならない。外部画像ファイルを読込んでステージに加えるには,ライブラリとしてEaselJSのほかにPreloadJSを用いる。これらをscript要素に定めておく※1)⁠

<script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.1.min.js"></script>

画像(PNG)ファイル(image.png)は,HTMLドキュメントと同じ場所のフォルダ(images)に納められているものとする。CreateJSによる画像ファイルの読込みは,すでに第2回コード1で解説した。今回のお題がつくりやすいように,JavaScriptコードをつぎのように書いてみた。

var stage;
var blurBitmap;
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  stage = new createjs.Stage(canvasElement);
  var loader = new createjs.LoadQueue(false);
  loader.addEventListener("fileload", draw);
  loader.loadFile("images/image.png");
}
function draw(eventObject) {
  var image = eventObject.result;
  blurBitmap = createBitmap(image);
  stage.update();
}
function createBitmap(image) {
  var myBitmap = new createjs.Bitmap(image);
  stage.addChild(myBitmap);
  return myBitmap;
}

Bitmapインスタンスをつくって返す関数(createBitmap())は分けて定めた。Imageオブジェクトを引数として渡す。これで,Bitmapインスタンスがいくつでもできる。まだ,インスタンスの位置を決めていないので,親であるStageオブジェクトの基準点に置かれる図2)⁠

図2 インスタンスはステージの左上角に置かれる

図2 インスタンスはステージの左上角に置かれる

Bitmapインスタンスはステージの真ん中に置きたい。そのためには,読込んだ画像の大きさを調べなければならない。ということは,LoadQueue.fileloadイベントのリスナー関数(draw())で扱うべきだ。さらに,ステージの真ん中はCanvasの大きさから求める。Canvasの参照(canvasElement)は,初期化の関数(initialize())で得ている。これを,どうやってイベントリスナーに伝えるか。

簡単なのは,Canvasの参照あるいは大きさ(幅と高さ)をグローバルな変数に与えることだ。だが,インスタンスの座標は始めに定めたら,その後動かすことはない。つまり,変数が使われるのは1度きりだ。そのままメモリに残すのは,無駄に感じられる。

そこで,LoadQueueクラスの仕組みを使って,値をイベントリスナーに渡そう。LoadQueue.loadFile()メソッドの引数に与えるファイルは,Objectインスタンスでも定められる。読込むファイルのURLは,オブジェクトにsrcというプロパティで加える。このオブジェクトに納められるプロパティは,他にもいくつかある(詳しくはPreloadJSで外部ファイルを読込む参照)⁠今回は,任意の値が入れられるdataプロパティを使う。

LoadQueueオブジェクト.loadFile({src:ファイルのURL, data:任意の値})

LoadQueue.loadFile()メソッドの引数に渡すオブジェクトにdataプロパティを定めると,LoadQueue.fileloadイベントのリスナー関数で受け取れる。リスナーの引数に渡されるイベントオブジェクトには,itemというプロパティが与えられる。その中のdataプロパティに,LoadQueue.loadFile()メソッドの引数に渡したdataプロパティの値が納められるのだ。

そこで,初期化の関数(initialize())の中でCanvasの幅と高さをPointオブジェクト(canvasSize)で定め,LoadQueue.loadFile()メソッドの引数に渡すオブジェクトのdataプロパティに与える。LoadQueue.fileloadイベントのリスナー関数(draw())は,イベントオブジェクトのitemプロパティからdataプロパティとしてPointオブジェクトが取り出せるため,その値と読込んだ画像イメージの大きさからBitmapインスタンスをステージの真ん中に置くことができる図3)⁠これらの処理を加えたのが,つぎのコード1だ。

図3 インスタンスがステージの真ん中に置かれた

図3 インスタンスがステージの真ん中に置かれた

コード1 外部画像のイメージをBitmapインスタンスに与えてステージの真ん中に置く

var stage;
var blurBitmap;
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  var canvasSize = new createjs.Point(canvasElement.width, canvasElement.height);
  stage = new createjs.Stage(canvasElement);
  var loader = new createjs.LoadQueue(false);
  loader.addEventListener("fileload", draw);
  loader.loadFile({
    src: "images/image.png", 
    data: canvasSize
    });
}
function draw(eventObject) {
  var image = eventObject.result;
  var canvasSize = eventObject.item.data;
  var imageWidth = image.width;
  var imageHeight = image.height;
  var nX = (canvasSize.x - imageWidth) / 2;
  var nY = (canvasSize.y - imageHeight) / 2;
  blurBitmap = createBitmap(image, nX, nY);
  stage.update();
}
function createBitmap(image, nX, nY) {
  var myBitmap = new createjs.Bitmap(image);
  myBitmap.x = nX;
  myBitmap.y = nY;
  stage.addChild(myBitmap);
  return myBitmap;
}
※1
CreateJSのライブラリには,5月にバグ修正をおもな目的とする+0.0.1のアップデートが加えられた。詳しくは,CreateJSがバグ修正で0.01バージョンアップをお読みいただきたい。

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入