在 JavaScript 中存储鼠标移动数据最有效的处理方式是什么？
我试图准确记录鼠标在网页上移动的位置（到像素）。我有以下代码，但结果数据存在差距。
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
是否有更好的方法来存储逐像素鼠标移动数据？我的目标对于网页来说是否太不切实际？
I'm trying to record exactly where the mouse moves on a web page (to the pixel). I have the following code, but there are gaps in the resulting data.
var mouse = new Array();
$("html").mousemove(function(e){
mouse.push(e.pageX + "," + e.pageY);
});
But, when I look at the data that is recorded, this is an example of what I see.
76,2 //start x,y
78,5 //moved right two pixels, down three pixels
78,8 //moved down three pixels
This would preferably look more like:
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
Is there a better way to store pixel by pixel mouse movement data? Are my goals too unrealistic for a web page?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您只能以提供给您的最快速度保存该信息。
mousemove事件的触发速率由浏览器确定，通常最高为 60hz。由于您肯定可以以超过 60 像素/秒的速度移动指针，因此除非进行某种插值，否则您将无法填充空白。这对我来说听起来是个好主意，想象一下当您将鼠标跳到屏幕的另一侧时同时触发 1920 个
mousemove事件的麻烦（和性能拖累） - 但我不这么认为即使认为鼠标本身的轮询速度足够快，游戏鼠标也不会超过 1000hz。请在此处查看实时帧率测试：http://jsbin.com/ucevar/
关于插值，请参阅 < a href="https://stackoverflow.com/questions/4672279/bresenham-algorithm-in-javascript">这个问题实现了 Bresenham 直线算法，您可以使用它来查找缺失点。这是一个难题，iPad 版的 PenUltimate 应用 实现了一些令人惊奇的插值，使线条画看起来完全自然流畅，但网上没有任何相关信息。
至于存储数据，只需推送一个
[x,y]数组而不是一个字符串。缓慢的事件处理函数也会降低刷新率，因为事件在遗留时会被丢弃。You can only save that information as fast as it's given to you. The
mousemoveevents fires at a rate that is determined by the browser, usually topping at 60hz. Since you can certainly move your pointer faster than 60px/second, you won't be able to fill in the blanks unless you do some kind of interpolation.That sounds like a good idea to me, imagine the hassle (and performance drag) of having 1920
mousemoveevents firing at once when you jump the mouse to the other side of the screen - and I don't even think the mouse itself polls fast enough, gaming mice don't go further than 1000hz.See a live framerate test here: http://jsbin.com/ucevar/
On the interpolation, see this question that implements the Bresenham's line algorithm which you can use to find the missing points. This is a hard problem, the PenUltimate app for the iPad implements some amazing interpolation that makes line drawings look completely natural and fluid, but there is nothing about it on the web.
As for storing the data, just push an array of
[x,y]instead of a string. A slow event handler function will also slow down the refresh rate, since events will be dropped when left behind.当您移动鼠标时，鼠标并不存在于每个像素处。在更新周期中，它实际上以平滑的方式从一个点跳转到另一个点，因此在眼睛看来它似乎击中了中间的每个点，而实际上它只是随意地跳过。
我建议只存储注册鼠标移动事件的点。两点之间的每个间隔都会创建一条线，可以将其用于您需要的任何用途。
而且，就处理效率而言...
处理效率取决于许多因素。使用什么浏览器、计算机有多少内存、代码针对数据结构的优化程度等。
与其过早优化，不如编写程序，然后对缓慢的部分进行基准测试，找出瓶颈所在。
Point对象，并查看它的执行情况，x< 的对象文字/code> 和y设置。x，一个用于y，并确保始终设置x和y 值在一起。The mouse doesn't exist at every pixel when you move it. During the update cycle, it actually jumps from point to point in a smooth manner, so to the eye it looks like it hits every point in between, when in fact it just skips around willy-nilly.
I'd recommend just storing the points where the mouse move event was registered. Each interval between two points creates a line, which can be used for whatever it is you need it for.
And, as far as processing efficiency goes...
Processing efficiency is going to depend on a number of factors. What browser is being used, how much memory the computer has, how well the code is optimized for the data-structure, etc.
Rather than prematurely optimize, write the program and then benchmark the slow parts to find out where your bottlenecks are.
Pointobject with a bunch of functions on the prototype and see how it performsxandyset.xand one foryand make sure to always set x and y values together.你的“更好”标准是什么？
如果您的目标是每次光标输入新像素时存储一个新点，那么是的。另请注意，浏览器像素不一定会 1:1 映射到屏幕像素，尤其是在 CRT 显示器的情况下，几乎肯定不会。
What are your criteria for "better"?
If your goal is to store a new point each time the cursor enters a new pixel, yes. Also note that browser pixels don't necessarily map 1:1 to screen pixels, especially in the case of CRT monitors where they almost certainly don't.