Question

我正在开发一个项目，该项目使用鼠标事件来缩放和平移canvas。它们可以独立工作，但是，我希望canvas在缩放时平移光标。

我的目标：将光标位置放在您缩放的位置。我已经玩了一段时间了，我能够得到它工作。

我注意到了一些奇怪的事情。如果您使用光标重新加载页面canvas平移，而缩放不起作用。相反，canvas会放大，但displacement.x和displacement.y将保持不变。

我认为这是因为event.delta。仅当光标位置超过event.delta = 0时，重新加载就好像canvas一样。

以下是我的鼠标事件：

function panCanvasOnZoom(event) {

    var sensitivity = 0.05 * event.delta;
    var halfSize = { w: canvasSize.w / 2, h: canvasSize.h / 2 }
    var centerOrientedMouse = { x: halfSize.w - pmouseX, y: halfSize.h - pmouseY }
    var relativeMousePercentage = { x: pmouseX / canvasSize.w, y: pmouseY / canvasSize.h }

    var panX = (halfSize.w - pmouseX) * sense * relativeMousePercentage.x;
    var panY = (halfSize.h - pmouseY) * sense * relativeMousePercentage.y;

    panX += panX * relativeMousePercentage.x;
    panY += panY * relativeMousePercentage.y;
    displacement.x += panX;
    displacement.y += panY;

} 

function mouseWheel(event) {

    if (pmouseX < 0 || pmouseX > canvasSize.w ||
        pmouseY < 0 || pmouseY > canvasSize.h)
        return;

    panCanvasOnZoom(event);
    displacement.z += 0.05 * event.delta;
    displacement.z = constrain(displacement.z, 0.05, 9.00);

    return false;
}

我正在使用event.delta计算灵敏度。当我注意到这个问题时，我开始调试并意识到如果我用var sensitivity = 0.05 * event.delta替换var sensitivity = 0.05，它基本上会复制游标问题。

我的问题是，有没有办法绕过event.delta = 0？我并不是指if语句来检查条件。我指的是在初始化时将event.delta设置为0以外的内容。

此外，如果您发现有关panCanvasOnZoom()效率的任何改进，请发布。

JS鼠标滚轮事件Delta的问题

0 个答案: