1

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

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

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

4

3 回答 3

3

您只能尽可能快地保存该信息。事件的mousemove触发频率由浏览器决定，通常最高为 60hz。由于您当然可以以超过 60 像素/秒的速度移动指针，因此除非您进行某种插值，否则您将无法填补空白。

对我来说这听起来是个好主意，想象一下mousemove当您将鼠标跳到屏幕的另一侧时立即触发 1920 个事件的麻烦（和性能拖累） - 我什至认为鼠标本身的轮询速度不够快，游戏鼠标的频率不会超过 1000hz。

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

关于插值，请参阅实现Bresenham 线算法的这个问题，您可以使用它来查找缺失点。这是一个难题，iPad 的PenUltimate 应用程序实现了一些惊人的插值，使线条图看起来非常自然和流畅，但在网络上却没有。

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

于 2011-10-13T04:47:57.867 回答
2

移动鼠标时，鼠标并不存在于每个像素上。在更新周期中，它实际上以一种平滑的方式从一个点跳到另一个点，所以在眼睛看来，它似乎击中了中间的每个点，而实际上它只是随意地跳过。

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

而且，就处理效率而言...

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

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

  1. 我可能会Point在原型上创建一个带有一堆函数的自定义对象，看看它是如何执行的
  2. 如果这太多了，我会切换到使用对象字面量x和y设置。
  3. 如果这陷入困境，我会切换到使用两个数组，一个 forx和一个 fory并确保始终将 x 和 y 值设置在一起。
  4. 如果这陷入困境，我会尝试一些新的东西。
  5. 转到 4
于 2011-10-13T04:46:58.310 回答
1

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

你对“更好”的标准是什么？

我的目标对于网页来说太不切实际了吗？

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

于 2011-10-13T04:59:57.847 回答