如何将不同尺寸的点击坐标转换为320尺寸?
我非常恼火地找到将各种设备维度的点击坐标转换为320 [iPhone 4]屏幕的解决方案。
我有所有需要的数据,如元素偏移,点击偏移,窗口宽度/高度等,但没有找到任何适当的解决方案,将其转换为320。
例如,我需要转换下面提到的X,Y,我从480屏幕收集:
- 元素偏移量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;
您可能必须将x和y值放在Math.round()中以获得完美的像素而不是小数。
编辑
您必须根据所有偏移量进行调整(我使用了225,但您可能必须先加上或减去30个元素的偏移量,然后再除以420除以得到比率百分比取决于您的求和方式你所有的补偿)
要对所需的进行反向工程,可以使用交叉乘法或简单代数:
161是320,x是420;
(三百二十〇分之一百六十一)=(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