CreateJS 公開とマウス座標の変換

座標変換その 1

前回の記事に書いたように、CreateJS のフレームワーク内で、マウスの移動やマウスから指が離れたことを知らせるイベント用のリスナを定義できるのは、onPress と onMouseDown イベントリスナの中だけです。 （少なくとも今のところ）

他の状況でも、マウスの位置を知りたいというような場合は、Canvas タグを利用します。下の例のように、必要なイベントのリスナを canvas に定義すると、ブラウザからマウスの操作状況を取得できるようになります。

var canvas;
// マウスの x 座標と y 座標を保持する
var _mouseX;
var _mouseY;
 
function init() {
  // canvas にイベントリスナを設定
  canvas = document.getElementById("canvas");
  canvas.onmousemove = mouseMove;
}
 
function mouseMove(e) {
  if(!e) { e = window.event; }
  // canvas 上の座標に変換
  _mouseX = e.pageX - canvas.offsetLeft;
  _mouseY = e.pageY - canvas.offsetTop;
}

ただし、ここで取得できる座標は HTML が表示されているウインドウを基準とする座標のため、そのままでは使いにくいかもしれません。ステージ （canvas） を基準とする座標に変換するには、上の例のように canvas の座標分、値を変更します。

座標変換その 2

ステージ上の座標は、DisplayObject の globalToLocal() メソッドにより、特定の DisplayObject の座標系に変換できます。

Point globalToLocal(x , y)

globalToLocal() メソッドの引数は、ステージ上の x, y 座標です。戻り値は、ローカル座標に変換後の値を持つ Point オブジェクトです。

例えば、上の例で取得したマウス座標は、以下のように変換できます。

var canvas;
var stage;
var shape;
 
var _mouseX;
var _mouseY;
var _lastPoint;
 
function init() {
  canvas = document.getElementById("canvas");
  stage = new Stage(canvas);
 
  // DisplayObject をステージに追加
  shape = new Shape();
  shape.x = 40;
  shape.y = 20;
  stage.addChild(shape);
 
  Ticker.addListener(window);
}
 
function tick() {
   // 既にマウス座標が取得されているものと仮定
  _lastPoint = shape.globalToLocal(_mouseX, _mouseY);
}

これで、ある点がオブジェクトに含まれるかを、簡単に判断できるようになります。

CreateJS の DisplayObject にはオプジェクトと点の重なりを判断する hitTest() メソッドが用意されています。このメソッドの引数には、判定するオブジェクトを基準とした座標系で位置を指定します。

// 座標を shape 基準に変換
_lastPoint = shape.globalToLocal(_mouseX, _mouseY);
 
// 重なりの判定
if (shape.hitTest(_lastPoint.x, _lastPoint.y)) {
  // 重なっていた場合の処理を記述
}

引数に指定された座標と重なっていると true が、重なっていなければ false が返されます。影などは重なりの判断に含まれません。