如何将不同尺寸的点击坐标转换为320尺寸?

时间:2015-04-21 04:10:06

标签: javascript jquery html dom xpath

我非常恼火地找到将各种设备维度的点击坐标转换为320 [iPhone 4]屏幕的解决方案。

我有所有需要的数据,如元素偏移,点击偏移,窗口宽度/高度等,但没有找到任何适当的解决方案将其转换为320.

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

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

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

    [X,Y] = [161,38]

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

1 个答案:

答案 0 :(得分: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;

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

修改

您必须根据所有偏移量进行调整(我使用了225,但您可能必须先将您的30个元素偏移量加到或减去225,然后再除以420得到比率百分比取决于如何你总结了所有的补偿)

要对你想要的工程进行逆向工程,你可以使用交叉乘法或简单代数:

161是320,x是420;

(三百二十〇分之一百六十一)=(X / 420)

0.503125 =(X / 420)

0.503125 * 420 = X

211.3125 = X;

对于420宽度对象,您的x坐标必须是211.3125,与320宽度对象上的161成比例相同;

ALSO:

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

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