EaselJSでドラッグ

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;

としてやる。