Trovate le coordinate del campo relative alla finestra
Nell’iframe sotto potete osservare un documento con un “campo” verde.
Usate JavaScript per trovare le coordinate relative alla finestra degli angoli indicati dalle frecce.
Per comodità è stata implementata una semplice funzionalità nel documento: un click in un punto qualsiasi mostrerà le coordinate.
Il vostro codice dovrebbe usare il DOM per ottenere le coordinate relative alla finestra di:
- angolo esterno superiore sinistro (è semplice).
- angolo esterno inferiore destro (semplice anche questo).
- angolo interno superiore sinistro (un po’ più difficile).
- angolo interno inferiore destro (esistono vari modi, sceglietene uno).
Le coordinate che calcolate dovrebbero essere le stesse di quelle mostrate al click del mouse.
P.S. Il codice dovrebbe funzionare anche se l’elemento ha un’altra dimensione o un altro bordo, non deve dipendere da valori fissi.
Angoli esterni
Gli angoli esterni sono fondamentalmente quello che otteniamo da elem.getBoundingClientRect().
Le coordinate dell’angolo superiore sinistro answer1 e quelle dell’angolo inferiore destro answer2:
let coords = elem.getBoundingClientRect();
let answer1 = [coords.left, coords.top];
let answer2 = [coords.right, coords.bottom];Angolo interno superiore sinistro
Questo differisce dall’angolo esterno solo per la larghezza del bordo. Un modo affidabile per calcolare la distanza è clientLeft/clientTop:
let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];Angolo interno inferiore destro
Nel nostro caso possiamo sottrarre la misura del bordo dalle coordinate esterne.
Potremmo utilizzare il valore CSS:
let answer4 = [
coords.right - parseInt(getComputedStyle(field).borderRightWidth),
coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
];Un’alternativa sarebbe aggiungere clientWidth/clientHeight alle coordinate dell’angolo interno superiore sinistro. Questa è probabilmente la soluzione migliore:
let answer4 = [
coords.left + elem.clientLeft + elem.clientWidth,
coords.top + elem.clientTop + elem.clientHeight
];