ICS MEDIA - インタラクションデザイン×ウェブテクノロジー

HTML5 と CreateJS で学ぶインタラクションデザイン

CreateJS でマウス座標を調べる方法

CreateJSにはマウスイベントを管理する機能が備わっています。簡単なインタラクションの実装例を通して学習していきましょう。

マウス座標

ステージ上のマウス座標はstage.mouseXstage.mouseYプロパティーから取得することができます。

// マウス座標を取得する
var mx = stage.mouseX;
var my = stage.mouseY;

マウスに追随してシェイプを移動させてみましょう。マウス座標はリアルタイムで変動するので、tickイベント内で処理するといいでしょう。

// ステージを作成
var stage = new createjs.Stage("myCanvas");

// オブジェクトの作成
var shape = new createjs.Shape();
shape.graphics.beginFill("DarkRed");
shape.graphics.drawCircle(0, 0, 40);
stage.addChild(shape);

// tick イベントを登録する
createjs.Ticker.addEventListener("tick", handleTick);

function handleTick(event) {
    // マウス座標を取得する
    var mx = stage.mouseX;
    var my = stage.mouseY;
    // シェイプをマウスに追随させる
    shape.x = mx;
    shape.y = my;

    // 画面を更新する
    stage.update();
}

次の記事へ