Estoy intentando obtener las coordenadas x
e y
del puntero del ratón cuando el usuario realiza un click sobre un elemento de la pantalla. Concretamente este elemento es un componente angular dentro de otro, que es básicamente un rectángulo svg
. La idea es que se dibuje algo según la coordenada en la que el usuario realiza el click.
Por poner un ejemplo fácil de entender, podría ser dibujar un círculo dentro del rectángulo en la posición donde se realizó el click. A continuación muestro una simplificación de lo que estoy haciendo. Cuando se inicia la aplicación se tiene:
Cuando el usuario realiza un click cerca de la esquina superior derecha del rectángulo gris, se dibuja un círculo negro:
No es necesario que resuelvan todos los pasos para dibujar el círculo, solo necesito saber como hacer para obtener la coordenada donde se realiza el click. Voy a dejar el enlace de StackBlitz con el código, pero de todos modos voy a poner las líneas html de los componentes padre e hijo.
Padre:
<div id="contenedor">
<h3>Componente padre</h3>
<app-hijo></app-hijo>
</div>
Hijo:
<svg width="400" height="100">
<rect x="50" y="0" width="300" height="100"
style="fill:#C0C0C0; stroke-width:1; stroke:black;" />
</svg>
Necesitaría que el código para manejar este evento se realice desde el fichero Typescript del componente hijo.
Muchas gracias.