我正在尝试准确记录鼠标在网页上移动的位置(到像素)。我有以下代码,但结果数据中存在差距。
var mouse = new Array();
$("html").mousemove(function(e){
mouse.push(e.pageX + "," + e.pageY);
});
但是,当我查看记录的数据时,这就是我所看到的示例。
76,2 //start x,y
78,5 //moved right two pixels, down three pixels
78,8 //moved down three pixels
最好看起来更像:
76,2 //start x,y
77,3 //missing
78,4 //missing
78,5 //moved right two pixels, down three pixels
78,6 //missing
78,7 //missing
78,8 //moved down three pixels
是否有更好的方法来逐像素存储鼠标移动数据?我的目标对于网页而言是否太不切实际?
最佳答案
您只能按照提供给您的速度保存该信息。 mousemove
事件以浏览器确定的速率触发,通常最高为 60hz。由于您肯定可以以超过 60 像素/秒的速度移动指针,因此除非您进行某种插值,否则您将无法填充空白。
这对我来说听起来是个好主意,想象一下当您将鼠标跳到屏幕的另一边时同时触发 1920 个 mousemove
事件的麻烦(和性能拖累)——我甚至不要认为鼠标本身的轮询速度足够快,游戏鼠标不会超过 1000hz。
在此处查看实时帧率测试:http://jsbin.com/ucevar/
关于插值,参见this question实现了 Bresenham's line algorithm你可以用它来找到缺失的点。这是一个难题,PenUltimate app for iPad 实现了一些惊人的插值,使线条图看起来完全自然和流畅,但在网络上没有任何相关内容。
至于存储数据,只需推送一个[x,y]
数组而不是一个字符串。缓慢的事件处理函数也会降低刷新率,因为事件会在落后时被丢弃。
关于javascript - 在 JavaScript 中存储鼠标移动数据的最有效处理方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7749538/