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.

Implausibility

Answer 1

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.

Ireland

Not sure if this was released at time of writing but with .onMouseDrag you can now do event.delta to get the coordinate difference between mouse down and mouse up – Slipnoose

@ScottAnderson good idea - but after a quick test and read in the documentation i found that it is not the same: event.delta = event.point - event.lastPoint so its the delta from the last time the event fired. and in the test it was really not the same result: – Epp

sketch.paperjs.org/#V/0.11.8/S/… – Epp

This approach has a stuttering problem - see my answer below. – Burton

Answer 2

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;
}

Implausibility

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'});

Burton

This should be the correct answer. It solves my stuttering problem. – Making