缩放和平移修复

Question

我正在尝试在 coffescript 中实现这个解决方案：https://matthiasberth.com/tech/stable-zoom-and-pan-in-paperjs。

我目前有：

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

window.addEventListener("wheel", function(e) {
    var dir = Math.sign(e.deltaY),
        factor = 1.05;

    if ( dir < 0 ) {
        paper.view.zoom *= factor;

    } else if ( dir > 0 ) {
        paper.view.zoom /= factor;
    }

    offset = new paper.Point(e.deltaX,-e.deltaY);
    offset = offset.multiply(factor);
    a = paper.view.center.add(offset);
    paper.view.center = a; 
});

平底锅工作正常。问题在于缩放。它会缩放但不会转换到中心。数学公式错了吗？

Answer 1

我好像已经发布了这个问题的答案，但是找不到。
这里有一个discussion about the solution implemented in http://sketch.paperjs.org（关于缩放工具）
这是一个 fiddle 演示我对稳定 pan/zoom.

的实现

// This controls the zoom intensity.
var ZOOM_FACTOR = 1.5;

// Draw a circle.
new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'orange'
});

// On mouse drag...
function onMouseDrag(event) {
    // ...update view center.
    paper.view.center = event.downPoint.subtract(event.point).add(paper.view.center);
};

// On mouse scroll...
$('canvas').mousewheel(function(event) {
    // Store previous view state.
    var oldZoom = view.zoom;
    var oldCenter = view.center;

    // Get mouse position.
    // It needs to be converted into project coordinates system.
    var mousePosition = view.viewToProject(new Point(event.offsetX, event.offsetY));

    // Update view zoom.
    var newZoom = event.deltaY > 0
        ? oldZoom * ZOOM_FACTOR
        : oldZoom / ZOOM_FACTOR;
    view.zoom = newZoom;

    // Update view position.
    view.center += (mousePosition - oldCenter) * (1 - (oldZoom / newZoom));
});

缩放和平移修复

Zoom and Pan fix

paperjs