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

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

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

前回は,BoxBlurFilterによりぼかしたイメージのインスタンスに,AlphaMaskFilterでマスクしたもとのイメージのインスタンスを重ね,マウスクリックした部分のアルファを上げていくという表現までつくった第8回コード3)。参考までに,jsdo.itのサンプルを掲げておく。

今回は,ドラッグでアルファマスクを描くようにしよう。目指すは,EaselJSサイトのデモALPHAMASK FILTERだ。

マウスポインタの座標を直線で結ぶ

ドラッグしている間マウスポインタの座標を調べ,アルファマスクのShapeインスタンスにその軌跡を描く。座標は直線で結ぶことにしよう。直線を引くのに使うメソッドは,Graphics.moveTo()Graphics.lineTo()だ。まず,描き始めの座標をGraphics.moveTo()メソッドによって決める。その後,Graphics.lineTo()メソッドで座標を直線で結んでいく。また,線のスタイルや色は,それぞれGraphics.setStrokeStyle()Graphics.beginStroke()メソッドで定める(「EaselJSのGraphicクラスで2次ベジエ曲線を描く参照)。

Graphicsオブジェクト
.setStrokeStyle(線の太さ, 線の端, 線の角)
.beginStroke(線のカラー)
.moveTo(x座標, y座標)
.lineTo(x座標, y座標)
.lineTo(x座標, y座標)
…;

スクリプトは前回のコード3に手を入れていく。マウスイベントの扱いは,画像を読込み終えたLoadQueue.fileloadイベントのリスナー関数(draw())に加える。ステージ上でマウスボタンを押すStage.stagemousedownイベントでドラッグが始まり(startWipe()),ボタンを放すStage.stagemouseupイベントによりドラッグは終わる。ドラッグしている間のアルファマスクのアニメーションは,Ticker.tickイベントのリスナー(wipe())が行う。

function draw(eventObject) {

  // stage.addEventListener("stagemousedown", wipe);
  stage.addEventListener("stagemousedown", startWipe);
  stage.addEventListener("stagemouseup", stopWipe);

  createjs.Ticker.addEventListener("tick", wipe);
}

リスナー関数は前述3つのイベントごとに役割を分けて,以下のように書替える。Stage.stagemousedownイベントのリスナー(startWipe())は,描き始めのマウスポインタ座標をPointオブジェクトの変数(mousePoint)に納める。また,ドラッグが始まったことを示す変数(isDrawing)はtrueにした。そして,アルファマスクを描くGraphicsオブジェクトには,Graphics.setStrokeStyle()メソッドで線のスタイルだけ定めた。マスクそのものは,ドラッグの関数(wipe())が描く。なお,メソッドの第2および第3引数で,線の端と角を丸く("round")した(引数について詳しくは前出「EaselJSのGraphicクラスで2次ベジエ曲線を描く」参照)。

ドラッグでマスクを描く関数(wipe())は,Ticker.tickイベントのリスナーに定めた。ドラッグしていることは,変数(isDrawing)をif条件で確かめてから,描画に入る。マウスポインタの座標は予めローカル変数(mouseXとmouseY)にとっておく。そして,アルファマスクのGraphicsオブジェクトにアルファつきのカラーを定めて,マウスポインタの前の座標から今の座標までの直線を描いている。そして,つぎの線描のために,マウスポインタ座標はPointオブジェクトの変数(oldPoint)に納めた。

マウスボタンを放すStage.stagemouseupイベントでドラッグは終わる。そこで,ドラッグしていることを示す変数にfalseを与える。これら3つのイベントリスナーを定めることにより,アルファマスクがドラッグで描ける図1)。

var radius = 4;
var oldPoint = new createjs.Point();
var isDrawing;

/*
function wipe(eventObject) {
  var mousePoint = getMousePoint();
  var mouseX = mousePoint.x;
  var mouseY = mousePoint.y;
  wipingShape.graphics
  .beginFill(createjs.Graphics.getRGB(0x0, 0.15))
  .drawCircle(mouseX, mouseY, radius);
  updateCacheImage(true);
}
*/
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) {
  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);
  }
}
function stopWipe(event) {
  isDrawing = false;
}

図1 アルファマスクがドラッグで描かれる

図1 アルファマスクがドラッグで描かれる

script要素に書いたJavaScript全体は,つぎのコード1のとおりだ。ただし,前掲のコードではマスクに軌跡が正しく描かれているかを確かめるため,線は細くしてアルファも高めにした図1)。コード1は,目指す表現に合わせて線は太く,アルファも下げてある図2)。

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

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;
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);
  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);
  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 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) {
  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);
  }
}
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);
  }
}

図2 マスクに描く線は太くしてアルファも下げた

図2 マスクに描く線は太くしてアルファも下げた

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入