Detección de la posición del clic del mouse dentro de una imagen en tamaños de pantalla variados - JS/JQuery

Question

He hecho esta pregunta antes, y las respuestas me dijeron lo que sabía que tenía que hacer, pero no proporcioné un ejemplo, así que aún no he descubierto una solución.

Tengo un divicente div llamado "contenedor" que es un height:100% width:100% Imagen de un mapa de Oklahoma. La idea es que cuando el usuario hace clic en una determinada sección del mapa (para este ejemplo, el Panhandle), el DIV se cambia a un DIV que es la imagen de Panhandle. Determino dónde hace clic el usuario conociendo la ubicación del píxel del mouse cuando hace clic.

El problema es que los valores de píxeles son diferentes para pantallas de diferentes tamaños. Me han dicho que para escalar mis cálculos sobre dónde hace clic en el tamaño del usuario en función del tamaño de su pantalla, necesito:

Escala cada valor antes de compararlo. Multiplique cada x por su ancho canónico y divida por el ancho real y haga lo mismo con y y altura.

Estoy confundido por "multiplicar cada x por su ancho canónico y dividir por el ancho real". Seguí adelante e intenté escalar de todos modos. Descubrí que el primer borde del Panhandle está a 3.1% del lado izquierdo de la pantalla y el borde más lejano está a 35.7% del lado izquierdo de la pantalla. Tengo el siguiente código:

$("#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!");
        }   
     }  

Esto debería aparecer una alerta cuando haga clic en los confinamientos horizontales del Panhandle, pero no está sucediendo nada. Noto que no estoy dividiendo ninguno de mis valores por "ancho real". ¿Alguien podría proporcionar un ejemplo de cómo "multiplicar cada x por su ancho canónico y dividir por el ancho real"?

Answer 1

Lo que significan con ancho canónico es el ancho 'normal', que en su caso es el tamaño nativo de la imagen.

Digamos que la imagen que está utilizando para el mapa es normalmente 1280 x 1600 PX (solo por argumentos), entonces su altura canónica es de 1600 px y su ancho canónico es de 1280 px.

Entonces, si estoy viendo la imagen en un tamaño de pantalla de 800 x 600 px, es decir, 800 px de alto y 600 px de alto, entonces necesito escalar la imagen para que sea 800 /1600 = 0.5 veces más pequeña en altura, y 600 / 1250 = 0.48 veces más pequeño en ancho.

Del mismo modo, si hago clic en el 400 píxeles desde el lado izquierdo de la pantalla, y 200º desde la parte superior en mi pantalla real, entonces puedo obtener mi posición 'canónica' dividiendo por las relaciones previamente establecidas. Entonces (400, 200) => (800, 416.7).

Luego puede usar estos valores canonicalizados para buscar en qué parte de su imagen hicieron clic.

Habiendo dicho todo eso, ¡realmente no recomendaría eso! Este es un caso perfecto para usar imágenes de imágenes HTML: http://htmldog.com/reference/htmltags/map/ . ¡Échale un vistazo!

¡Espero que esto ayude!

Answer 2

No sé sobre esta cosa cónica, pero matemáticamente veo tu problema de una manera muy simple. Supongo que su mapa es una imagen y una imagen tiene un tamaño constante. Digamos que su mapa es de 100x100. Si el tamaño de la pantalla es 200x200, la pantalla es 2 veces más grande que su mapa.

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

Por lo tanto, todos los valores utilizados para la pantalla son 2 veces más grandes que los valores utilizados para el mapa real. Si el usuario hace clic en los 50,50 píxeles en su pantalla 200x200, debe dividir esto para 2 (la proporción) obteniendo 25,25 en su mapa de 100x100. La clave es encontrar la proporción dividiendo el tamaño total de la pantalla y el tamaño total de su mapa. En este caso:

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

Aquí está el código para encontrar la proporción:

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);
 });

Ahora tiene los valores del clic en el mapa que puede calcular si el usuario ha hecho clic en el área que quería. Para todos sus cálculos, los números deben pasar por la proporción.