Skip to content


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>
<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. -->
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) {
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:
// enabled mouse over / out events
// load the source image:
var image = new Image();
image.src = "assets/daisy.png";
image.onload = handleImageLoad;
function stop() {
function handleImageLoad(event) {
var image =;
var bitmap;
var container = new createjs.Container();
// create a shape that represents the center of the daisy image:
var hitArea = new createjs.Shape();"#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);
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; = "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:
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;
document.getElementById("loader").className = "";
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
<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>
<div class="canvasHolder">
<canvas id="testCanvas" width="960" height="400"></canvas>
Jump to Line
Something went wrong with that request. Please try again.