Come ricalcolare le coordinate x, y in base alla schermata

Question

Sono in possesso di un'applicazione per la mappa di calore e memorizzo le coordinate x, y di un clic e anche la larghezza e l'altezza della finestra. i dati reali per 2 clic:

x, y, width, height 
433, 343, 1257, 959 
331, 823, 1257, 959 

Il problema è quando ho ridimensionare lo schermo sul sito reattivo, gli scatti esposti sono ora tutti fuori. Sto arrivando vuoto nelle mie ricerche ma c'è una formula o un algoritmo per ricalcolare le coordinate xey per risoluzioni diverse. Ad esempio, il primo clic, se lo width passa da 1257 a 990 e lo height passa da 959 a 400, come faccio a ricalcolare xey per allineare nello stesso punto?

EDIT: ho aggiunto 2 campi al database, width_percentage e l'altezza percentuale per memorizzare il x percentuale della larghezza e la y percentuale dell'altezza. Quindi se x era 433 e la larghezza dello schermo era 1257, allora x era il 35% dal bordo sinistro dello schermo. Ho quindi utilizzato la stessa teoria per l'altezza e ho eseguito i calcoli, ma non ha scalato il punto di clic nello stesso punto in cui avrei dovuto fare le percentuali per le risoluzioni di ridimensionamento. Lo sto testando facendo clic sulla piena risoluzione 1257 di larghezza e poi riaprendo a 900 larghezze. Vedi sotto per il codice per visualizzare i punti di clic a una risoluzione inferiore.

Ajax PHP

while ($row = mysql_fetch_array($results)) { 
    if($_GET['w'] < $row['width']) { 
    $xcorr = $row['width_percentage'] * $_GET['w']; 
    $ycorr = $row['y']; 
    } 
} 

Questo utilizza la variabile $_GET, passando la larghezza e l'altezza della risoluzione dello schermo al caricamento della pagina. Quindi ottiene i punti di clic dal database come $results. Poiché ho ridimensionato la larghezza della risoluzione solo da 1257 a 900, non ho inserito il calcolo dell'altezza e lo stesso pixel del clic iniziale. La nuova larghezza I moltiplicata per la percentuale e imposta il punto tale margine percentuale dalla sinistra dello schermo. Poiché la percentuale è del 35% , la nuova coordinata x diventa 900 *.35 = 315px dal bordo sinistro. Non ha funzionato e sto ancora grattando la testa per tenere il clic nello stesso punto per i siti reattivi.

Answer 1

Penso che tu sia sulla strada giusta con le percentuali. Stai includendo l'offset dell'immagine della mappa. Mi chiedo se il tuo algo funzioni, ma la rappresentazione visiva appare errata perché l'offset sta cambiando nel viewport.

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

È necessario aggiungere gli offset ogni volta per ottenere il posizionamento corretto.

Answer 2

È possibile raggiungere questo obiettivo con jQuery:

$(window).resize(function() { 
    //ur code 
}); 

javascript

window.onresize = resize; 

function resize() 
{ 
alert("resize event detected!"); 
} 

se si sta lavorando su dispositivi mobili utilizzano anche questo

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

Answer 3

Questo è ciò che si dovrebbe fare . A volte l'evento resize si attiva quando il documento viene analizzato. È una buona idea inserire il codice all'interno di una funzione evento onload. La funzione di modifica dell'orientamento è presa dalla risposta @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>

Answer 4

per questo è necessario fare qualche calcolo. Qui è la funzione che restituirà nuovi x e y pozione a base di altezza e larghezza

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

È possibile utilizzare la funzione comune per l'altezza e la larghezza calc.

DEMO

Answer 5

L'intera questione dipende molto sulla pagina che si desidera utilizzare questo su. La maggior parte delle pagine ha un blocco centrato e/o alcuni elementi auto-ridimensionabili (leggi "reattivi"). Se la pagina non è molto reattiva, ad es. avendo una larghezza fissa, hai un lavoro più facile. Se la pagina è centrata, potresti voler salvare la posizione X del cursore rispetto al centro della pagina. in questo modo la larghezza della finestra non ha importanza. Lo stesso vale anche per le pagine allineate a sinistra e a destra, naturalmente, in questo caso si salverà l'X-pos rispetto al bordo sinistro o destro della finestra rispettivamente.

L'immagine seguente mostra una posizione di scatto orientata al centro. Si noti che le proprietà x e y del clic non cambiano qui se si ridimensiona la finestra.

Ora per i metodi più generici

Se si salvano le dimensioni della finestra, la posizione del cursore E gli offset di scorrimento su ogni clic, sarà molto probabilmente in grado di riprodurlo accanto al layout, ma dovrai riprodurlo per ogni set di dimensioni univoche. Se hai usato il trucco dall'alto potresti essere in grado di sovrapporre tutti i layout e trovare un comune denominatore. Ad esempio, se la pagina è centrata nella finestra, ha una larghezza massima e hai salvato l'X-pos rispetto al centro della finestra, puoi sovrapporre tutti i clic avvenuti in finestre che erano almeno di quella larghezza.

Tuttavia, è possibile eseguire alcuni trucchi e salvare gli elementi selezionati insieme alle informazioni già salvate. Se si salva anche la posizione del clic relativa all'elemento, è possibile valutare questi dati per qualcosa di simile a "il pulsante di invio è piuttosto premuto nella parte in basso a destra" o "le persone spesso fanno clic all'estremità di tale menu a discesa e talvolta errato -click di alcuni pixel ".

Answer 6

Prova entrambe le seguenti:

1. imbottitura e margini potrebbero non scala. Usa "* {padding: 0; margin: 0}" alla fine del tuo foglio di stile e controlla se lo corregge.

2. Verificare che gli elementi esterni e interni (ovvero tutti) siano in scala. Ogni singolo elemento che non riesce a scalare farà cadere fuori luogo molti altri elementi. Questo generalmente accade con gli input di testo. Usa "* {border: solid 2}" alla fine del tuo foglio di stile per osservare visivamente l'effetto del ridimensionamento su ciascun elemento.

Sono sicuro che il problema verrà risolto.

Answer 7

Hai provato questa formula matematica per modificare l'intervallo di un numero?

E anche invece di memorizzare questo:

x, y, width, height 
433, 343, 1257, 959 
331, 823, 1257, 959 

Si potrebbe conservarlo normalizzato tra 0 e 1 quindi funziona per qualsiasi width/height (calcolato dividendo ciascuna x da il suo width e ogni dal suo height) :

x,  y 
0.344, 0.357 
0.263, 0.858 

Quindi non è necessario conoscere la width/height utilizzato quando li è memorizzato, e quando si desidera tradurli alle dimensioni dello schermo corrente è sufficiente moltiplicare ciascuno dalla corrente width/height