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