前回は,
軌跡の描き方をお題と比べる
まず,
ドラッグを始めるリスナー関数
var wipingShape;
var oldPoint = new createjs.Point();
function startWipe(eventObject) {
var mousePoint = getMousePoint();
oldPoint.x = mousePoint.x;
oldPoint.y = mousePoint.y;
wipingShape.graphics
.setStrokeStyle(radius * 2, "round", "round");
}
function wipe(eventObject) {
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;
}
お題の
細かな中身はこれから順を追って説明する。だから,
var drawingCanvas;
var oldPt;
var oldMidPt;
function handleMouseDown(event) {
oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
oldMidPt = oldPt;
}
function handleMouseMove(event) {
var midPoint = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y+stage.mouseY >> 1);
drawingCanvas.graphics.setStrokeStyle(40, "round", "round")
.beginStroke("rgba(0,0,0,0.15)")
.moveTo(midPoint.x, midPoint.y)
.curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;
oldMidPt.x = midPoint.x;
oldMidPt.y = midPoint.y;
}
- ※1
- 「ALPHAMASK FILTER」
は, アニメーションの関数 (handleMouseMove()) をStage. stagemousemove イベントのリスナーとして加えている。アニメーションの表現としては,Ticker. tick イベントで扱った場合と大きな違いはない。 - ※2
- 「>> 1」
は, 2進数の整数としてひと桁下げる演算だ。したがって, 2で割って小数値を切捨てるのに等しい。
2次ベジエ曲線を描く
Graphics.
2次ベジエは,
Graphicsオブジェクト.quadraticCurveTo(コントロールx座標, コントロールy座標, 終点x座標, 終点y座標)
曲線の設定や引き始めの座標決めなどは,
Graphicsオブジェクト.beginStroke(カラー)
.setStrokeStyle(各スタイル, …)
.moveTo(始点x座標, 始点y座標)
.quadraticCurveTo(コントロールx座標, コントロールy座標, 終点x座標, 終点y座標);
さて,
そこで,
前項で確かめたお題の