Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

142 lines (116 sloc) 4.886 kb
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Rollovers and Drag & Drop</title>
<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
<script type="text/javascript" src="../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);
// load the source image:
var image = new Image();
image.src = "assets/daisy.png";
image.onload = handleImageLoad;
}
function stop() {
createjs.Ticker.removeListener(window);
}
function handleImageLoad(event) {
var image = event.target;
var bitmap;
var container = new createjs.Container();
stage.addChild(container);
// create a shape that represents the center of the daisy image:
var hitArea = new createjs.Shape();
hitArea.graphics.beginFill("#FFF").drawEllipse(-11,-14,24,18);
// 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;
// assign the hitArea to each bitmap to use it for hit tests:
bitmap.hitArea = hitArea;
// wrapper function to provide scope for the event handlers:
(function(target) {
bitmap.onPress = function(evt) {
// bump the target in front of it's siblings:
container.addChild(target);
var offset = {x:target.x-evt.stageX, y:target.y-evt.stageY};
// add a handler to the event object's onMouseMove callback
// this will be active until the user releases the mouse button:
evt.onMouseMove = function(ev) {
target.x = ev.stageX+offset.x;
target.y = ev.stageY+offset.y;
// indicate that the stage should be updated on the next tick:
update = true;
}
}
bitmap.onMouseOver = function() {
target.scaleX = target.scaleY = target.scale*1.2;
update = true;
}
bitmap.onMouseOut = function() {
target.scaleX = target.scaleY = target.scale;
update = true;
}
})(bitmap);
}
document.getElementById("loader").className = "";
createjs.Ticker.addListener(window);
}
function tick() {
// 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();
}
}
</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 &amp; Drop Example With Custom Hit Areas</h1>
<p>This example is the same as the DragAndDrop example, except it uses <strong>hitArea</strong> to make only the center part of the daisy respond to mouse interactions.</p>
</header>
<div class="canvasHolder">
<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.