How to pan using paperjs

Question

I have been trying to figure out how to pan/zoom using onMouseDrag, and onMouseDown in paperjs.
The only reference I have seen has been in coffescript, and does not use the paperjs tools.

Answer 1

This took me longer than it should have to figure out.

var toolZoomIn = new paper.Tool();
toolZoomIn.onMouseDrag = function (event) {
    var a = event.downPoint.subtract(event.point);
    a = a.add(paper.view.center);
    paper.view.center = a;
}

Answer 2

you can simplify Sam P's method some more:

var toolPan = new paper.Tool();
toolPan.onMouseDrag = function (event) {
    var offset = event.downPoint - event.point;
    paper.view.center = paper.view.center + offset;
};

the event object already has a variable with the start point called downPoint.

i have put together a quick sketch to test this.

Answer 3

Unfortunately you can't rely on event.downPoint to get the previous point while you're changing the view transform. You have to save it yourself in view coordinates (as pointed out here by Jürg Lehni, developer of Paper.js).

Here's a version that works (also in this sketch):

let oldPointViewCoords;

function onMouseDown(e) {
    oldPointViewCoords = view.projectToView(e.point);
}

function onMouseDrag(e) {
    const delta = e.point.subtract(view.viewToProject(oldPointViewCoords));
    oldPointViewCoords = view.projectToView(e.point);
    view.translate(delta);
}

view.translate(view.center);
new Path.Circle({radius: 100, fillColor: 'red'});