如何对JointJS论文进行缩放

我已经实现了纸张的缩放,效果很好.

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

有人能给我一个如何使用牛和oy的例子吗?

最佳答案
不要忘记首先将鼠标坐标转换为视口坐标系.

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
}

在使用指定的缩放转换的原点[ox,oy]调用paper.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.

转载注明原文:如何对JointJS论文进行缩放 - 代码日志