EaselJSでインスタンスにロールオーバーしたとき指差しカーソルにする

EaselJSでインスタンスにロールオーバーしたとき指差しカーソルにする [Edit]

投稿者：野中文雄 | 投稿日：2012.11.29 | [CreateJS][HTML5][野中ゼミ]

EaselJSで、マウスポインタがインスタンスにロールオーバーしたとき、指差しカーソルに変えてみましょう。ロールオーバーとロールアウトをそれぞれ扱うイベントDisplayObject.onMouseOverとDisplayObject.onMouseOutには、使うときに注意しなければならないことがあります。

01 Shapeオブジェクトに円を描いてステージ中央に置く

まず、ロールオーバーするShapeインスタンスをタイムラインに置いて、そのGraphicsオブジェクト(Shape.graphicsプロパティ)に円を描きます。script要素はつぎのコード001のとおりです(スクリプトについて詳しくは「EaselJSで図形を描く」をお読みください)。初期化の関数(initialize())は、ロード時に呼出されるものとします。

コード001■Shapeオブジェクトに円を描いてステージ中央に置く

<script src="lib/easeljs-0.5.0.min.js"></script>
<script>
var stage;
function initialize() {
	var canvasElement = document.getElementById("myCanvas");
	stage = new createjs.Stage("myCanvas");
	var myShape = new createjs.Shape();
	stage.addChild(myShape);
	myShape.x = canvasElement.width / 2;
	myShape.y = canvasElement.height / 2;
	draw(myShape);
}
function draw(myShape) {
	var myGraphics = myShape.graphics;
	myGraphics.beginStroke("#0000FF");
	myGraphics.beginFill("#00FFFF");
	myGraphics.drawCircle(0, 0, 40);
	stage.update();
}
</script>

02 インスタンスへのロールオーバーとロールアウトを捉える

EaselJSでインスタンスへのロールオーバーとロールアウトは、DisplayObject.onMouseOverとDisplayObject.onMouseOutイベントで捉えます。ただし、予めStage.enableMouseOver()メソッドを呼出しておかないと、マウスポインタとインスタンスの重なりについてのイベントが起こりません。ポインタとインスタンスの重なりを調べて、イベントとしてStageオブジェクトの表示リストに送ることは負荷が高くなります。そのため、Stage.enableMouseOver()メソッドを呼出さないかぎり、イベントの発生は止めてあるのです。

そこで、前掲コード001の初期化の関数(initialize())につぎのようなJavaScriptコードを加えることにします。マウスカーソルは、document.body.style.cursorプロパティで変えることができます(「マウスカーソルの形を変える」参照)。

function initialize() {
	// ...[中略]...
	stage.enableMouseOver();
	myShape.onMouseOver = function (eventObject) {
		document.body.style.cursor = "pointer";
	};
	myShape.onMouseOut = function (eventObject) {
		document.body.style.cursor = "";
	};
	// ...[中略]...
}

このスクリプトを書き加えると、つぎのコード002のようになります。Shapeインスタンスにマウスポインタをロールオーバーすると指差しカーソルに変わり、ロールアウトすればもとに戻ります。

コード002■Shapeオブジェクトにロールオーバーするとポインタが指差しカーソルに変わる

var stage;
function initialize() {
	var canvasElement = document.getElementById("myCanvas");
	stage = new createjs.Stage("myCanvas");
	var myShape = new createjs.Shape();
	stage.addChild(myShape);
	stage.enableMouseOver();
	myShape.onMouseOver = function (eventObject) {
		document.body.style.cursor = "pointer";
	};
	myShape.onMouseOut = function (eventObject) {
		document.body.style.cursor = "";
	};
	myShape.x = canvasElement.width / 2;
	myShape.y = canvasElement.height / 2;
	draw(myShape);
}
function draw(myShape) {
	var myGraphics = myShape.graphics;
	myGraphics.beginStroke("#0000FF");
	myGraphics.beginFill("#00FFFF");
	myGraphics.drawCircle(0, 0, 40);
	stage.update();
}

ご参考までに、jsdo.itにサンプルを掲げました。

F-site