如何根据屏幕大小重新计算x，y坐标

我有一个热图应用程序和商店，我存储点击的x，y坐标以及视口的宽度和高度。 2次点击的实际数据：

x,   y,   width, height
433, 343, 1257,  959
331, 823, 1257,  959

问题是，当我在响应网站上调整屏幕大小时，显示的点击现在全部关闭。 我在搜索时会空着，但有没有公式或算法来重新计算不同分辨率的x和y坐标。 例如，第一次点击，如果width从1257到990 ， height从959到400 ，那么如何重新计算x和y，使它们排列在同一个点上？

编辑：我添加到数据库的2个字段，width_percentage和高度百分比来存储x百分比的宽度和y百分比的高度。 所以如果x是433，屏幕宽度是1257，那么x从屏幕左边缘开始是35％。 然后，我使用相同的理论来计算高度，然后运行计算，但它没有将点击点缩放到与我相同的点，尽管这些百分比可用于缩放分辨率。 我通过点击全分辨率1257宽度然后以900宽度重新打开来测试这一点。 请参阅下面的代码以较低的分辨率显示点击点。

Ajax PHP

while ($row = mysql_fetch_array($results)) { 
  if( $_GET['w'] < $row['width'] ) {
    $xcorr = $row['width_percentage'] * $_GET['w'];
    $ycorr = $row['y']; 
  }
}

这使用$_GET变量，在页面加载时传递屏幕分辨率的宽度和高度。 然后它从数据库中获得点击点作为$results 。 由于我只将分辨率宽度从1257缩放到900，因此我没有计算高度，并且它与初始点击的像素相同。 新的宽度乘以百分比，并设置屏幕左侧的百分比边距。 由于百分比是35％，所以新的x坐标从左边缘变为900 *.35 = 315px 。 它没有工作，我仍然在头上挠头，以保持点击响应网站的同一位置。

---

你可以通过jQuery实现这个功能：

$( window ).resize(function() {
  //ur code
});

JavaScript的

window.onresize = resize;

function resize()
{
 alert("resize event detected!");
}

如果你在移动设备上工作，也可以使用这一个

$(window).on("orientationchange",function(event){
  alert("Orientation is: " + event.orientation);
});

---

你有没有试过这个数学公式来改变一个数字的范围？

而不是存储这个：

x,   y,   width, height
433, 343, 1257,  959
331, 823, 1257,  959

你可以将它存储在0和1之间，所以它适用于任何width/height （通过将每个x除以它的width和每个y除以它的height ）：

x,     y
0.344, 0.357
0.263, 0.858

然后，您不需要知道存储它们时使用的width/height ，以及何时将其转换为当前屏幕的大小，则只需将每个width/height乘以当前width/height

---

我认为你的百分比是正确的。 你是否包含地图图像的偏移量？ 我想知道你的算法是否正在工作，但视觉表示出现错误，因为视口中的偏移量正在改变。

$(window).resize(function() {
    var offset = yourMap.offset();
    myLeft = offset.left();
    myTop = offset.top();
});

您需要每次添加偏移以获得正确的位置。

链接地址: http://www.djcxy.com/p/15613.html

上一篇: How to recalculate x,y coordinates based on screensize

下一篇: JavaScript getBoundingClientRect() changes while scrolling