Rilevare la posizione del mouse Fare clic all'interno di un'immagine su varie dimensioni dello schermo - JS/jQuery

Question

Ho fatto questa domanda prima e le risposte mi hanno detto cosa sapevo che dovevo fare ma non ho fornito un esempio, quindi non ho ancora capito una soluzione.

Ho un div iniziale chiamato "contenitore" che è un height:100% width:100% Immagine di una mappa dell'Oklahoma. L'idea è che quando l'utente fa clic su una determinata sezione della mappa (per questo esempio, il panhandle), il div viene attivato su un div che è l'immagine di panhandle. Deterino dove l'utente fa clic conoscendo la posizione pixel del mouse quando fa clic.

Il problema è che i valori dei pixel sono diversi per schermate di dimensioni diverse. Mi è stato detto che per ridimensionare i miei calcoli per dove l'utente fa clic sulla dimensione dello schermo, devo:

ridimensionare ogni valore prima di confrontarlo. Moltiplica ogni x per la larghezza canonica e dividi per la larghezza effettiva e fai lo stesso con y e altezza.

Sono confuso da "moltiplica ogni x per la tua larghezza canonica e dividi per la larghezza effettiva". Sono andato avanti e ho provato il ridimensionamento comunque. Ho scoperto che il primo bordo del panhandle è del 3,1% dal lato sinistro dello schermo e il bordo più lontano è del 35,7% dal lato sinistro dello schermo. Ho il codice seguente:

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

Questo dovrebbe aprire un avviso quando faccio clic nei confini orizzontali del Panhandle, ma non sta succedendo nulla. Noto che non sto dividendo nessuno dei miei valori per "larghezza effettiva". Qualcuno potrebbe fornire un esempio di come "moltiplicare ogni x per la tua larghezza canonica e dividere per la larghezza effettiva"?

Answer 1

Ciò che significano per larghezza canonica, è la larghezza "normale" - che nel tuo caso è la dimensione nativa dell'immagine.

Diciamo che l'immagine che stai usando per la mappa è normalmente 1280 x 1600 px (solo per l'amor di argomenti), quindi l'altezza canonica è di 1600 px e la tua larghezza canonica è 1280 px.

Quindi, se sto visualizzando l'immagine su una dimensione dello schermo 800 x 600 px - ovvero 800 px di altezza e 600 px alti - allora devo ridimensionare l'immagine per essere 800 /1600 = 0,5 volte più piccola di altezza e 600 / 1250 = 0,48 volte più piccolo di larghezza.

Allo stesso modo, se faccio clic sul 400 ° pixel dal lato sinistro dello schermo e 200 ° dalla parte superiore dello schermo reale, allora posso ottenere la mia posizione "canonica" dividendo per i rapporti precedentemente stabiliti. Quindi (400, 200) => (800, 416.7).

Quindi puoi usare questi valori canonici per cercare quale parte della tua immagine ha fatto clic.

Detto questo, non lo consiglierei davvero! Questo è un caso perfetto per l'utilizzo di immagini HTML: http://htmldog.com/reference/htmltags/map/ . Controlla!

Spero che sia di aiuto!

Answer 2

Non so questa cosa conica, ma matematicamente vedo il tuo problema in un modo molto semplice. Immagino che la tua mappa sia un'immagine e un'immagine ha una dimensione costante. Supponiamo che la tua mappa sia 100x100. Se la dimensione dello schermo è 200x200, lo schermo è 2 volte più grande della mappa.

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

Quindi tutti i valori utilizzati per lo schermo sono 2 volte più grandi dei valori utilizzati per la mappa effettiva. Se l'utente fa clic sul 50,50 pixel nella schermata 200x200, devi dividerlo per 2 (la proporzione) ottenendo 25,25 nella mappa 100x100. La chiave è trovare la proporzione dividendo la dimensione totale dello schermo e la dimensione totale della mappa. In questo caso:

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

Ecco il codice per trovare la proporzione:

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

Ora hai i valori del clic sulla mappa che è possibile calcolare se l'utente ha fatto clic sull'area desiderata. Per tutti i calcoli i numeri devono passare attraverso la proporzione.