Как пересчитать координаты 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, чтобы они выстроились в строке то же место?

EDIT: Я добавил 2 базы данных в базу данных, width_percentage и height percent для хранения процента x от ширины и процента от высоты t28. Так что если 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 от левого края. Это не сработало, и я все еще почесываю голову, чтобы держать клик в том же месте для чувствительных сайтов.

Ответ 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);
});

Ответ 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

Ответ 3

Я думаю, что вы на правильном пути с процентами. Вы включаете смещение изображения карты. Интересно, работает ли ваш алгоритм, но визуальное представление кажется неправильным, потому что смещение изменяется в окне просмотра.

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

Вам нужно каждый раз добавлять смещения, чтобы получить правильное размещение.

Ответ 4

Это то, что вы должны делать. Иногда событие изменения размера запускается при анализе документа. Рекомендуется помещать код внутри функции события onload. Функция изменения ориентации берется из ответа @Arun.

window.onload = function() {

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

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

};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ответ 5

для этого вам нужно сделать некоторые вычисления. Вот функция, которая вернет новое зелье x и y, основанное на высоте и ширине

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

Вы можете использовать общую функцию для вычисления высоты и ширины.

DEMO

Ответ 6

Весь вопрос в значительной степени зависит от страницы, на которой вы хотите ее использовать. Большинство страниц имеют центрированный блок и/или некоторые элементы для самостоятельного изменения размера (считаются "отзывчивыми" ). Если страница не очень отзывна, например. имея фиксированную ширину, вам легче работать. Если страница центрирована, вам может понадобиться сохранить X-позицию курсора относительно центра страницы. таким образом ширина окна не имеет значения. То же самое относится и к левым и правым выравниваемым страницам - в этом случае вы сохранили бы X-pos относительно левого или правого края окна соответственно.

На следующем изображении показана ориентация кликов по центру. Обратите внимание, что свойства x и y для клика не изменяются здесь, если вы изменяете размер окна.

Теперь к более общим методам

Если вы сохраните размеры окна, позиция курсора И прокрутка прокрутки на каждом клике, вы, скорее всего, сможете воспроизвести его вместе с макетом, но вам нужно будет воспроизвести его для каждый набор уникальных размеров. Если вы использовали трюк сверху, вы могли бы наложить все макеты и найти общий знаменатель. Например, если ваша страница сосредоточена в окне, имеет максимальную ширину, и вы сохранили X-pos относительно центра окна, вы можете наложить все клики, которые произошли в окнах, которые были по меньшей мере той ширины.

Однако вы можете сделать некоторые обманки и сохранить элементы с щелчком рядом с информацией, которую вы уже сохранили. Если вы также сохраните позицию клика относительно элемента, вы можете оценить эти данные примерно так: "кнопка отправки достаточно нажата в нижней правой части" или "люди часто нажимают на дальний конец этого раскрывающегося списка, а иногда и ошибочно -click на несколько пикселей".

Ответ 7

Попробуйте выполнить следующие действия:

1. Отступы и поля могут не масштабироваться. Используйте "* {padding: 0; margin: 0}" в конце вашей таблицы стилей и проверьте, исправляет ли это это.

2. Обеспечьте масштабирование внешних и внутренних (что означает все) элементов. Любой отдельный элемент, не имеющий масштабирования, сделает многие другие элементы неуместными. Это обычно происходит с текстовыми вводами. Используйте "* {border: solid 2}" в конце вашей таблицы стилей, чтобы визуально наблюдать эффект масштабирования для каждого элемента.

Я уверен, что ваша проблема будет решена.