0

Я пытаюсь симулировать нажатие по объекту в canvas, но у меня это никак не получается. Пробовал много разных вариантов вот один из них: var canvas = window.document.getElementById("canvas"); canvas.dispatchEvent(new MouseEvent("mousedown", {clientX: 50, clientY: 50})); Консоль пишет true, но при этом сам canvas никак не реагирует на событие. Не могли бы вы мне помочь решить эту проблему.

1
  • 1
    это канва под Вашим управлением? нет такого понятия, кликнуть по объекту на канве, это же картинка. 21 июн 2020 в 19:15

4 ответа 4

2

Как-то так. Нажатие по кнопке генерирует клик, по той точке холста, по которой был совершен клик ранее. Первоначально х:0 у:0

const canvas = document.querySelector('#canvas');
const btn = document.querySelector('#btn');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 40, 40);
ctx.fillStyle = 'green';
ctx.fillRect(80, 80, 40, 40);

canvas.addEventListener('click', handlerClickCanvas);
btn.addEventListener('click', handlerClickBtn)

let clientX = 0;
let clientY = 0;

function handlerClickCanvas(e) {
  clientX = e.clientX;
  clientY = e.clientY;
  console.log(`x:${clientX}, y:${clientY}`);
  const pixel = ctx.getImageData(clientX, clientY, 1, 1);
  console.log(pixel.data);
}

function handlerClickBtn() {
  const ev = new MouseEvent('click', {
    clientX,
    clientY
  });
  canvas.dispatchEvent(ev);
}
<canvas id='canvas'></canvas>
<button id='btn'>Emit Click</button>

2

В canvas нет возможности управлять уже нарисованным элементом, чтобы получить клик по части рисунка вам придётся сравнить координаты элемента в canvas и координаты клика

Так можно получить координаты клика в canvas, а координаты объекта в canvas у вас уже есть, т.к. вы его уже нарисовали, осталось их сравнить

  canvas.addEventListener('click', e => {
    const target = e.target.closest('#canvas')
    const targetCoords = target.getBoundingClientRect();
    const x = e.clientX - targetCoords.left;
    const y = e.clientY - targetCoords.top;
    console.log(x, y)
  })
2
  • хорошо, но теперь встает вопрос о том, как этот клик по координатам в canvas выполнить
    – 2ip
    21 июн 2020 в 17:41
  • Добавил код в ответ.
    – Aleksandr
    21 июн 2020 в 18:29
0

Клик можно эмулировать методом click(), имеющимся у любого DOM-элемента.

document.getElementById("canvas").click()
1
  • Я не хочу нажать на canvas, мне необходимо нажать по объекту в canvas или по определенной координате (по которой, соответственно, находится объект )
    – 2ip
    21 июн 2020 в 15:50
-1

Для таких вещей лучше использовать svg, принцип рисования там практически такой же, но каждый нарисованный элемент может иметь свой id и его можно прослушивать, например:

<svg viewBox="0 0 100 100">
  <circle id="circle" cx="5" cy="5" r="5" />
</svg>

<script>
  circle.addEventListener('click', e => {
   const target = e.target
   console.log(target)
 })
</script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.