Добавление и удаление объектов

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

const elem = document.getElementById('drawing');
const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg // Можно использовать Two.Types.canvas или Two.Types.webgl
}).appendTo(elem);

Ключевые моменты:

  • width и height определяют размеры области рендеринга.
  • type задаёт метод рендеринга: SVG, Canvas или WebGL.
  • Метод appendTo добавляет canvas или svg в DOM.

После создания экземпляра Two необходимо вызвать two.update() для первичного рендеринга.

Создание объектов

Two.js поддерживает различные примитивы: прямоугольники, круги, линии, полигоны, дуги и текст. Примеры:

// Прямоугольник
const rect = two.makeRectangle(400, 300, 100, 50);

// Круг
const circle = two.makeCircle(200, 150, 40);

// Линия
const line = two.makeLine(50, 50, 150, 150);

// Полигон
const polygon = two.makePolygon(600, 400, 60, 5); // 5 углов

Каждый объект имеет позицию, размер и основные свойства: fill, stroke, linewidth. Пример изменения стиля:

circle.fill = '#FF0000';
circle.stroke = '#000000';
circle.linewidth = 2;

Добавление объектов в сцену

После создания объект автоматически привязывается к сцене через метод make.... Однако можно добавлять объекты динамически:

const ellipse = new Two.Ellipse(500, 100, 80, 40);
two.add(ellipse);
two.update();

Особенности метода add:

  • Принимает одиночный объект или массив объектов.
  • После добавления объект становится частью рендеринга при следующем вызове two.update() или в анимационном цикле.

Удаление объектов

Удаление объекта осуществляется методом remove:

two.remove(circle);
two.update();

Важно учитывать:

  • Удаление объекта не очищает память автоматически, если на него есть ссылки в коде.
  • Если объект вложен в группу (Two.Group), его нужно удалять через группу или сначала извлечь из группы.

Пример удаления объекта из группы:

const group = two.makeGroup(rect, line);
group.remove(rect); // удаляет только прямоугольник из группы
two.remove(group);  // удаляет всю группу со сцены
two.update();

Динамическое управление сценой

Two.js поддерживает анимацию и динамическое добавление/удаление объектов во время выполнения. Для этого используется встроенный цикл two.bind('upd ate', ...):

two.bind('update', function(frameCount) {
  if (frameCount === 100) {
    two.remove(circle);
  }
});
two.play();

Особенности динамики:

  • frameCount — счётчик кадров, увеличивается автоматически.
  • Объекты можно добавлять и удалять без прерывания анимации.
  • Для плавного управления удобно использовать группы и хранить ссылки на объекты в массиве.

Группы объектов

Two.Group позволяет объединять несколько объектов и управлять ими как единым целым:

const triangle = two.makePolygon(700, 200, 50, 3);
const star = two.makePolygon(700, 300, 40, 5);

const group = two.makeGroup(triangle, star);

// Перемещение группы
group.translation.se t(100, 50);

// Удаление группы
two.remove(group);
two.update();

Преимущества групп:

  • Массовое применение трансформаций.
  • Упрощённое добавление и удаление связанных объектов.
  • Возможность вложенных групп для сложных сцен.

Очистка сцены

Для полной очистки сцены используется метод clear():

two.clear();
two.update();
  • Удаляет все объекты из сцены.
  • Не влияет на группы, которые не были добавлены в сцену.
  • Полезно при перезаписи динамически генерируемого контента.

Рекомендации по работе с объектами

  1. Всегда хранить ссылки на объекты, если планируется их удаление или изменение.
  2. Для сложных анимаций использовать группы и массивы объектов.
  3. После добавления или удаления вызывать two.update() или работать в цикле two.play() для автоматического рендеринга.
  4. При удалении объектов из группы сначала проверять, что объект действительно принадлежит этой группе, чтобы избежать ошибок.

Сводка методов добавления и удаления

Действие Метод Two.js Примечание
Добавление объекта two.add(obj) Можно добавлять массив объектов
Удаление объекта two.remove(obj) Работает с отдельными объектами и группами
Добавление в группу group.add(obj) Управление объектами как единым целым
Удаление из группы group.remove(obj) Удаляет только указанный объект из группы
Очистка всей сцены two.clear() Удаляет все объекты и группы, освобождает сцену

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

Оглавление