Определение положения щелчка мыши на изображении на экранах разных размеров - JS/Jquery

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

У меня есть начальный div под названием "контейнер", который является height:100% width:100% изображение карты Оклахомы. Идея состоит в том, что когда пользователь щелкает определенную часть карты (для этого примера - ручку с панорамированием), div переключается на div, который является изображением с панорамированием. Я определяю, где пользователь щелкает мышью, зная расположение мыши по пикселям при нажатии.

Проблема в том, что значения пикселей различны для экранов разных размеров. Мне сказали, что для того, чтобы масштабировать мои расчеты в зависимости от того, где пользователь нажимает в зависимости от размера экрана, мне необходимо:

масштабируйте каждое значение, прежде чем сравнивать его. Умножьте каждый x на свою каноническую ширину, разделите на фактическую ширину и сделайте то же самое с y и высотой.

Меня смущает "умножить каждый х на свою каноническую ширину и разделить на фактическую ширину". Я пошел вперед и попытался все равно масштабировать. Я обнаружил, что первый край ручки находится на 3,1% от левой стороны экрана, а самый дальний - на 35,7% от левой стороны экрана. У меня есть следующий код:


$("#container").click(function(e)
    {
        var x = event.pageX;
        var y = event.pageY;

        // Variables for area of pan handle
        /* These variables do not seem to work yet */
        var xScale1 = 0.031*x;
        var xScale2 = 0.357*x;

        if(x >= xScale1 && x "less-than"= xScale2) 
        {
        alert("You clicked the panhandle!");
        }   
     }

При щелчке внутри горизонтальных рамок ручки должно появиться предупреждение, но ничего не происходит. Я заметил, что я не делю ни одно из моих значений на "фактическую ширину". Может ли кто-нибудь привести пример того, как "умножить каждый x на вашу каноническую ширину и разделить на фактическую ширину"?

Источник

2 ответа

Решение

Под канонической шириной они понимают "нормальную" ширину, которая в вашем случае является исходным размером изображения.

Предположим, что изображение, которое вы используете для карты, обычно имеет размер 1280 x 1600 пикселей (только ради аргументов), тогда ваша каноническая высота равна 1600 пикселей, а ваша каноническая ширина равна 1280 пикселей.

Итак, если я просматриваю изображение на экране размером 800 x 600 пикселей - то есть 800 пикселей в высоту и 600 пикселей в высоту - тогда мне нужно масштабировать изображение до 800 /1600 = 0,5 раза меньше по высоте и до 600 / 1250 = 0,48 раза меньше по ширине.

Точно так же, если я щелкну 400-й пиксель с левой стороны экрана и 200-й сверху на моем реальном экране, тогда я смогу получить свою "каноническую" позицию, разделив ранее установленные коэффициенты. поэтому (400, 200) => (800, 416,7).

Затем вы можете использовать эти канонизированные значения, чтобы посмотреть, какую часть вашего изображения они щелкнули.

Сказав все это, я бы не стал этого рекомендовать! Это идеальный случай для использования HTML-карт изображений: http://htmldog.com/reference/htmltags/map/. Проверьте это!

Надеюсь это поможет!

Источник

Я не знаю об этой конической вещи, но математически я вижу вашу проблему очень простым способом. Я предполагаю, что ваша карта - это изображение, а изображение имеет постоянный размер. Допустим, ваша карта 100х100. Если размер экрана 200х200, экран в 2 раза больше вашей карты.

xScreen = 2*xMap;
yScreen = 2*yMap;

Таким образом, все значения, используемые для экрана, в 2 раза больше, чем значения, используемые для реальной карты. Если пользователь щелкает 50,50 пикселей на экране 200x200, вы должны разделить его на 2 (пропорция), получая 25,25 на карте 100x100. Главное - найти пропорцию, разделив общий размер экрана и общий размер вашей карты. В этом случае:

xScreen/xMap = 2;//200/100 = 2;
yScreen/yMap = 2;//200/100 = 2;

Вот код, чтобы найти пропорцию:

var xScreen = screen.width;
var yScreen = screen.height;
var xProportion = xScreen/xSizeOfYourMap;
var yProportion = yScreen/ySizeOfYourMap;
$("#container").click(function(e)
{
    var x1 = event.pageX;
    var y1 = event.pageY;

    var x2 = x1/xProportion;
    var y2 = y1/yProportion;

    alert("x of screen:"+x1+" - x of map:"+x2);
 });

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

Источник
Другие вопросы по тегам