SymbolItem и экземпляры символов

В Paper.js Symbol представляет собой шаблон объекта, который можно многократно использовать на холсте. Основное назначение символов — оптимизация работы с повторяющимися элементами и упрощение управления их экземплярами.

Создание символа выполняется через конструктор Symbol или метод Symbol.create(). Пример:

var path = new Path.Circle({
    center: [50, 50],
    radius: 20,
    fillColor: 'red'
});

var symbol = new Symbol(path);

В этом примере создаётся символ на основе объекта Path.Circle. В дальнейшем можно создавать его экземпляры без повторного описания пути.

Экземпляры символов: SymbolItem

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

var instance = new SymbolItem(symbol);
instance.position = [100, 100];

Экземпляр наследует свойства оригинального символа, но имеет собственные трансформации, позицию и масштаб. Любые изменения, сделанные в SymbolItem, не влияют на исходный символ.

Свойства SymbolItem

  • position — координаты центра экземпляра.
  • scaling — масштабирование экземпляра относительно оригинала.
  • rotation — угол поворота в градусах.
  • pivot — точка опоры для поворота и масштабирования.
  • locked — блокировка редактирования экземпляра.
  • visible — видимость экземпляра на холсте.
  • data — произвольные данные, связанные с экземпляром.

Пример с трансформацией:

var instance2 = new SymbolItem(symbol);
instance2.position = [200, 200];
instance2.scaling = 2;
instance2.rotation = 45;

Массовое создание и управление экземплярами

Для оптимизации часто используют циклы для генерации нескольких экземпляров:

for (var i = 0; i < 10; i++) {
    var inst = new SymbolItem(symbol);
    inst.position = [i * 50, i * 50];
    inst.rotation = i * 15;
}

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

Взаимодействие с символами

  • symbol.definition — ссылка на объект, из которого создан символ.
  • symbol.remove() — удаляет символ и все его экземпляры с холста.
  • Symbol.items — массив всех созданных символов в проекте.
  • SymbolItem.bounds — возвращает прямоугольник, ограничивающий экземпляр, полезно для коллизий и позиционирования.
  • SymbolItem.clone() — создание копии экземпляра с сохранением текущих трансформаций.

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

  1. Эффективность памяти — несколько экземпляров используют один объект в памяти.
  2. Удобство обновления — изменение исходного символа отражается на всех экземплярах.
  3. Управляемость — экземпляры легко трансформировать и анимировать независимо от исходного объекта.

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

SymbolItem хорошо интегрируются с системой анимации Paper.js. Пример анимации вращения:

var instance = new SymbolItem(symbol);
instance.position = [150, 150];

function onFrame(event) {
    instance.rotation += 2;
}

Каждый кадр увеличивает угол вращения экземпляра, не затрагивая другие объекты.

Динамическое изменение символа

Можно менять графическое содержимое символа через его определение:

symbol.definition.fillColor = 'blue';

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

Вложенные символы

Символы могут содержать внутри другие символы. Это позволяет создавать сложные иерархические структуры:

var inner = new Path.Rectangle([0, 0], [20, 20]);
var innerSymbol = new Symbol(inner);

var outer = new Group();
outer.addChild(new SymbolItem(innerSymbol));
var outerSymbol = new Symbol(outer);

Изменение внутреннего символа автоматически обновляет все экземпляры во внешнем символе, что облегчает работу со сложной графикой.

Использование Symbol и SymbolItem позволяет создавать масштабируемые, эффективные и легко управляемые графические сцены в Paper.js, особенно при работе с повторяющимися элементами и анимацией.

Оглавление