如何将不同维度的点击坐标转换为320维度大小？答案

【问题标题】：How to convert click coordinates of different dimensions into 320 dimension size?如何将不同维度的点击坐标转换为320维度大小？
【发布时间】：2015-06-28 01:20:23
【问题描述】：

我很烦找不到将各种设备尺寸的点击坐标转换为320[iPhone 4]屏幕的解决方案。

我拥有所有必需的数据，例如元素偏移量、点击偏移量、窗口宽度/高度等，但没有找到任何合适的解决方案将其转换为 320。

例如我需要转换下面提到的从 480 屏幕收集的 X、Y：

x,y [30, 1903] 中的元素偏移量
x,y [225, 38] 中的点击偏移量 // 这里我提到了元素的点击偏移量，而不是文档/窗口。
元素宽度/高度（以像素为单位）[420, 38]

与

以下是我将这些数据相对于 320 转换后的结果。

[X,Y] = [161, 38]

任何人都可以帮我这样做吗？

【问题讨论】：

标签： javascript jquery html dom xpath

【解决方案1】：

你可以使用一点比率数学...

 var xratio=225/420;   //420-mouse-x-coord divided by 420
 var yratio=38/38;     // mouse-y-coord/element height

var x=320*xratio;
var y=38*yratio;

您可能必须将 x 和 y 值放入 Math.round() 以获得完美的像素而不是十进制。

编辑

您必须根据所有偏移量对其进行调整（我使用的是 225，但您可能必须先将 30 个元素的偏移量添加或减去 225，然后再除以 420 以获得比率百分比，具体取决于您正在汇总所有偏移量）

要逆向工程，您可以使用交叉乘法或简单代数：

161 对 320，x 对 420；

(161/320)=(x/420)

0.503125=(x/420)

0.503125*420=x

211.3125=x;

您的 x 坐标必须是 420 宽度对象上的 211.3125，才能与 320 宽度对象上的 161 成比例；

还有：

对于任何可能尝试为 Web 应用程序执行此操作的人， getBoundingClientRect() 比处理所有各种偏移属性要容易得多。

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

【讨论】：

如果我应用这个等式，我没有得到准确或接近预期的结果。
糟糕，忘记了什么。立即尝试。
对于示例数据似乎没问题，但如果我在 [103, 38] 上应用，那么结果又是错误的，所以可能是我们需要计算的其他东西。您使用屏幕尺寸来计算 X 的另一件事，我猜它们可能是元素的宽度，而元素的宽度是 320 尺寸的 290 像素，如果我错了，请纠正我。
是的，你想使用元素的宽度，如果这是你本地坐标的基础的话。