Zoom and Pan fix - PullRequest
Новая
       30

Zoom and Pan fix

1 голос
/ 21 июня 2019

Я пытаюсь реализовать это решение, которое находится в 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; 
});

Панорамирование работает нормально.Проблема с масштабированием.Увеличивает, но не переводит в центр.Математическая формула неверна?

1 Ответ

2 голосов
/ 21 июня 2019

Мне показалось, что я уже отправил ответ на этот вопрос, но не смог его найти.
Вот обсуждение о решении, реализованном в 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));
});
...