Отладка событий

Two.js — это мощная библиотека для работы с 2D-графикой на JavaScript, которая поддерживает интерактивные события. Основой для работы с событиями является объект сцены (Two), на который можно добавлять фигуры и обрабатывать взаимодействия пользователя. Сначала создается экземпляр Two с указанием параметров: размеров, типа рендерера и контейнера для отображения.

const elem = document.getElementById('draw-shapes');
const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg
}).appendTo(elem);

После создания сцены объекты, такие как Rectangle, Circle, Polygon, можно добавлять в группу или напрямую на сцену, а затем привязывать события. Two.js поддерживает события мыши и касаний через методы bind и unbind.

const circle = two.makeCircle(400, 300, 50);
circle.fill = '#FF8000';
circle.noStroke();

circle._renderer.elem.addEventListener('click', function(e) {
  console.log('Клик по кругу', e.clientX, e.clientY);
});

Объекты и их обработчики

Каждый объект в Two.js имеет _renderer.elem, который представляет собой HTML-элемент (<svg> или <canvas>), где можно напрямую использовать стандартные DOM-события. При этом важно понимать разницу между добавлением событий на объект сцены и на сам элемент рендера.

Примеры событий, доступных для объектов:

  • click — клик мышью
  • mouseover / mouseout — наведение и выход курсора
  • mousedown / mouseup — нажатие и отпускание кнопки мыши
  • mousemove — движение мыши
circle._renderer.elem.addEventListener('mouseover', function() {
  circle.fill = '#0080FF';
  two.update();
});

circle._renderer.elem.addEventListener('mouseout', function() {
  circle.fill = '#FF8000';
  two.update();
});

Использование групп для событий

Для сложных сцен удобно объединять объекты в Two.Group. Это позволяет обрабатывать события сразу на группе, а не на каждом объекте. При этом событие распространяется на все дочерние элементы, если не отключено всплытие.

const group = two.makeGroup(circle);
group.translation.set(100, 100);

group._renderer.elem.addEventListener('click', function() {
  console.log('Клик по группе');
});

Отладка событий

Для эффективной отладки событий Two.js необходимо отслеживать все изменения координат и свойств объектов. Основные методы:

  1. two.update() — обновление сцены после изменения свойств объектов. Без вызова этого метода изменения не будут видны.
  2. Консольное логирование координат — полезно для проверки правильности привязки событий.
  3. Использование инспектора DOM — элементы _renderer.elem можно проверять в инструментах разработчика браузера, чтобы убедиться в их наличии и корректной структуре.
circle._renderer.elem.addEventListener('click', function(e) {
  console.log('Событие клика: ', {
    x: e.clientX,
    y: e.clientY,
    circleX: circle.translation.x,
    circleY: circle.translation.y
  });
});

Делегирование и динамические объекты

Если на сцену добавляются новые объекты динамически, обработку событий можно организовать через делегирование. Вместо привязки события к каждому объекту, устанавливается обработчик на родительский элемент сцены и проверяется цель события через event.target.

elem.addEventListener('click', function(e) {
  if(e.target.tagName === 'circle') {
    console.log('Динамический клик по кругу');
  }
});

Практика визуальной отладки

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

const coordsText = two.makeText('', 50, 50, { size: 16 });
two.update();

elem.addEventListener('mousemove', function(e) {
  coordsText.value = `X: ${e.clientX}, Y: ${e.clientY}`;
  two.update();
});

Выводы по отладке событий

  • События привязываются через _renderer.elem или на контейнер сцены для делегирования.
  • Для обновления изменений в графике обязательно использовать two.update().
  • Консольное логирование и визуальные маркеры помогают выявлять ошибки в координатах и взаимодействиях.
  • Группы объектов позволяют централизовать обработку событий и облегчить управление сложными сценами.

Этот подход обеспечивает прозрачную и управляемую работу с интерактивными объектами в Two.js, позволяя отлаживать и тестировать все типы пользовательских взаимодействий.

Оглавление