2017/04/08

[createjs] ステージ上をドラッグしている途中のマウス位置を取得する

gihyo.jpのcreatejsの記事を実際にやってみてちょっとひっかかった
http://gihyo.jp/design/serial/01/createjs/0009

記事は2013年のもので、createjs側の書き方が変わっていたみたい
記事内ではTickerでstage.mouseXでマウス位置を取得していたが、easeljsのバージョン0.8.2ではマウスを移動しても、ドラッグしようとしてmousedownした際の位置の値が返ってくるだけで移動した後の位置は取得できなかった

新しい書き方はstageに対して「stagemousemove」というイベントを使うようだ。
これでタッチデバイスも反応するのかは調べてみよう

let stage = new createjs.Stage(canvasElement);
stage.addEventListener('stagemousemove', function(){
//ドラッグ中にしたい処理
});

シェイプなどのインスタンスをドラッグする際は「pressmove」というイベントらしい。