topical media & game development
mobile-graphic-easel-tutorials-Mouse-Interaction-stage.htm / htm
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: Mouse Events on Stage</title>
<link href="../shared/demo.css" rel="stylesheet" type="text/css">
<script src="../../lib/easeljs-0.6.0.min.js"></script>
<script>
var stage, label, shape, oldX, oldY, size, color;
function init() {
stage = new createjs.Stage("demoCanvas");
stage.enableDOMEvents(true);
label = new createjs.Text("finger paint", "24px Arial");
label.x = label.y = 10;
shape = new createjs.Shape();
stage.addChild(shape, label);
// set up our defaults:
color = "#0FF";
size = 2;
// add handler for stage mouse events:
stage.addEventListener("stagemousedown", function(event) {
size = 10;
})
stage.addEventListener("stagemouseup", function(event) {
color = createjs.Graphics.getHSL(Math.random()*360, 100, 50);
size = 2;
})
stage.addEventListener("stagemousemove",function(evt) {
if (oldX) {
shape.graphics.beginStroke(color)
.setStrokeStyle(size, "round")
.moveTo(oldX, oldY)
.lineTo(evt.stageX, evt.stageY);
stage.update();
}
oldX = evt.stageX;
oldY = evt.stageY;
})
stage.update();
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="200">
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.