topical media & game development
mobile-graphic-easel-tutorials-Mouse-Interaction-hitArea.htm / htm
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: onClick</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
<script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage;
function init() {
stage = new createjs.Stage("demoCanvas");
stage.enableMouseOver(10);
var label1 = new createjs.Text("text without hitArea", "48px Arial", "#F00");
label1.x = label1.y = 10;
label1.alpha = 0.5;
var label2 = new createjs.Text("text with hitArea", "48px Arial", "#00F");
label2.x = 10;
label2.y = 80;
label2.alpha = 0.5;
// create a rectangle shape the same size as the text, and assign it as the hitArea
// note that it is never added to the display list.
var hit = new createjs.Shape();
hit.graphics.beginFill("#000").drawRect(0, 0, label2.getMeasuredWidth(), label2.getMeasuredHeight());
label2.hitArea = hit;
label1.addEventListener("mouseover", handleInteraction);
label2.addEventListener("mouseover", handleInteraction);
label1.addEventListener("mouseout", handleInteraction);
label2.addEventListener("mouseout", handleInteraction);
stage.addChild(label1, label2);
stage.update();
createjs.Ticker.addEventListener("tick", stage);
}
function handleInteraction(event) {
event.target.alpha = (event.type == "mouseover") ? 1 : 0.5;
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="150">
alternate content
</canvas>
</body>
</html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.