PaperJS zoom and pan

canvas, javascript, pan, paperjs, zooming

Solution

Here's the answer if anyone else stumbles upon this. The key is simply to check the bounds of the view then adjust accordingly:

    bounds = paper.view.bounds;

    if (bounds.x < 0) paper.view.center = paper.view.center.subtract(new Point(bounds.x, 0));
    if (bounds.y < 0) paper.view.center = paper.view.center.subtract(new Point(0, bounds.y));

    bounds = paper.view.bounds;
    var 
        w = bounds.x + bounds.width,
        h = bounds.y + bounds.height;

    if (w > paper.view.viewSize.width) paper.view.center = paper.view.center.subtract(new Point(w - paper.view.viewSize.width, 0));
    if (h > paper.view.viewSize.height) paper.view.center = paper.view.center.subtract(new Point(0, h - paper.view.viewSize.height));

Problem

I have successfully implemented a zooming feature based on this example ``` zoom: function(delta, point){ if (!delta) return; var oldZoom = paper.view.zoom, oldCenter = paper.view.center, viewPos = paper.view.viewToProject(point); newZoom = delta > 0 ? oldZoom * 1.05 : oldZoom / 1.05; if (!this.allowedZoom(newZoom)) return; var zoomScale = oldZoom / newZoom, centerAdjust = viewPos.subtract(oldCenter), offset = viewPos.subtract(centerAdjust.multiply(zoomScale)).subtract(oldCenter); paper.view.center = view.center.add(offset); }, allowedZoom: function(zoom){ zoom = Math.max(zoom, this.settings.minZoom); zoom = Math.min(zoom, this.settings.maxZoom); if (zoom !== paper.view.zoom) { paper.view.zoom = zoom; return zoom; } return null; } ``` however this does not take into account the position of the view when you zoom out back to the original `scale = 1`. What I mean is I would like the view to stick to the canvas edge. Here's a screenshot

Original source