在800×600,并显示在1024×768跟踪鼠标移动

Question

我正在使用javascript跟踪用户的鼠标移动并将其与浏览器分辨率一起存储.然后我可以在我的浏览器中检查用户鼠标移动,分辨率为1024 x 768.但是如果用户使用800 x 600的浏览器,那么鼠标移动将记录为800 x 600.当我看到1024 x 768的鼠标移动时,鼠标移动是错误的.那么我如何从800 x 600扩展到1024x 768？

Answer 1

您基本上将用户的x/y坐标与宽度/高度比相乘:

x *= 1024/800;
y *= 768/600;

我建议您在应用比率后在两个坐标上应用Math.round().

编辑:当然,这假设较大分辨率的所有内容都按照用户的相同比例调整大小,否则会出现问题.

例如,如果您尝试将鼠标移动覆盖在网页上,并且该网页具有200px固定宽度的侧边栏,无论用户的分辨率如何,那么当然当您将x/y坐标与比率相乘时,您可能会发现指针甚至不像用户那样在侧边栏上方.

Edit2:对于网页,最安全的方法是记录用户的视口宽度/高度,然后将相同的网页嵌入到具有该确切大小的容器(如iframe)中,以便重放操作.这样可以避免一些问题.