JS鼠标滚轮事件Delta的问题

时间:2018-05-01 04:09:34

标签: javascript mouseevent zooming

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

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

我注意到了一些奇怪的事情。如果您使用光标重新加载页面canvas平移,而缩放不起作用。相反,canvas会放大,但displacement.xdisplacement.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()效率的任何改进,请发布。

0 个答案:

没有答案