http://createjs.com/tutorials/Mouse%20Interaction/
今回はcreatejsのMouse操作について勉強したいと思います。目標はShapeをドラッグ操作で移動させることです。それに伴いマウスイベントについて詳しく見ていきます。
THE BASICS
- マウスイベントの取得は、基本的にaddEventListenerを用いてリスナーを登録するだけです
- 例：https://jsfiddle.net/kzqooq/Locg1wkb/1/
circle.addEventListener("click", function(event) { alert("clicked"); })
- click, mousedown, mouseup, dblclick, pressmove, pressup, mouseover / mouseout, rollover / rollout のイベントをトリガーにできます
- mouseover / mouseout, rollover / rolloutについては、stage.enableMouseOver(frequency)で発生頻度を設定できます
- stage.enableMouseOver()を実行しないとそれらのイベントは発生しません
- frequencyは１秒間に発生するイベント数です
- frequencyのデフォルトは２０です
- onメソッドが addEventListenerのショートカットとして用意されています
- onは、addEventListenerと違い、いくつかのパラメータを指定できます
- 例：https://jsfiddle.net/kzqooq/Locg1wkb/2/
circle.on(type, listener, scope, once, data, useCapture);
MOUSEEVENT
- リスナーにはeventが渡されます
- event.typeでイベントの種類が得られます
- event.targetでイベントが発生したShapeが得られます
- event.nativeEventで元々のeventにアクセスできます
- event.stageX/Yで座標が得られます
- 例：https://jsfiddle.net/kzqooq/Locg1wkb/3/
- 例：https://jsfiddle.net/kzqooq/Locg1wkb/4/
circle.on("click", function(evt) {
alert("type: "+evt.type+" target: "+evt.target+" stageX:"+evt.stageX);
});
BUBBLING
- イベントが発生した時capture, target, bubbling の３フェイズが実行されます
- captureフェイズはstageからtargetの親に向かってイベントが伝わります
- targetフェイズはtargetのみでイベントが発生します
- bubblingフェイズはtargetの親からstageに向かってイベントが伝わります
- captureフェイズでリスナーを実行するにはuseCaputreをtrueにする必要があります
- 例：https://jsfiddle.net/kzqooq/Locg1wkb/5/
MOUSECHILDREN & MOUSEENABLED
- イベントを発生させないためには2つの方法があります
- １つは、親要素のmouseChildlenをfalseにすることです
- １つは、targetのmouseEnabledをfalseにすることです
- 例：https://jsfiddle.net/kzqooq/Locg1wkb/6/
- 例：https://jsfiddle.net/kzqooq/Locg1wkb/7/
HITAREA
- EaselJSでは不透明なピクセルに対してヒットエリアを設定しています
- hitAreaプロパティにshapeを設定することでヒットエリアをそのshapeの領域に拡張できます
- 例：https://jsfiddle.net/kzqooq/Locg1wkb/8/
STAGE MOUSE EVENTS
- stageも同様に不透明なピクセルしかクリックできません
- しかし、stagemousedown, stagemouseup, stagemousemove イベントが特別に用意されています
- これらのイベントは不透明なピクセルでも発生します
- 通常stagemousemoveイベントはcanvas外にでると無効になります
- これを有効にするにはmouseMoveOutsideをtureにする必要があります
- その場合、ポインタの位置を知るにはstageX/YではなくrawX/Yを使用します
- 例：無効：https://jsfiddle.net/kzqooq/Locg1wkb/11/
pointerがCanvas内あるかはstage.mouseInBoundsとmouseleave/mouseenterイベントで判定できます.
DRAG AND DROP
- shapeをドラッグするとpressmoveイベントが発生し、離すとpressupイベントが発生します。
- 例：https://jsfiddle.net/kzqooq/Locg1wkb/13/
OTHER USEFUL APIS
- Container.getObjectUnderPoint():ポイントの下にある最上位のオブジェクトを返します
- Container.getObjectsUnderPoint():ポイントの下にあるオブジェクトを全て返します
- DisplayObject.hitTest():ポイントがオブジェクトと重なっているか判定します
以上です。ネイティブなイベントをEaselJSがラップしてくれてるので、扱いやすくなっていると思います。