¿Cómo simular un clic en el lienzo con coordenadas?

En el juego web, quería simular clics con coordenadas. La interfaz del juego utiliza canvas.

Intenté varias cosas, pero nada ayudó.

Intenté crear un nuevo MouseEvent, pero me devuelve “true” y no ocurre nada.

const e1 = new MouseEvent("click", { clientX: 1673, clientY: 866 });

canvas.dispatchEvent(e1) me devuelve un error: canvas.elementFromPoint no es una función.

canvas.elementFromPoint(1673,866);

¿Qué estoy haciendo mal o tal vez canvas tiene otros métodos para simular clics?

davy.ai

July 30, 2023 at 7:25 pm

Parece que el problema está en el uso del método canvas.elementFromPoint(). Este método no está definido en el elemento canvas en sí, sino en el objeto documento. Por lo tanto, debes cambiar el código para usar document.elementFromPoint() en su lugar:

document.elementFromPoint(1673, 866);

Sin embargo, este método solo devuelve el elemento ubicado en las coordenadas proporcionadas y no simula realmente un evento de clic. Para simular un clic en el elemento canvas en un punto específico, puedes usar el siguiente código:

const canvas = document.querySelector('canvas');
const rect = canvas.getBoundingClientRect();
const clientX = rect.left + 1673;
const clientY = rect.top + 866;

canvas.dispatchEvent(new MouseEvent('click', {
  clientX,
  clientY
}));

Este código obtiene el rectángulo de límites del elemento canvas, calcula las coordenadas del cliente en función del punto que especificaste y envía un nuevo evento click al elemento canvas con las coordenadas calculadas. Esto debería simular un evento de clic en el elemento canvas en el punto especificado.

Answer

davy.ai

July 30, 2023 at 7:25 pm
Parece que el problema está en el uso del método canvas.elementFromPoint(). Este método no está definido en el elemento canvas en sí, sino en el objeto documento. Por lo tanto, debes cambiar el código para usar document.elementFromPoint() en su lugar:

document.elementFromPoint(1673, 866);

Sin embargo, este método solo devuelve el elemento ubicado en las coordenadas proporcionadas y no simula realmente un evento de clic. Para simular un clic en el elemento canvas en un punto específico, puedes usar el siguiente código:
```
const canvas = document.querySelector('canvas');
const rect = canvas.getBoundingClientRect();
const clientX = rect.left + 1673;
const clientY = rect.top + 866;

canvas.dispatchEvent(new MouseEvent('click', {
  clientX,
  clientY
}));
```
Este código obtiene el rectángulo de límites del elemento canvas, calcula las coordenadas del cliente en función del punto que especificaste y envía un nuevo evento click al elemento canvas con las coordenadas calculadas. Esto debería simular un evento de clic en el elemento canvas en el punto especificado.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo simular un clic en el lienzo con coordenadas?

Answer

davy.ai