时间戳

首页 > 解决方案 > 缩放和平移修复

paperjs - 缩放和平移修复

问题描述

我正在尝试在 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; 
});

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

标签： paperjs

解决方案

在我看来，我已经发布了这个问题的答案，但我找不到。
这是关于http://sketch.paperjs.org中实现的解决方案的讨论（关于缩放工具）。 这是一个演示我实现稳定平移/缩放的小提琴。

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

推荐阅读