如何根据屏幕尺寸重新计算x,y坐标

Question

我有一个热图应用程序和存储我存储点击的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百分比来存储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,因此我没有计算高度和与初始点击相同的像素.新宽度I乘以百分比,并设置屏幕左侧百分比边距的点.由于百分比为35%,新的x坐标变为900 *.35 = 315px左边缘.它无法正常工作,我仍然摸不着头脑,为响应式网站点击同一位置.

Answer 1

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

Answer 2

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

而且不是存储这个:

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

Answer 3

我认为你的百分比是正确的。您是否包括地图图像的偏移量？我想知道您的算法是否有效，但视觉表示似乎错误，因为视口中的偏移量正在变化。

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

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