Как центрировать масштабирование бумаги JointJS

Question

Я реализовал масштабирование бумаги и отлично работает.

Я связал его с прокруткой колесика мыши, но я все еще сталкиваюсь с одной проблемой: в API функция масштабирования определяется как scale paper.scale(sx, sy, [ox, oy]), и я понял, что ox и oy могут центрировать масштабирование в определенном положении. В моем случае эта позиция должна быть указателем. Но хотя я передаю координаты (offsetX и offsetY события мыши), он абсолютно не влияет.

Может ли кто-нибудь дать мне пример использования ox и oy?

Answer 1

Не забудьте сначала преобразовать координаты мыши в систему координат окна просмотра.

function offsetToLocalPoint(offsetX, offsetY, paper) { 
    var svgPoint = paper.svg.createSVGPoint(); 
    svgPoint.x = offsetX; 
    svgPoint.y = offsetY; 
    var offsetTransformed = svgPoint.matrixTransform(paper.viewport.getCTM().inverse()); 
    return offsetTransformed 
} 

И сбросить предыдущее окно просмотра translate преобразование перед вызовом paper.scale() с началом [Ох, Оу] из scale преобразования указано. Вы можете увидеть это в примере обработчика событий mousewheel ниже.

function onMouseWheel(e) { 

    e.preventDefault(); 
    e = e.originalEvent; 

    var delta = Math.max(-1, Math.min(1, e.wheelDelta))/SPEED; 
    var newScale = V(paper.viewport).scale().sx + delta; 

    if (newScale > MIN_SCALE && newScale < MAX_SCALE) { 
     paper.setOrigin(0, 0); // reset the previous 'translate'    
     var p = offsetToLocalPoint(e.offsetX, e.offsetY); 
     paper.scale(newScale, newScale, p.x, p.y); 
    } 
} 

кросс-браузер версии скрипку here.