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

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

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


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




下面是我相对于320转换此数据后的预期结果。

[X,Y] = [161,38]

有人可以帮我吗?

最佳答案

您可以使用一点比例数学...

 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;


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

编辑

您必须根据所有偏移量进行调整(我使用225,但您可能必须先将225的30元素偏移量加或减去,然后再除以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

关于javascript - 如何将不同尺寸的点击坐标转换为320尺寸?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29762748/

10-09 19:33