スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

今回は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

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

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search