Question

我正在尝试准确记录鼠标在网页上移动的位置（到像素）。我有以下代码，但结果数据存在差距。

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

是否有更好的方法来存储逐像素鼠标移动数据？我的目标对于网页来说是不太现实吗？

Answer 1

您只能以尽可能快的速度保存该信息。 mousemove事件以浏览器确定的速率触发，通常达到60hz。由于你当然可以将指针移动速度超过60px /秒，除非你进行某种插值，否则你将无法填充空白。

这听起来对我来说是一个好主意，想象一下当你将鼠标跳到屏幕的另一边时，一次发射1920 mousemove个事件的麻烦（和性能拖累） - 我不知道甚至认为鼠标本身的民意调查速度足够快，游戏鼠标不会超过1000hz。

在此处查看实时帧率测试：http://jsbin.com/ucevar/

在插值上，请参阅实现this question的Bresenham's line algorithm，您可以使用PenUltimate app找到缺失点。这是一个难题，iPad的{{3}}实现了一些令人惊叹的插值，使得线条图看起来完全自然流畅，但网上没有任何内容。

至于存储数据，只需推送一个[x,y]数组而不是字符串。慢速事件处理函数也会降低刷新率，因为事件将在落后时被删除。

Answer 2

移动鼠标时，每个像素都不存在鼠标。在更新周期中，它实际上是以一种平滑的方式从一个点跳到另一个点，所以对于眼睛来说它看起来像是在它们之间的每个点上，而实际上它只是在不知不觉中跳过。

我建议只存储注册鼠标移动事件的点。两点之间的每个间隔都会创建一条线，可用于您需要的任何线。

_{而且，就处理效率而言......}

处理效率取决于许多因素。使用什么浏览器，计算机有多少内存，代码针对数据结构进行优化的程度等等。

不是过早地优化，而是编写程序，然后对慢速部分进行基准测试，找出瓶颈所在。

我可能会在原型上创建一个带有大量函数的自定义Point对象，看看它是如何执行的
如果陷入困境，我会切换到使用x和y设置的对象文字。
如果陷入困境，我会切换到使用两个数组，一个用于x，一个用于y，并确保始终将x和y值设置在一起
如果陷入困境，我会尝试一些新的东西。
转到4

Answer 3

是否有更好的方法来存储逐像素的鼠标移动数据？

“更好”的标准是什么？

我的目标对于网页来说是不太现实吗？

如果你的目标是每次光标进入一个新像素时存储一个新点，是的。另请注意，浏览器像素不一定将1：1映射到屏幕像素，特别是在CRT显示器的情况下，它们几乎肯定不会。

在JavaScript中存储鼠标移动数据的最有效处理方法是什么？

3 个答案: