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

第9回 ドラッグでアルファマスクを描く

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

このコードでいいのか?

前掲のコード1を見て,このままでいいのか,もう少し手を加えたほうがすっきりするのでは,と考えた読者もいるだろう。最近のTVドラマの主人公がよく口にした台詞で答えるなら,いいね~と申し上げたい。ふたつ押さえておこう。

ひとつ目は,Ticker.tickイベントのリスナー(wipe())だ。マウスをドラッグしているかどうかは変数(wipe)にブール値を入れ(いわゆる「フラグ⁠⁠,ドラッグしていないときは何のアニメーションもしない。しかし,Ticker.tickイベントそのものは,何もしなくても起こり続ける。それなら,そもそもイベントリスナーを除いてしまって,マウスボタンが押されたときに改めてリスナーを加えれば無駄がない。

まったくそのとおりだ。けれど,実はこの後マウスポインタとともに動くカーソル替わりのインスタンスを加える。このインスタンスは,マウスボタンに関わりなくマウスポインタの後を追い続ける。そのため,Ticker.tickイベントのリスナー関数(wipe())は,そのまま残した。

もうひとつは,Graphicsオブジェクトに線を描く処理の切り分けだ。Stage.stagemousedownイベントのリスナー(startWipe())は,描く線のスタイルをGraphics.setStrokeStyle()メソッドで決めた。だが,Graphics.beginStroke()メソッドによるカラーの指定や,Graphics.moveTo()メソッドの座標決めも,Stage.stagemousedownイベントのリスナーで初めにやってしまえば済むのではないだろうか。すると,つぎのようにTicker.tickイベントのリスナー(wipe())は,Graphics.lineTo()メソッドでひたすら直線を引き続ければよい。

// var oldPoint = new createjs.Point();

function startWipe(eventObject) {
  var mousePoint = getMousePoint();
  // oldPoint.x = mousePoint.x;
  // oldPoint.y = mousePoint.y;
  isDrawing = true;
  wipingShape.graphics
  .setStrokeStyle(radius * 2, "round", "round")
  .beginStroke(createjs.Graphics.getRGB(0x0, 0.4))
  .moveTo(mousePoint.x, mousePoint.y);
}
function wipe(eventObject) {
  if (isDrawing) {
    var mousePoint = getMousePoint();
    var mouseX = mousePoint.x;
    var mouseY = mousePoint.y;
    wipingShape.graphics
    // .beginStroke(createjs.Graphics.getRGB(0x0, 0.4))
    // .moveTo(oldPoint.x, oldPoint.y)
    .lineTo(mouseX, mouseY);
    // oldPoint.x = mouseX;
    // oldPoint.y = mouseY;
    updateCacheImage(true);
  }
}

鋭い指摘だ。筆者も初めはそう考えた。しかし,このコードでは,アルファマスクにマウスポインタの軌跡は正しく描けるものの,表現が意図どおりにならなかった。具体的には,アルファのかかった線を塗り重ねてもアルファが高まらず,もとイメージが濃くならないのだ。重なりのアルファを上げるためには,Graphics.beginStroke()メソッドを呼出して仕切り直さないといけない。すると,描き始めの座標も,改めてGraphics.moveTo()メソッドで決めることになる。

ということで,前掲コード1はこのまま生かすことにする。ただ,書いたコードを見直して,推敲を重ねることはよい習慣といえる。

カーソル替わりのインスタンスをマウスポインタに合わせて動かす

つぎは,カーソル替わりのShapeインスタンスをつくり,マウスポインタに合わせて動かしたい。アルファマスクに描かれる線の太さと同じ円形にすれば,描かれるマスクが予想しやすくなる。また,マウスポインタそのものも,矢印からかたちを変えたい。

カーソル替わりのShapeインスタンス(cursor)は新たに定める関数(createCursor())でつくり,描画の関数(draw())から呼び出す。インスタンスのアルファは半透明にした。そして,インスタンスにポインタを重ねたときのカーソルのかたちは,DisplayObject.cursorプロパティで定める。"pointer"は,指差しカーソルだ。

var cursor;

function draw(eventObject) {

  createCursor();

}

function createCursor() {
  cursor = new createjs.Shape();
  cursor.graphics
  .beginFill("white")
  .drawCircle(0, 0, radius);
  cursor.cursor = "pointer";
  cursor.alpha = 0.3;
  stage.addChild(cursor);
}

インスタンス(cursor)のアニメーションは,Ticker.tickイベントのリスナー関数(wipe())で扱う。マウスポインタの座標を調べて,インスタンスの位置をそこに合わせれればよい。ただし,マウスをドラッグしないと,キャッシュを書替える関数(updateCacheImage())が呼ばれない。この関数はStage.update()メソッドの呼出しを含む。そこで,else文にStage.update()メソッドのステートメントを加えた。

function draw(eventObject) {

function wipe(event) {
  cursor.x = stage.mouseX;
  cursor.y = stage.mouseY;
  if (isDrawing) {

  } else {
    stage.update();
  }
}

これでカーソル替わりのインスタンス(cursor)は,つねにマウスポインタに合わせて動く。ところが,ポインタのカーソルが矢印のまま変わらない。実は,ポインタをインスタンスに重ねたとき,そのカーソルを変えるには,Stage.enableMouseOver()メソッドを呼び出さなければならない※1⁠。

function draw(eventObject) {

  stage.enableMouseOver();

}

これで,カーソル替わりのインスタンス(cursor)はマウスポインタに合わせて動き,ポインタのかたちは矢印から指差しカーソルに変わる図3⁠。script要素に書いたJavaScriptの全体をコード2にまとめた。

図3 半透明のインスタンスがポインタに合わせて動き指差しカーソルに変わる

図3 半透明のインスタンスがポインタに合わせて動き指差しカーソルに変わる

コード2 インスタンスをポインタに合わせて動かして指差しカーソルに変える

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 isDrawing;
var cursor;
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 = 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.BoxBlurFilter(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();
  oldPoint.x = mousePoint.x;
  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;
    wipingShape.graphics
    .beginStroke(createjs.Graphics.getRGB(0x0, 0.15))
    .moveTo(oldPoint.x, oldPoint.y)
    .lineTo(mouseX, mouseY);
    oldPoint.x = mouseX;
    oldPoint.y = mouseY;
    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);
  }
}

これで,ひとまずお題の動きはできた。jsdo.itにもサンプルを掲げた。次回は,EaselJSサイトのデモ「ALPHAMASK FILTER」のコードと違いを見比べながら,さらに知識を深めよう。

※1
マウスポインタがインスタンスに重なったかどうか見張るのは処理の負荷を高める。そのため,デフォルトではやらず,Stage.enableMouseOver()メソッドの呼出しを求めることにしたのである。

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書