我正在开发一个项目,该项目使用鼠标事件来缩放和平移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()
效率的任何改进,请发布。