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

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

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

问题是，当我在响应站点上调整屏幕大小时，显示的点击现在全部关闭。我的搜索结果是空的，但是有没有公式或算法可以重新计算不同分辨率的x和y坐标。例如，第一次单击时，如果

宽度从
1257
变为
990
，
高度从
959
变为
400
，如何重新计算x和y，使它们排列在同一位置

编辑：
我在数据库中添加了两个字段：宽度百分比和高度百分比
存储宽度的
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']; 
  }
}

while（$row=mysql\u fetch\u array（$results））{
如果（$_GET['w']<$row['width']））{
$xcorr=$row['width\u percentage']*$\u GET['w']；
$ycorr=$row['y']；
}
}

这使用
$\u GET
变量，在页面加载时传递屏幕分辨率的宽度和高度。然后它从数据库中获取点击点，作为
$results
。因为我只将分辨率宽度从1257缩放到900，所以我没有计算高度，也没有计算与初始单击相同的像素。新的宽度I乘以百分比，并从屏幕左侧设置该百分比边距的点。因为百分比是35%
新的x坐标从左边缘变为
900*.35=315px
。它不起作用了，我还在绞尽脑汁让点击保持在同一位置，以获得响应性网站。
我认为你的百分比是正确的。是否包括地图图像的偏移量。我想知道您的算法是否正常工作，但视觉表示似乎错误，因为视口中的偏移正在更改

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

每次都需要添加偏移以获得正确的位置
 您可以通过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);
});

这是你应该做的。有时，解析文档时会触发resize事件。最好将代码放在onload事件函数中。方向改变功能取自@Arun answer


window.onload=function（）{
$（窗口）.on（“方向更改”，函数（事件）{
警报（“方向为：“+事件方向”）；
});
window.onresize=函数（）{
警报（“窗口大小调整；重新计算”）；
};
};
为此，您需要进行一些计算。这是一个函数，它将根据高度和宽度返回新的x和y药剂

function getNewX(xVlaue, oldWidth, newWidth){
   return xVlaue * newWidth / oldWidth;
}
newX = getNewX(10, 150, 100); // Use

可以使用“高度和宽度计算”的通用函数

整个问题在很大程度上取决于您想在哪个页面上使用此选项。
大多数页面都有一个居中的块和/或一些自动调整大小（读“响应”）的元素。如果页面响应性不是很强，例如具有固定宽度，则您的工作会更轻松。如果页面居中，则可能需要保存光标相对于页面中心的X位置。这样，窗宽就无关紧要了。当然，这同样适用于左对齐和右对齐的页面——在这种情况下，您将分别保存相对于窗口左边缘或右边缘的X-pos

下图显示了一个面向中心的单击位置。请注意，如果调整窗口大小，单击的x和y属性在此不会更改


现在转到更通用的方法

如果每次单击时都保存窗口尺寸、光标位置和滚动偏移，则很可能可以在布局旁边复制，但需要为每个唯一的尺寸集复制。如果您使用上面的技巧，您可能能够覆盖所有布局，并找到一个共同的分母。例如，如果您的页面在窗口中居中，具有最大宽度，并且您保存了相对于窗口中心的X-pos，则可以覆盖在至少具有该宽度的窗口中发生的所有单击

但是，您可以做一些欺骗，将单击的元素与您已经保存的信息一起保存。如果还保存相对于元素的单击位置，则可以将此数据计算为“提交按钮在右下角被按下”或“人们经常单击该下拉列表的远端，有时会误按几个像素”。
尝试以下两种方法：


1.填充和边距可能无法缩放。在样式表的末尾使用“*{padding:0；margin:0}”，并检查是否修复了它。


2.确保外部和内部（即所有）元素的比例。任何一个元素不能按比例缩放都会使许多其他元素不合适。这通常发生在文本输入中。在样式表末尾使用“*{border:solid 2}”，直观地观察缩放对每个元素的影响。



我相信你的问题会解决的。
你试过这个数学公式来改变数字的范围吗



也可以不存储这个：

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

您可以将其存储在
0
和
1
之间，使其适用于任何
宽度/高度
（计算方法是将每个
x
除以其
宽度
，将每个
y
除以其
高度
）：

那你呢
x,     y
0.344, 0.357
0.263, 0.858