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

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

2 голосов
/ 21 марта 2011

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

У меня есть начальный 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!");
        }   
     }

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

Ответы [ 2 ]

2 голосов
/ 21 марта 2011

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

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

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

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

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

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

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

1 голос
/ 21 марта 2011

Я не знаю об этой конической вещи, но математически я вижу вашу проблему очень простым способом.Я предполагаю, что ваша карта - это изображение, а изображение имеет постоянный размер.Допустим, ваша карта 100х100.Если размер экрана составляет 200x200, экран в 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);
 });

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

...