Infinite canvas with EaselJS

Question

Is there any way to display an infinite canvas with EaselJS? I have read the ways to do it with Javascript or JQuery, but is there any way to manage it with EaselJS?

Thanks!

Answer 1

You can drag/drop the canvas itself using JavaScript/jQuery - but there is a built-in drag-and-drop model on EaselJS content. Check out the DragAndDrop samples in the examples folder.

The main steps are:

• Listen for a mousedown event on something. You should use the built-in EaselJS events on any display object. You can't use the stage event "stagemousedown", because it doesn't expose the drag events you need, and the DOM events on Canvas won't be of any help.
• The mouse event that the event handler contains will dispatche additional events for drag and drop. Add listeners for "mousemove", and "mouseup".
• Respond to the mouse move event to move content on the canvas.

I threw together a little spike to show this. http://jsfiddle.net/lannymcnie/jKuyy/1/

It draws a bunch of content, and then you can drag it around. The red box is what listens to the mouse events, but it then just moves a big container with all the content.

Here are the highlights:

dragBox.addEventListener("mousedown", startDrag); // Object listens to mouse press

function startDrag(event) {
    // Get offset (not shown here, see fiddle)
    event.addEventListener("mousemove", doDrag);
}
function doDrag(event) {
    // Reposition content using event.stageX and event.stageY (the new mouse coordinates)
}

Hope it helps!

Edit: The NEXT version of EaselJS (0.7.0+, available in GitHub since August, 2013) has a brand new drag and drop model that's even easier to use. The new bubbling event model lets you just attach pressmove and pressup events on any object to get events any time someone presses an object, then makes a dragging action.

dragBox.on("pressmove", function(event) {
    // Note that the `on` method automatically sets the scope to the dispatching object
    // Unless you pass a scope argument.
    this.x = event.stageX;
    this.y = event.stageY;
});