FN1501006 | PreloadJS 0.6.0: 古いコードのイメージ読込みをImageLoaderクラスで書直す

PreloadJS 0.6.0から、コンテンツの形式に応じたローダをクラスとして備えました。イメージファイルはImageLoaderクラスで読込みます。LoadQueueクラスは、コンテンツの形式が何か調べてローダーを選びます。けれど、読込むのが初めからイメージとわかっているときは、ImageLoaderクラスを使った方がひと手間省けるのです。本稿では、古いバージョンで書いたコードを、ImageLoaderクラスで書替えてみます。

01 お題「ドラッグする軌跡でアルファマスクを描く」

コード書替えのお題は、gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」第10回「ドラッグの軌跡を滑らかな曲線で描く」コード1「ドラッグする軌跡でアルファマスクを描く」です(サンプル001)。読込んだ画像イメージをフィルタでぼかし、ドラッグでアルファマスクを描いています。使ったライブラリは、EaselJS 0.6.1とPreloadJS 0.3.1です。

EaselJS 0.6.1はライブラリのデータサイズを気づかって、フィルタのクラスが含まれておらず、別に読込んでいました。けれど、使いにくい・わかりにくいという声から、つぎの0.7.0でフィルタも含まれるようになりました。また、同バージョンで、ぼかしフィルタのクラス名がBoxBlurFilterからBlurFilterに変わりました。前掲サンプル001は、つぎのようにこのクラス名さえ改めれば正しく動きます。

02 LoadQueueをImageLoaderクラスに差替える

ImageLoaderクラスは、イメージファイルをつぎのような手順で読込みます。なお、ImageLoader()コンストラクタに渡す引数は、読込むファイルを示すオブジェクトまたはパスの文字列です(詳しくは「ImageLoaderクラス」参照)。

すると、前掲サンプル001のコードは、つぎのように書替えることになりそうです。なお、抜書きの行番号は、後にまとめたコード001にもとづきます。ImageLoader()コンストラクタに読込むファイルを与えますので、ImageLoader.load()メソッドは引数をとりません。

ところが、これだけではつぎのようなエラーが出て、コードが動きません。このエラーは、AbstractLoader.completeイベントのリスナー関数の受取ったイベントオブジェクト(eventObject)が、itemというプロパティをもっていないことから起こりました。

03 AbstractLoader.completeイベントのリスナー関数にデータを渡す

LoadQueue.loadFile()メソッドを用いると、引数のオブジェクトのdataというプロパティに定めた値が、LoadQueue.fileloadイベントのリスナー関数に渡されるイベントオブジェクトのitemプロパティに加えられます。前掲サンプル001は、つぎのようにしてリスナー関数(draw())にdataプロパティを受け渡していました。ところが、ImageLoaderクラスにはloadFile()メソッドが備わっておらず、AbstractLoader.completeイベントのリスナー関数が受取るイベントオブジェクトにitemというプロパティはないのです。

リスナー関数(draw())にdataプロパティでデータを渡すことは、あきらめるより仕方ありません。そのかわり、ローダーのImageLoaderオブジェクト(loader)に、プロパティ(canvasSize)としてデータを与えることにしました(第19行目)。リスナー関数は受取ったイベントオブジェクト(eventObject)のEvent.targetプロパティから、読込んだローダーの参照が得られます(第24行目)。なお、dataプロパティが使えませんので、ImageLoader()コンストラクタに渡す引数(file)は、パスの文字列としました(第15行目)。

これで、ImageLoaderクラスを使ってコードが動くようになりました。手直ししたスクリプトは、つぎのコード001にまとめてあります。併せて、jsdo.itにも改訂したサンプルのコードを掲げました(サンプル002)。

コード001■ドラッグする軌跡でアルファマスクを描く

