topical media & game development
mobile-graphic-easel-examples-DragAndDrop-EventDispatcher.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Rollovers and Drag & Drop</title>
<link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-UID.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Matrix2D.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-EventDispatcher.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-DisplayObject.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Container.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Stage.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-MouseEvent.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Shape.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Graphics.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-Ticker.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Text.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-ui-Touch.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Bitmap.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script>
var canvas, stage;
var mouseTarget; // the display object currently under the mouse, or being dragged
var dragStarted; // indicates whether we are currently in a drag operation
var offset;
var update = true;
function init() {
if (window.top != window) {
document.getElementById("header").style.display = "none";
}
document.getElementById("loader").className = "loader";
// create stage and point it to the canvas:
canvas = document.getElementById("testCanvas");
//check to see if we are running in a browser with touch support
stage = new createjs.Stage(canvas);
// enable touch interactions if supported on the current device:
createjs.Touch.enable(stage);
// enabled mouse over / out events
stage.enableMouseOver(10);
stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas
// load the source image:
var image = new Image();
image.src = "mobile-graphic-easel-examples-assets-daisy.png";
image.onload = handleImageLoad;
}
function stop() {
createjs.Ticker.removeEventListener("tick", tick);
}
function handleImageLoad(event) {
var image = event.target;
var bitmap;
var container = new createjs.Container();
stage.addChild(container);
// create and populate the screen with random daisies:
for(var i = 0; i < 100; i++){
bitmap = new createjs.Bitmap(image);
container.addChild(bitmap);
bitmap.x = canvas.width * Math.random()|0;
bitmap.y = canvas.height * Math.random()|0;
bitmap.rotation = 360 * Math.random()|0;
bitmap.regX = bitmap.image.width/2|0;
bitmap.regY = bitmap.image.height/2|0;
bitmap.scaleX = bitmap.scaleY = bitmap.scale = Math.random()*0.4+0.6;
bitmap.name = "bmp_"+i;
bitmap.cursor = "pointer";
bitmap.addEventListener("mousedown", function(evt) {
// bump the target in front of it's siblings:
var o = evt.target;
o.parent.addChild(o);
var offset = {x:o.x-evt.stageX, y:o.y-evt.stageY};
// add a listener to the event object's mouseMove event
// this will be active until the user releases the mouse button:
evt.addEventListener("mousemove", function(ev) {
o.x = ev.stageX+offset.x;
o.y = ev.stageY+offset.y;
// indicate that the stage should be updated on the next tick:
update = true;
});
});
bitmap.addEventListener("mouseover", function(evt) {
var o = evt.target;
o.scaleX = o.scaleY = o.scale*1.2;
update = true;
});
bitmap.addEventListener("mouseout", function(evt) {
var o = evt.target;
o.scaleX = o.scaleY = o.scale;
update = true;
});
}
document.getElementById("loader").className = "";
createjs.Ticker.addEventListener("tick", tick);
}
function tick(event) {
// this set makes it so the stage only re-renders when an event handler indicates a change has happened.
if (update) {
update = false; // only update once
stage.update(event);
}
}
</script>
</head>
<body onload="init();">
<div id="loader"></div>
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Drag & Drop Example</h1>
<p>Example of implementing drag & drop using mouse events such as <strong>onPress</strong>, <strong>onMouseUp</strong>, and <strong>onMouseMove</strong>. Some browsers do not allow access to pixel data when running local files, and may throw a security error or not work unless the content is running on a server.</p>
</header>
<div class="canvasHolder">
<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</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.
