Переиспользуемые компоненты

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

Символы (Symbol)

Symbol позволяет создавать прототип объекта, который можно многократно размещать в проекте без необходимости копирования его структуры.

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

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

// Создание экземпляров символа
var instance1 = mySymbol.place([150, 150]);
var instance2 = mySymbol.place([250, 250]);

// Изменение символа обновит все экземпляры
mySymbol.definition.fillColor = 'blue';

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

  • Экономия памяти: экземпляры используют одну и ту же базовую структуру.
  • Центр трансформации: каждый экземпляр наследует координаты и поворот относительно центра символа.
  • Редактирование прототипа: изменения символа мгновенно отражаются на всех экземплярах.

Группы (Group)

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

var rect = new Path.Rectangle([0, 0], [80, 40]);
rect.fillColor = 'green';

var circle = new Path.Circle([40, 20], 20);
circle.fillColor = 'yellow';

// Создание группы
var group = new Group([rect, circle]);
group.position = [200, 200]; // Перемещение всей группы
group.rotate(45);            // Поворот всех объектов

Особенности групп:

  • Позволяет масштабировать, перемещать и вращать комплексные композиции одним действием.
  • Группы можно вкладывать друг в друга для создания иерархических структур.
  • Можно использовать как основу для создания символов.

Пользовательские компоненты через классы

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

class Smiley {
    constructor(position, radius) {
        this.group = new Group();

        var face = new Path.Circle({
            center: [0, 0],
            radius: radius,
            fillColor: 'yellow'
        });

        var leftEye = new Path.Circle({
            center: [-radius/3, -radius/3],
            radius: radius/10,
            fillColor: 'black'
        });

        var rightEye = new Path.Circle({
            center: [radius/3, -radius/3],
            radius: radius/10,
            fillColor: 'black'
        });

        var mouth = new Path.Arc({
            from: [-radius/2, radius/4],
            through: [0, radius/2],
            to: [radius/2, radius/4],
            strokeColor: 'black',
            strokeWidth: 3
        });

        this.group.addChild(face);
        this.group.addChild(leftEye);
        this.group.addChild(rightEye);
        this.group.addChild(mouth);

        this.group.position = position;
    }

    moveTo(point) {
        this.group.position = point;
    }
}

var smiley1 = new Smiley([100, 100], 50);
var smiley2 = new Smiley([300, 150], 30);

Преимущества такого подхода:

  • Повторное использование логики и стилей компонента.
  • Возможность добавлять методы для управления поведением.
  • Изоляция структуры компонента от внешнего кода.

Использование слоев (Layer) для компонентов

Layer предоставляет способ организовать объекты в отдельные слои, что полезно для управления видимостью и порядком отрисовки.

var backgroundLayer = new Layer();
var background = new Path.Rectangle([0, 0], [400, 400]);
background.fillColor = '#e0e0e0';

var mainLayer = new Layer();
var circle = new Path.Circle([200, 200], 50);
circle.fillColor = 'blue';

// Переключение активного слоя
mainLayer.activate();

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

  • Слои помогают структурировать сложные проекты.
  • Компоненты можно помещать на разные слои для удобного управления.
  • Позволяют изолировать анимацию и взаимодействие разных частей сцены.

Комбинирование подходов

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

var starPath = new Path.Star({
    center: [0, 0],
    points: 5,
    radius1: 20,
    radius2: 40,
    fillColor: 'orange'
});

var starSymbol = new Symbol(starPath);

class StarField {
    constructor(count) {
        this.stars = [];
        for (var i = 0; i < count; i++) {
            var instance = starSymbol.place([Math.random()*400, Math.random()*400]);
            instance.rotate(Math.random()*360);
            this.stars.push(instance);
        }
    }

    twinkle() {
        this.stars.forEach(s => s.scaling = 0.8 + Math.random()*0.4);
    }
}

var field = new StarField(50);

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

Оглавление