Symbol и создание символов

В Paper.js символы (Symbol) представляют собой повторно используемые графические объекты, которые позволяют оптимизировать производительность при работе с множеством одинаковых элементов на сцене. Символы создаются на основе уже существующих объектов Paper.js, таких как Path, Raster, Group, и позволяют многократно использовать их экземпляры без необходимости дублирования исходных данных.

Создание символа

Для создания символа используется конструктор new Symbol(item), где item — это объект Paper.js, который станет основой символа. После создания символа исходный объект может быть удалён или скрыт, не влияя на символ.

// Создание объекта Path
var path = new Path.Circle({
    center: [50, 50],
    radius: 20,
    fillColor: 'red'
});

// Создание символа на основе Path
var symbol = new Symbol(path);

В этом примере объект path превращается в символ symbol. Теперь можно создавать его экземпляры на сцене.

Экземпляры символа (PlacedSymbol)

После создания символа экземпляры добавляются с помощью метода symbol.place([point]). Экземпляр символа — это объект PlacedSymbol, который ведет себя как любой другой объект Paper.js, но при этом связан с оригинальным символом.

// Размещение экземпляров символа
var placed1 = symbol.place(new Point(100, 100));
var placed2 = symbol.place(new Point(200, 100));

// Настройка цвета через экземпляр
placed2.fillColor = 'blue';

Особенности PlacedSymbol:

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

Управление символами

С помощью Symbol API можно получать доступ к различным аспектам символов:

  • symbol.definition — исходный объект, на основе которого создан символ.
  • symbol.place() — создание нового экземпляра символа.
  • symbol.remove() — удаление символа и всех его экземпляров.
  • placedSymbol.remove() — удаление отдельного экземпляра.
// Удаление символа и всех экземпляров
symbol.remove();

// Удаление одного экземпляра
placed1.remove();

Трансформации экземпляров

Экземпляры символов поддерживают все стандартные трансформации объектов Paper.js:

  • Смещение через position или translate()
  • Масштабирование через scale()
  • Поворот через rotate()
  • Отражение через scale(-1, 1) или scale(1, -1)
placed2.scale(1.5);
placed2.rotate(45);
placed2.position = new Point(250, 150);

Каждая трансформация применяется только к конкретному экземпляру, не влияя на исходный символ или другие экземпляры.

Использование символов в анимации

Symbols удобны для создания анимаций, так как изменение исходного объекта автоматически обновляет все экземпляры, если используется метод symbol.definition. Однако, часто для динамических сцен проще анимировать отдельные экземпляры.

function onFrame(event) {
    placed1.rotate(2);
    placed2.position.x += 1;
}

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

Советы по оптимизации

  • Использовать символы при большом количестве одинаковых объектов для снижения нагрузки на Canvas.
  • Изменения цвета или других свойств экземпляров не создают дубликаты геометрии, поэтому Paper.js эффективно управляет памятью.
  • При необходимости полного обновления всех экземпляров можно изменить свойства исходного объекта через symbol.definition.
symbol.definition.fillColor = 'green';

Все существующие экземпляры обновятся автоматически, если не имеют индивидуально переопределенных свойств.

Работа с группами и сложными объектами

Символ может быть создан не только из одного Path или Raster, но и из группы объектов (Group). Это позволяет объединять несколько объектов в один символ и затем многократно размещать его на сцене.

var group = new Group([
    new Path.Circle({center: [0,0], radius: 20, fillColor: 'yellow'}),
    new Path.Rectangle({point: [-10, -10], size: [20,20], fillColor: 'blue'})
]);

var groupSymbol = new Symbol(group);
var instance = groupSymbol.place(new Point(300, 300));

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

Итоговое понимание

  • Symbol — шаблон объекта, который может многократно использоваться.
  • PlacedSymbol — экземпляр символа, который можно позиционировать и трансформировать независимо.
  • Символы повышают производительность и упрощают управление повторяющимися элементами.
  • Работа с группами и анимациями расширяет возможности использования Symbol в интерактивной графике и визуализациях.
Оглавление