前回は，
今回は，
マウスポインタの座標を直線で結ぶ
ドラッグしている間マウスポインタの座標を調べ，
Graphicsオブジェクト
.setStrokeStyle(線の太さ, 線の端, 線の角)
.beginStroke(線のカラー)
.moveTo(x座標, y座標)
.lineTo(x座標, y座標)
.lineTo(x座標, y座標)
…;
スクリプトは前回のコード3に手を入れていく。マウスイベントの扱いは，
function draw(eventObject) {
// stage.addEventListener("stagemousedown", wipe);
stage.addEventListener("stagemousedown", startWipe);
stage.addEventListener("stagemouseup", stopWipe);
createjs.Ticker.addEventListener("tick", wipe);
}
リスナー関数は前述3つのイベントごとに役割を分けて，
ドラッグでマスクを描く関数
マウスボタンを放すStage.
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 アルファマスクがドラッグで描かれる
script要素に書いたJavaScript全体は，
コード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 マスクに描く線は太くしてアルファも下げた
