php - 确定所有屏幕分辨率的鼠标点击

Question

我有一些简单的 JavaScript 可以确定点击在浏览器中发生的位置:

var clickDoc = (document.documentElement != undefined && document.documentElement.clientHeight != 0) ? document.documentElement : document.body;
var x = evt.clientX;
var y = evt.clientY;
var w = clickDoc.clientWidth != undefined ? clickDoc.clientWidth : window.innerWidth;
var h = clickDoc.clientHeight != undefined ? clickDoc.clientHeight : window.innerHeight;
var scrollx = window.pageXOffset == undefined ? clickDoc.scrollLeft : window.pageXOffset;
var scrolly = window.pageYOffset == undefined ? clickDoc.scrollTop : window.pageYOffset;

params = '&x=' + (x + scrollx) + '&y=' + (y + scrolly) + '&w=' + w + '&random=' + Date();

所有这些数据都存储在数据库中。后来我检索它并显示该页面上所有点击发生的位置。如果我以一种分辨率进行所有点击，然后以相同的分辨率将其显示回来，则效果很好，但事实并非如此。可能会使用大量的分辨率。

在我的测试用例中，我单击了屏幕分辨率为 1260x1080 的屏幕。我检索了所有数据并以相同的分辨率显示它们。但是当我使用不同的显示器时(尝试过 1024x768 和 1920x1080。标记转移到了错误的位置。

我的问题是我是否存储客户端的宽度和高度以及点击的 x/y 位置。如果 3 个具有不同屏幕分辨率的不同用户单击同一个单词，并且第 4 个用户去查看所有这些单击发生的位置，我如何正确绘制 x/y 位置以显示每个人都单击了同一空间，不分辨率重要吗？

如果这属于更好的部分，也请告诉我。

:::编辑:::在应用布罗克的建议后，我附上了两个屏幕截图。我在不同分辨率下点击了每个段落开头的“If”一词。在这两种分辨率下查看时，在相同分辨率下发生的点击直接在单词上，当分辨率较高或较低时，它会分别向右或向左移动。

http://img291.imageshack.us/img291/5682/1260x1080.png http://img27.imageshack.us/img27/8950/1920x1080c.png%20

Answer 1

更新:
需要考虑的其他问题，问题可能无法完美解决...

1. 在不同的屏幕尺寸下，边距(针对居中内容)等内容会有所不同。在补偿边距变化后，需要调整“屏幕尺寸”真正成为clientWidth的位置。

2. 此外，尽管如此，页面在不同的屏幕分辨率(加上用户浏览器窗口的大小)下可能会以不同的方式呈现。如果这导致行以不同方式换行，则确实会导致比较失败。

<小时/>

原始答案:

"if I am storing the width and height of the client, and the x/y position of the click. If 3 different users all with different screen resolutions click on the same word, and a 4th user goes to view where all of those clicks happened, how can I plot the x/y position correctly"

这应该只是一个简单的缩放问题。

伪代码:
给定:

CapturedMousePosition   = {X and Y coordinates of logged machine, in pixels}    //-- EG  [42, 69]
CapturedScreenSize      = {width and height of logged machine, in pixels}       //-- EG  [1260, 1080]
TargetScreenSize        = {width and height of display machine, in pixels}      //-- EG  [1024, 768]
/*-- Note that client size and/or view-port size, are what we mean by "screen size" here.  
    This is because the browser will use some unknown fraction of the PC's display resolution.
*/

然后:

TargetMousePosition     = CapturedMousePosition * TargetScreenSize / CapturedScreenSize
EG: [42 * 1024 / 1260, 69 * 768 / 1080] -- Be sure to round to *nearest* integer.