Проблема с JS Mouse Wheel Event Delta - PullRequest
0 голосов
/ 01 мая 2018

Я работаю над проектом, который использует события мыши для масштабирования и панорамирования 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(), пожалуйста, опубликуйте их.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...