我写了下面的代码来计算鼠标移动的坐标
$(document).mousemove(function(e){
console.log(e.pageX + ", " + e.pageY);
});
这是小提琴。
我的问题是,当我缓慢移动鼠标时,我能够在控制台中看到所有鼠标移动的坐标。但是当我移动得更快时,我看不到所有的东西。只计算了几个。我的代码有问题吗?
我写了下面的代码来计算鼠标移动的坐标
$(document).mousemove(function(e){
console.log(e.pageX + ", " + e.pageY);
});
这是小提琴。
我的问题是,当我缓慢移动鼠标时,我能够在控制台中看到所有鼠标移动的坐标。但是当我移动得更快时,我看不到所有的东西。只计算了几个。我的代码有问题吗?
不,这是操作系统的设计行为。这不是浏览器的错;浏览器只为您提供从操作系统获得的内容。
您将需要对它们进行内插(即计算彼此之间的点)。浏览器只会在每个新的滴答声(例如每 0.01 秒)返回鼠标位置。
幸运的是,鼠标位置只是每隔一段时间检查一次,否则操作系统会立即冻结。
内插可能看起来像
var posX, posY;
$(document).mousemove(function(e){
var points = [];
if(posX && posY) {
// calculate a straight line that the mouse moved over
// It gets more difficult if you want to take e.g.
// the current curved path into account
var diffX = e.pageX - posX;
var diffY = e.pageY - poxY;
var length = Math.round(Math.sqrt((diffY*diffY)+(diffX*diffX)));
for(n=0;n<length;n++) {
var pointX = posX + (n/length) * diffX;
var pointY = posY + (n/length) * diffY;
points.push({x:pointX,y:pointY});
}
}
points.push({x:e.pageX,y:e.pageY});
posX = e.pageX;
poxY = e.pageY;
for(point in points) {
console.log(point.x + ", " + point.y);
}
});