Encuentra las coordenadas del campo en la ventana
En el siguiente iframe puedes ver un documento con el “campo” verde.
Usa JavaScript para encontrar las coordenadas de las esquinas de la ventana señaladas con las flechas.
Hay una pequeña característica implementada en el documento para conveniencia. Un click en cualquier lugar mostrará las coordenadas ahí.
Tu código debe usar el DOM para obtener las coordenadas en la ventana de:
- La esquina superior izquierda externa (eso es simple).
- La esquina inferior derecha externa (simple también).
- La esquina superior izquierda interna (un poco más difícil).
- La esquina inferior derecha interna (existen muchas maneras, elige una).
Las coordenadas que tú calcules deben ser iguales a las devueltas por el click del mouse.
P.D. El código también debe funcionar si el elemento tiene otro tamaño o borde, no está ligado a ningún valor fijo.
Esquinas externas
Las esquinas externas son básicamente las que obtenemos de elem.getBoundingClientRect().
Las coordenadas de la esquina superior izquierda answer1 y la esquina inferior derecha answer2:
let coords = elem.getBoundingClientRect();
let answer1 = [coords.left, coords.top];
let answer2 = [coords.right, coords.bottom];Esquina interna y superior izquierda
Esta es diferente a la esquina externa por el ancho del borde. Una manera confiable de obtener la distancia es usando clientLeft/clientTop:
let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];Esquina interna e inferior derecha
En nuestro caso necesitamos sustraer la medida del borde de las coordenadas externas.
Podemos usar la forma de CSS:
let answer4 = [
coords.right - parseInt(getComputedStyle(field).borderRightWidth),
coords.bottom - parseInt(getComputedStyle(field).borderBottomWidth)
];Una forma alternativa puede ser agregando clientWidth/clientHeight a las coordenadas de la esquina superior izquierda. Probablemente sea incluso mejor:
let answer4 = [
coords.left + elem.clientLeft + elem.clientWidth,
coords.top + elem.clientTop + elem.clientHeight
];