EaselJS のマウスイベント処理

イベント発生時に呼び出されるリスナ関数の定義は、以下のように記述します。

displayObject.onClick = function(evt) { alert("onClick"); }

イベントリスナを定義したら、Stage オブジェクトに addChild() で追加すると （順序は逆でも良いですが）、マウス操作に反応するオブジェクトが画面に配置されます。

イベントが発生すると、リスナにはイベントオブジェクトが渡されます。これは MouseEvent のオブジェクトです。

MouseEvent

MouseEvent は、以下の 5 つの属性を持っています。

• nativeEvent : ブラウザから渡されたネイティブの MouseEvent オブジェクト。ブラウザからのマウスイベントでない場合の値は null
• stageX : ステージ上のマウスの x 座標
• stageY : ステージ上のマウスの y 座標
• target : イベントの対象となった表示オブジェクト。デフォルト値は null
• type : イベントの種類 （onClick, onPress, onMouseDown, onMouseUp, onMouseMove）

onClick が Container オブジェクトに定義されていた場合、Container の子オブジェクトがクリックされると、Container の onClick ハンドラが呼ばれます。onDoubleClick も同様です。

container.addChild(shape);
// onClickはshapeをクリックしても呼ばれる
container.onClick = function(evt) { alert("onClick"); }
 
stage.addChild(container);

onMouseOut と onMouseOver イベント

onMouseOut と onMouseOver はデフォルトでは利用できません。この 2 つのイベントはパフォーマンスへの影響が大きいためです。

利用する場合は、事前に stage.enableMouseOver() メソッドを使って、イベントを発生させる頻度を指定する必要があります。

displayObject.onMouseOver = function(evt) { alert("onMouseOver"); }
 
// 1秒間に最大10回MouseOver/onMouseOutイベントを発生させる
stage.enableMouseOver(10);

enableMouseOver() に指定する頻度は、Ticker の更新頻度とは別に扱えます。指定できる最大値は 50 です。

頻度を 0 に設定すると、onMouseOut と onMouseOver が使えない （つまりデフォルトの） 状態になります。

onMouseMove と onMouseUp イベント

マウスが押された後 （onPress 発生後）、マウスが移動した、あるいはマウスから指が離れた、という状態を知らせるイベントが、表示オブジェクトにはありません。

代わりに、これらのイベントは MouseEvent オブジェクト経由で通知されます。MouseEvent オブジェクトに onMouseMove もしくは onMouseUp のイベントリスナを設定すると、ユーザが指を離すまで、これらのイベントが通知されます。

ただし、この使い方ができるのは、onPress か onMouseDown イベントのハンドラ内だけです。

下は、onPress イベントハンドラ内で onMouseMove イベントを割り当てて、オブジェクトのドラッグ & ドラップを実現する例です。

var update = true;
 
function init() {
  canvas = document.getElementById("canvas");
  stage = new Stage(canvas);
  stage.enableMouseOver(10);
 
  var circle = new Shape();
  circle.graphics.beginFill("#FF0000").drawCircle(0,0,50);
  stage.addChild(circle);
 
   // スコープを限定するための関数を定義
  (function(target) {
    // onPressイベントのリスナを定義
    circle.onPress = function(evt) {
      // 縦横それぞれtargetのマウスからの相対位置を計算
      var offsetX = target.x-evt.stageX;
      var offsetY = target.y-evt.stageY;
 
      // onMouseMoveイベントのリスナを定義
      evt.onMouseMove = function(ev) {
        // 表示オブジェクトの新しい座標を計算
        target.x = ev.stageX+offsetX;
        target.y = ev.stageY+offsetY;
 
        // tick()が描画を更新するよう設定
        update = true;
      }
    }
  })(circle);
 
  Ticker.addListener(window);
}
 
function tick() {
  // updateの値を確認して、画面を更新
  if (update) {
    update = false;
    stage.update();
  }
}