Trouver les coordonnées de la fenêtre du champ
Dans l’iframe ci-dessous, vous pouvez voir un document avec le “champ” vert.
Utilisez JavaScript pour trouver les coordonnées de la fenêtre des coins pointés par des flèches.
Il y a une petite fonctionnalité implémentée dans le document pour plus de commodité. Un clic à n’importe quel endroit montre les coordonnées là-bas.
Votre code doit utiliser DOM pour obtenir les coordonnées de la fenêtre de :
- Coin extérieur supérieur gauche (c’est simple).
- En bas à droite, coin extérieur (simple aussi).
- Coin intérieur supérieur gauche (un peu plus dur).
- En bas à droite, coin intérieur (il y a plusieurs façons, choisissez-en une).
Les coordonnées que vous calculez doivent être les mêmes que celles renvoyées par le clic de souris.
P.S. Le code devrait également fonctionner si l’élément a une autre taille ou bordure, qui n’est lié à aucune valeur fixe.
Coins extérieurs
Les coins extérieurs sont essentiellement ce que nous obtenons de elem.getBoundingClientRect().
Les coordonnées du coin supérieur gauche answer1 et du coin inférieur droit answer2 :
let coords = elem.getBoundingClientRect();
let answer1 = [coords.left, coords.top];
let answer2 = [coords.right, coords.bottom];Coin intérieur supérieur gauche
Cela diffère du coin extérieur par la largeur de la bordure. Un moyen fiable pour obtenir la distance est clientLeft/clientTop :
let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];Coin intérieur en bas à droite
Dans notre cas, nous devons soustraire la taille de la bordure des coordonnées extérieures.
Nous pourrions utiliser la manière CSS :
let answer4 = [
coords.right - parseInt(getComputedStyle(field).borderRightWidth),
coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
];Une autre façon serait d’ajouter clientWidth/clientHeight aux coordonnées du coin supérieur gauche. C’est probablement encore mieux :
let answer4 = [
coords.left + elem.clientLeft + elem.clientWidth,
coords.top + elem.clientTop + elem.clientHeight
];