Очистка контейнеров

В библиотеке SVG.js контейнеры играют ключевую роль для организации графики. Контейнером обычно выступает объект SVG.Container или SVG.Doc, представляющий область, в которой располагаются все графические элементы. Управление контейнерами включает их создание, манипуляцию содержимым и очистку от элементов, что критично для динамических интерфейсов и анимаций.

Инициализация контейнера

Для работы с SVG необходимо создать документ с помощью метода SVG(). Пример:

const draw = SVG().addTo('body').size(600, 400);
  • SVG() — создаёт новый объект документа.
  • addTo('body') — вставляет контейнер в выбранный HTML-элемент.
  • size(width, height) — задаёт размеры контейнера.

Контейнер готов к добавлению графических элементов: прямоугольников, кругов, линий и т.д.

Методы очистки контейнера

clear()

Метод clear() удаляет все дочерние элементы контейнера, сохраняя сам контейнер. Это полезно, когда нужно полностью обновить содержимое без пересоздания DOM-элемента:

draw.clear();
  • Полезно для динамических интерфейсов с перерисовкой графики.
  • Сохраняет все настройки контейнера (размеры, атрибуты).

remove()

Метод remove() полностью удаляет контейнер вместе с его содержимым из DOM:

draw.remove();
  • Используется, когда контейнер больше не нужен.
  • После удаления объект контейнера становится недоступным для дальнейших операций.

each()

Метод each() позволяет перебрать все дочерние элементы контейнера и выполнить над ними действия, включая выборочную очистку:

draw.each(function(i, children) {
  if (this.type === 'circle') {
    this.remove();
  }
});
  • i — индекс элемента в контейнере.
  • children — массив дочерних элементов.
  • Позволяет гибко управлять содержимым без очистки всего контейнера.

Использование слоёв для управления содержимым

Контейнеры можно структурировать с помощью group(), что создаёт под-контейнеры:

const layer = draw.group();
layer.rect(100, 100).fill('red');
layer.circle(50).fill('blue');
  • Группы можно очищать независимо от основного контейнера:
layer.clear();
  • Это позволяет создавать сложные интерфейсы с отдельными слоями для графики и анимации.

Очистка при анимации

При создании динамических сцен важно правильно очищать контейнеры для предотвращения утечек памяти. Например, если используется таймер для перерисовки:

setInterval(() => {
  draw.clear();
  draw.circle(50).fill('#00f').move(Math.random() * 500, Math.random() * 300);
}, 1000);
  • Каждый тик очищает контейнер и создаёт новые элементы.
  • Использование clear() предпочтительнее, чем пересоздание контейнера, чтобы сохранить размер и настройки.

Очистка с удалением событий

При удалении элементов важно учитывать привязанные обработчики событий. Метод clear() автоматически удаляет все события, связанные с дочерними элементами:

const rect = draw.rect(100, 50).fill('green').on('click', () => alert('Clicked!'));
draw.clear(); // Событие click удалено вместе с прямоугольником
  • Это предотвращает накопление ненужных слушателей событий и повышает производительность.

Комбинации методов

Часто используется комбинация clear() и создания новых групп для организации слоёв:

draw.clear();
const background = draw.group();
background.rect(600, 400).fill('#eee');

const shapes = draw.group();
shapes.circle(80).fill('#f00').move(200, 150);
  • clear() очищает старые слои.
  • Создаются новые группы для логической структуры.
  • Такой подход облегчает управление сложными сценами и анимацией.

Резюме по методам очистки

Метод Удаляет контейнер Удаляет содержимое Сохраняет события Использование
clear() ❌ ✅ ❌ Полная очистка содержимого, контейнер остаётся
remove() ✅ ✅ ❌ Полное удаление контейнера и его содержимого
each() ❌ ❌/✅ ✅ Выборочная очистка или модификация дочерних элементов

Эффективное использование этих методов позволяет создавать динамические, отзывчивые интерфейсы с SVG.js, минимизируя нагрузку на DOM и предотвращая утечки памяти.

Оглавление