var stage;
var wipingShape;
var imageBitmap;
var blurBitmap;
var imageSize = new createjs.Point();
var radius = 10;
var bitmapPoint = new createjs.Point();
var oldPoint = new createjs.Point();
var oldMidPoint = new createjs.Point();
var isDrawing;
var cursor;
function initialize() {
var canvasElement = document.getElementById("myCanvas");
var canvasSize = new createjs.Point(canvasElement.width, canvasElement.height);
var file = "images/image.png";
stage = new createjs.Stage(canvasElement);
var loader = new createjs.ImageLoader(file);
loader.addEventListener("complete", draw);
loader.canvasSize = canvasSize;
loader.load();
}
function draw(eventObject) {
var image = eventObject.result;
var canvasSize = eventObject.target.canvasSize;
var imageWidth = imageSize.x = image.width;
var imageHeight = imageSize.y = image.height;
var nX = bitmapPoint.x = (canvasSize.x - imageWidth) / 2;
var nY = bitmapPoint.y = (canvasSize.y - imageHeight) / 2;
stage.addEventListener("stagemousedown", startWipe);
stage.addEventListener("stagemouseup", stopWipe);
stage.enableMouseOver();
wipingShape = new createjs.Shape();
blurBitmap = createBitmap(image, nX, nY);
blurBitmap.filters = [new createjs.BlurFilter(15, 15, 2)];
blurBitmap.cache(0, 0, imageWidth, imageHeight);
blurBitmap.alpha = 0.8;
imageBitmap = createBitmap(image, nX, nY);
createCursor();
updateCacheImage(false);
createjs.Ticker.addEventListener("tick", wipe);
}
function createBitmap(image, nX, nY) {
var myBitmap = new createjs.Bitmap(image);
myBitmap.x = nX;
myBitmap.y = nY;
stage.addChild(myBitmap);
return myBitmap;
}
function createCursor() {
cursor = new createjs.Shape();
cursor.graphics
.beginFill("white")
.drawCircle(0, 0, radius);
cursor.cursor = "pointer";
cursor.alpha = 0.3;
stage.addChild(cursor);
}
function startWipe(eventObject) {
var mousePoint = getMousePoint();
oldMidPoint.x = oldPoint.x = mousePoint.x;
oldMidPoint.y = oldPoint.y = mousePoint.y;
isDrawing = true;
wipingShape.graphics
.setStrokeStyle(radius * 2, "round", "round");
}
function wipe(eventObject) {
cursor.x = stage.mouseX;
cursor.y = stage.mouseY;
if (isDrawing) {
var mousePoint = getMousePoint();
var mouseX = mousePoint.x;
var mouseY = mousePoint.y;
var oldX = oldPoint.x;
var oldY = oldPoint.y;
var midX = (oldX + mouseX) / 2;
var midY = (oldY + mouseY) / 2;
wipingShape.graphics
.beginStroke(createjs.Graphics.getRGB(0x0, 0.15))
.moveTo(oldMidPoint.x, oldMidPoint.y)
.quadraticCurveTo(oldX, oldY, midX, midY);
oldPoint.x = mouseX;
oldPoint.y = mouseY;
oldMidPoint.x = midX;
oldMidPoint.y = midY;
updateCacheImage(true);
} else {
stage.update();
}
}
function stopWipe(event) {
isDrawing = false;
}
function getMousePoint() {
var mouseX = stage.mouseX - bitmapPoint.x;
var mouseY = stage.mouseY - bitmapPoint.y;
return new createjs.Point(mouseX, mouseY);
}
function updateCacheImage(update) {
updateCache(update, wipingShape);
var maskFilter = new createjs.AlphaMaskFilter(wipingShape.cacheCanvas);
imageBitmap.filters = [maskFilter];
updateCache(update, imageBitmap);
stage.update();
}
function updateCache(update, instance) {
if (update) {
instance.updateCache();
} else {
instance.cache(0, 0, imageSize.x, imageSize.y);
}
}

サンプル002■EaselJS 0.8.0 & PreloadJS 0.6.0: Wiping out blur from a image with AlphaMaskFilter