KineticJS入門 – イベントを登録してみる

今回はKineticJSで生成したオブジェクトにイベントを登録してみます。

KineticJSでは、シェイプオブジェクトに対して、マウスオーバー、クリックやドラッグなどのマウスイベントを検出することができます。

実装方法は以下のようにオブジェクトに対して、イベントを登録するだけです。

    var rect = new Kinetic.Rect({
        x:100, 
        y:25, 
        width:100, 
        height:50, 
        stroke:"red"
    });
	rect.on("mouseover", function(){ 
		alert("Mouse Over");
	});
	rect.on("mouseout", function(){
		alert("Mouse Out");
	});
	rect.on("click", function(){
		alert("Click");
	});

サンプルでは、赤枠の四角形に対して、マウスオーバー、マウスアウト、クリックでメッセージを出力するように作成してみました。
ベースとなるソースは前回までに取り上げたので割愛します。

関数「on」の第一引数を以下のように切り替えることで、さまざまなイベントを実装できます。

mouseover	mouseout	mousemove
mousedown	mouseup	click
dblclick	dragstart	dragend

イベント発生時にマウス位置なども取得できるので、ゲームなどを作成する際に活用できそうですね。