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

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。由于您肯定可以以超过 60 像素/秒的速度移动指针，因此除非您进行某种插值，否则您将无法填充空白。

这对我来说听起来是个好主意，想象一下当您将鼠标跳到屏幕的另一边时同时触发 1920 个 mousemove 事件的麻烦(和性能拖累)——我甚至不要认为鼠标本身的轮询速度足够快，游戏鼠标不会超过 1000hz。

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

关于插值，参见this question实现了 Bresenham's line algorithm你可以用它来找到缺失的点。这是一个难题，PenUltimate app for iPad 实现了一些惊人的插值，使线条图看起来完全自然和流畅，但在网络上没有任何相关内容。

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