EaselJSでのマウスイベントについて。
簡単なサンプル
JS
var stage;
var myShape;
var canvas = document.getElementById("myCanvas");
//初期設定
function initialize() {
stage = new createjs.Stage(canvas);
for (var i = 0; i < 10; i++) {
myShape = new createjs.Shape();
stage.addChild(myShape);
myShape.x = Math.round(Math.random() * canvas.width);
myShape.y = Math.round(Math.random() * canvas.width);
draw(myShape.graphics);
myShape.addEventListener("mousedown", startDrag);
}
}
//描画
function draw(myGraphics) {
var myColors = [
'#224687',
'#2ABFD4',
'#FFCD40',
'#E61875',
'#8BC34A',
'#AB47BC'
];
var randomColor = myColors[Math.floor(Math.random() * myColors.length)];
myGraphics.beginFill(randomColor);
myGraphics.drawPolyStar(0, 0, 40, 5, 0.6, -90);
stage.update();
}
//マウスクリックで mousemove mouseup時のイベントを登録
function startDrag(eventObject) {
var instance = eventObject.target;
eventObject.addEventListener("mousemove", drag);
eventObject.addEventListener("mouseup", stopDrag);
instance.dispatcher = eventObject;
instance.offset = new createjs.Point(instance.x - eventObject.stageX, instance.y - eventObject.stageY);
}
//ドラッグ時、インスタンスの座標をマウスの座標に設定
function drag(eventObject) {
var instance = eventObject.target;
var offset = instance.offset;
instance.x = eventObject.stageX + offset.x;
instance.y = eventObject.stageY + offset.y;
instance.rotation += 5
stage.update();
}
//マウスアップでドラッグ解除
function stopDrag(eventObject) {
var dispatcher = eventObject.target.dispatcher;
dispatcher.removeEventListener("mousemove", drag);
dispatcher.removeEventListener("mouseup", stopDrag);
}
initialize();
イベントの登録・解除
//イベントの登録
オブジェクト.addEventListenter("click",リスナー関数)
//イベントの解除
オブジェクト.removeEventListener("click",リスナー関数)
ドラッグ&ドロップ時のイベントの設定
1.マウスクリック時
startDrag...mousemove/mouseupのイベント関数を登録
2.ドラッグ時
drag...インスタンスの座標をマウスの座標に設定
3.マウスアップ時
stopDrag...イベントの解除
ドラッグ時のインスタンスの座標
マウスポインタの座標はこれで取得できる
eventObject.stageX
eventObject.stageY
ドラッグするとインスタンスの座標が真ん中に来ちゃうので、
instance.x = eventObject.stageX + offset.x;
instance.y = eventObject.stageY + offset.y;
としてやる。