jointjs - 如何对 JointJS 论文进行中心缩放

Question

我已经实现了纸张的缩放，效果很好。

我将它与鼠标滚轮的滚动联系起来，但我仍然遇到一个问题:在 API 中，缩放函数定义为 scale paper.scale(sx, sy, [ox, oy])我认为 ox 和 oy 可以将缩放中心定位到特定位置。在我的情况下，这个位置应该是指针。但是虽然我交出了坐标(鼠标事件的offsetX和offsetY)，但绝对没有效果。

谁能给我一个如何使用的例子ox和 oy ?

Answer 1

不要忘记先将鼠标坐标转换为视口(viewport)坐标系。

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
}

并重置之前的视口(viewport) translate调用前的转换 paper.scale() scale 的原点 [ox, oy]指定的转换。您可以在下面的鼠标滚轮事件处理程序示例中看到这一点。

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

一个跨浏览器版本的 fiddle here .