Метод paper.clear()

Метод clear() библиотеки Snap.svg предназначен для полного удаления всех графических элементов из контейнера SVG, на котором был создан объект paper. Этот метод используется для сброса содержимого холста без необходимости удалять сам элемент SVG из DOM.

Синтаксис

paper.clear();
  • paper — объект Snap, созданный через Snap(width, height) или через привязку к существующему элементу SVG.
  • Возвращаемое значение: объект paper, очищенный от всех вложенных элементов.

Основные возможности

  1. Удаление всех элементов Метод удаляет все графические элементы, добавленные на холст через Snap:

    • circle(), rect(), ellipse(), line(), path(), text()
    • Группы g() и вложенные элементы внутри них

  2. Сохранение атрибутов SVG При вызове paper.clear() атрибуты самого контейнера SVG (width, height, viewBox, id, class) остаются без изменений. Удаляются только дочерние элементы.

  3. Использование перед перерисовкой Метод часто применяется для динамического обновления сцены: старые объекты удаляются, и на пустой холст создаются новые элементы. Это повышает производительность и предотвращает накопление элементов.

Пример использования

// Создание холста 500x500
var paper = Snap(500, 500);

// Добавление графики
var circle = paper.circle(100, 100, 50).attr({
    fill: "#3498db",
    stroke: "#2980b9",
    strokeWidth: 4
});

var rect = paper.rect(200, 50, 100, 100).attr({
    fill: "#e74c3c",
    stroke: "#c0392b",
    strokeWidth: 3
});

// Очистка холста
paper.clear();

// Добавление нового элемента после очистки
paper.text(150, 250, "Новая сцена").attr({
    fill: "#2c3e50",
    fontSize: 24
});

В этом примере после вызова paper.clear() на холсте удаляются круг и прямоугольник, но SVG-контейнер остается. На пустом холсте создается новый текстовый элемент.

Особенности работы с группами

Если на холсте присутствуют группы (g()), paper.clear() удаляет все элементы внутри группы и саму группу, не оставляя следов в DOM. Это отличается от удаления отдельных элементов через element.remove(), где требуется явно обращаться к каждой группе.

var group = paper.group(
    paper.circle(50, 50, 30),
    paper.rect(100, 20, 60, 60)
);

// После очистки холста
paper.clear();
// group и все его элементы удалены

Сравнение с element.remove()

  • element.remove() удаляет только конкретный элемент или группу из DOM.
  • paper.clear() удаляет все элементы, оставляя только сам контейнер SVG.

Использование clear() экономит время при полной перерисовке сцены и делает код чище.

Практические рекомендации

  • Вызывать paper.clear() перед созданием новой сцены, если старые элементы больше не нужны.
  • Не использовать clear() внутри анимаций для отдельных элементов, если требуется сохранить часть сцены.
  • Для динамических интерфейсов с множеством объектов рекомендуется комбинировать paper.clear() с группировкой элементов, чтобы облегчить управление содержимым SVG.

Важные нюансы

  • Атрибуты контейнера, такие как width, height или viewBox, не сбрасываются. Если требуется их изменить, нужно делать это отдельно.
  • Методы Snap.svg, такие как paper.circle() или paper.rect(), после очистки создают новые элементы на пустом холсте, не затрагивая предыдущие объекты.

Метод paper.clear() является основным инструментом для полного контроля над содержимым SVG, позволяя быстро очищать холст и создавать новые композиции без удаления контейнера и его атрибутов.

Оглавление