EaselJSでcanvasのマウスオーバーを試してみた

を使いやすくするJavascriptライブラリEaselJS、マウスオーバーができるようなので試してみた。

canvasのオブジェクトを指定してStageを作成して、Containerを追加する。
canvasには、イベントハンドラをしかけておいて、マウス座標を取得するようにする。
両方に「mouseChildren = true」を指定する。

これにbox1,box2のShapeを作って各々四角を描画する。
で、すでにStageに追加してあるContainerに追加する。ここまでは簡単。

ちょいはまったのが tick() の設定。
サンプルだとtick()という関数を何気に作ってる感じだけど、これはグローバルであることが必須のようで、以下のように「_tick()」とか作っておいて「tick = _tick」とかしないと動かない（ソース最下部のあたりね）。

ここでマウスの座標を監視していて、「stage.getObjectUnderPoint(stage.mouseX, stage.mouseY)」でマウス座標上にいるShapeがあったら、サイズ変更して15度ローテーションしてドロップシャドウ。なければターゲットのサイズなどを戻す。
このへんちょい手抜きだけど、イベントハンドラをいろいろ工夫することで諸々できそう。

var $j = jQuery.noConflict();
$j(document).ready(function(){

	var canvas;
	var stage;
	var cnt;
	var mouseTarget;
	var selected;

	canvas = document.getElementById("testCanvas");
	stage = new Stage(canvas);
	cnt = new Container();

	canvas.onmousemove = onMouseMove;
	stage.mouseChildren = true;
	cnt.mouseChildren = true;

	var box1 = new Shape();
	box1.setFillStyle("#006699");
	box1.fillRect(10,10,100,100);
	box1.regY = 50;
	box1.regX = 50;
	box1.y = 100;
	box1.x = 100;
	box1.mouseEnabled = true;

	var box2 = new Shape();
	box2.setFillStyle("#996600");
	box2.fillRect(10,10,50,50);
	box2.regY = 25;
	box2.regX = 25;
	box2.y = 100;
	box2.x = 300;
	box2.mouseEnabled = true;
	
	cnt.addChild(box1);
	cnt.addChild(box2);
	stage.addChild(cnt);

	function _tick() {
	 if(stage.mouseX && stage.mouseY){
	   mouseTarget = stage.getObjectUnderPoint(stage.mouseX, stage.mouseY);
	   if(mouseTarget){
	     selected = mouseTarget; 
//	     console.log( "onMouse:" +stage.mouseX, stage.mouseY);
	     selected.scaleX = selected.scaleY = 1.2;
	     selected.rotation = 15;
	     selected.shadow = new Shadow("#666", 4, 4, 4);
	   }
	   else {
	     if(selected) {
  	     selected.scaleX = selected.scaleY = 1;
	       selected.rotation = 0;
  	     selected.shadow = "";
  	   }
	   }
	 }
	 stage.tick();
	}
	tick = _tick;

	Tick.addListener(window);

  function onMouseMove(e) {
	 if(!e){ var e = window.event; }
	 stage.mouseX = e.pageX-canvas.offsetLeft;
	 stage.mouseY = e.pageY-canvas.offsetTop;
  }
});