4

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!

Cod1ngFree
  • 1,873
  • 6
  • 21
  • 33
  • What do you mean by "infinite canvas"? If you are refering to the size of the stage - that's limited depending on the device (around 6k-8k pixels) - but the position of objects on the stage can be pretty much infinite. - Not sure though if you meant that. – olsn Apr 07 '13 at 19:55
  • @olsn I suspect the OP means using transformations on the canvas drawing commands so that the visible content appears to continuous scroll in any direction 'forever'. – Phrogz Apr 07 '13 at 20:56
  • That is right, @Phrogz, that is what I am looking for. I saw that: http://stackoverflow.com/questions/7218645/how-to-have-an-infinitely-big-canvas But I think I can't make the canvas to be draggable, can I? I have tried something like stage.onPress, but it didn't work. – Cod1ngFree Apr 07 '13 at 23:24
  • 1
    @Cod1ngFree No, you can't make the contents of canvas draggable (they're just pixels, after all) but you can track the mouse and [use the mouse position to adjust the context transform](http://phrogz.net/tmp/canvas_zoom_to_cursor.html), redrawing the canvas as the mouse moves. – Phrogz Apr 08 '13 at 02:37

1 Answers1

11

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;
});
Lanny
  • 11,244
  • 1
  • 22
  • 30