Star

Paper.js — это векторная библиотека для HTML5 Canvas, которая позволяет работать с графикой на JavaScript на высоком уровне абстракции. Для построения звёздных фигур используется объект Path.Star, который упрощает создание сложных многоугольников с равномерно распределёнными лучами.

Создание звезды

Объект Path.Star создаётся с помощью конструктора:

let star = new Path.Star({
    center: [150, 150],
    points: 5,
    radius1: 50,
    radius2: 100,
    fillColor: 'yellow',
    strokeColor: 'black'
});

Пояснение параметров:

  • center — координаты центра звезды [x, y].
  • points — количество лучей звезды. Значение должно быть ≥ 2.
  • radius1 — радиус внутреннего круга, к которому примыкают вершины внутренних точек.
  • radius2 — радиус внешнего круга, к которому примыкают вершины наружных точек.
  • fillColor — цвет заливки фигуры.
  • strokeColor — цвет контура.

Принцип построения

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

let step = 360 / (points * 2);
for (let i = 0; i < points * 2; i++) {
    let angle = step * i;
    let radius = i % 2 === 0 ? radius2 : radius1;
    let x = center.x + radius * Math.cos(angle * Math.PI / 180);
    let y = center.y + radius * Math.sin(angle * Math.PI / 180);
    star.add(new Point(x, y));
}
star.closed = true;

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

Настройка визуальных эффектов

Paper.js позволяет гибко настраивать визуальные свойства звезды:

  • strokeWidth — толщина линии контура.
  • dashArray — массив для создания пунктирной линии.
  • shadowColor, shadowBlur, shadowOffset — тень для придания объёма.

Пример:

star.strokeWidth = 4;
star.dashArray = [10, 5];
star.shadowColor = new Color(0, 0, 0, 0.5);
star.shadowBlur = 12;
star.shadowOffset = new Point(5, 5);

Анимация звезды

Для анимации объектов Paper.js используется функция view.onFrame, которая вызывается на каждом кадре анимации:

view.onFr ame = function(event) {
    star.rotate(1); // поворот на 1 градус за кадр
};

Можно комбинировать вращение с изменением радиусов для создания эффекта пульсации:

let scaleFactor = Math.sin(Date.now() * 0.005) * 0.3 + 1;
star.scale(scaleFactor);

Интерактивность

Paper.js поддерживает обработку событий мыши:

star.onMouseEn ter = function(event) {
    this.fillColor = 'orange';
};

star.onMouseLe ave = function(event) {
    this.fillColor = 'yellow';
};

Также можно использовать onMouseDrag для перемещения звезды:

star.onMouseD rag = function(event) {
    this.position += event.delta;
};

Комбинирование со слоями

Для сложных сцен звезды удобно размещать на отдельных слоях:

let starLayer = new Layer();
starLayer.addChild(star);
starLayer.activate();

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

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

  • Использовать минимальное количество точек для сложных звездных форм, чтобы снизить нагрузку на Canvas.
  • Для повторяющихся анимаций лучше кэшировать объект Path и изменять только его свойства.
  • Для сложных фигур можно комбинировать Path.Star с Path.Circle или Path.Rectangle через PathItem.subtract и PathItem.unite для создания уникальных форм.

Заключение по работе со звездой в Paper.js

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

Оглавление