PaperJS 缩放和平移

Question

我已经成功实现了基于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;
}

然而，当您缩小回到原始状态时，这并没有考虑视图的位置 scale = 1。我的意思是我希望视图坚持 canvas 边缘。

这是截图

Answer 1

如果其他人偶然发现了这个问题，这里是答案。关键是简单地检查视图的边界然后相应地调整：

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

PaperJS 缩放和平移

PaperJS zoom and pan

javascript

canvas

zooming

pan

paperjs