Canvas Panning AND Scaling

JohnMcLear / draw

A real time collaborative drawing tool using nodejs, socket.io & paper.js

Apache License 2.0

482 stars 158 forks source link

Canvas Panning AND Scaling #204

Closed bytesnz closed 8 years ago

bytesnz commented 8 years ago

Implemented canvas panning and scaling. With mouse:

can pan holding down middle button, or SHIFT + left button
can scale with wheel. With 2 fingers:
can pan by moving fingers around
can scale by pinching

Added a zero button to take the canvas back to 0,0, so have a easy way of getting back to the start Added a coordinates status box so can keep track of where you are in the canvas and what the zoom factor is

JohnMcLear commented 8 years ago

Probably difficult to do but can you also add some tests please? :)

bytesnz commented 8 years ago

Should be able to. Will have a think / look. Cheers.

bytesnz commented 8 years ago

Hmm. jquer.simulate.js doesn't have the capability needed for testing these events (middle click and touch events). Don't suppose you know of any libraries that do?

theoryshaw commented 8 years ago

Added a zero button to take the canvas back to 0,0, so have a easy way of getting back to the start

Another user pattern you see quick a bit with various architect/eng tools, is double clicking with the middle mouse button(or wheel) and it zooms to the extents of the contents.