如何根据屏幕尺寸计算 x,y 坐标答案

【问题标题】：How to recalculate x,y coordinates based on screensize如何根据屏幕尺寸计算 x,y 坐标
【发布时间】：2015-12-28 12:05:05
【问题描述】：

我有一个热图应用程序并存储我存储单击的 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 和 height percent 存储宽度的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。它没有用，我仍在摸不着头脑，以使响应式网站的点击保持在同一个位置。

【问题讨论】：

你需要展示一些代码。但是，可能的解决方案是向document 添加一个resize 侦听器，并使用element.getBoundingClientRect() 做一些魔术。请参阅以下问题的答案：Retrieve the position (X,Y) of an HTML element
除了x.y坐标外，还要保存事件的目标元素。现在在文档上保留一些调整大小的侦听器，并在调整大小事件时重新计算已保存元素的 x,y 坐标。
您确定您在$row 中获得了正确的值吗？试试var_dump($row)。另外：“它不起作用”是什么意思？这次的结果如何？还是和以前一样，还是别的什么？
让我做一些转储并重新测试，然后让你知道结果。
我可以在哪里进行调试

标签： javascript jquery coordinates heatmap

【解决方案1】：

您是否尝试过这个数学公式来改变数字的范围？

而不是存储这个：

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

【讨论】：

那个公式正是我想要的。谢谢！

【解决方案2】：

尝试以下两种方法：

1.内边距和边距可能无法缩放。在样式表末尾使用“* {padding:0;margin:0}”并检查是否可以解决问题。

2. 确保外部和内部（即全部）元素规模。任何无法扩展的单个元素都会使许多其他元素不合适。这通常发生在文本输入中。在样式表末尾使用“*{border:solid 2}”以直观地观察每个元素的缩放效果。

我相信您的问题会得到解决。

【讨论】：

【解决方案3】：

整个问题很大程度上取决于您要在哪个页面上使用它。大多数页面都有一个居中的块和/或一些自调整大小（阅读“响应”）元素。如果页面不是很敏感，例如有一个固定的宽度，你有一个更容易的工作。如果页面居中，您可能希望保存光标相对于页面中心的 X 位置。这样窗口宽度无关紧要。当然，这同样适用于左对齐和右对齐的页面 - 在这种情况下，您将分别保存相对于窗口左边缘或右边缘的 X 位置。

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

现在介绍更通用的方法

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

但是，您可以做一些诡计，将点击的元素与您已经保存的信息一起保存。如果您还保存了相对于元素的点击位置，您可以将此数据评估为“提交按钮在右下角被按下”或“人们经常点击该下拉列表的远端并且有时会误- 点击几个像素”。

【讨论】：

【解决方案4】：

为此，您需要进行一些计算。这是根据高度和宽度返回新的 x 和 y 药水的函数

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

您可以使用通用函数计算高度和宽度。

DEMO

【讨论】：

【解决方案5】：

这是你应该做的。有时在解析文档时会触发 resize 事件。将代码放在 onload 事件函数中是个好主意。方向改变函数取自@Arun 答案。

window.onload = function() {

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

  window.onresize = function() {
    alert('window resized; recalculate');
  };

};

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案6】：

你可以通过 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);
});

【讨论】：

小心$(window).resize 绑定。使用debounce 或throttle ，否则你会得到一个非常滞后和迟缓的界面。 resize 事件在整个调整大小操作中不断触发，除非您想每 10 毫秒重新计算一次，否则您可以将其限制为 250 毫秒或您认为有必要的频率。参考：davidwalsh.name/javascript-debounce-function和remysharp.com/2010/07/21/throttling-function-calls

【解决方案7】：

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

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

您需要每次都添加偏移量才能获得正确的位置。

【讨论】：