RegularPolygon

В библиотеке Paper.js класс Path.RegularPolygon используется для создания правильных многоугольников — фигур с равными сторонами и углами. Он является специализированным методом построения пути (Path) и значительно упрощает создание геометрически точных фигур без ручного расчёта координат.

Базовый синтаксис

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

var polygon = new Path.RegularPolygon(center, sides, radius);

Параметры:

  • center — точка центра фигуры (Point)
  • sides — количество сторон (целое число ≥ 3)
  • radius — радиус описанной окружности

Пример:

var center = new Point(200, 200);
var sides = 6;
var radius = 80;

var hexagon = new Path.RegularPolygon(center, sides, radius);
hexagon.strokeColor = 'black';

В результате создаётся правильный шестиугольник, вписанный в окружность радиуса 80 пикселей.

Геометрическая основа

Правильный многоугольник строится на основе окружности:

  • Все вершины лежат на окружности радиуса radius
  • Центр окружности совпадает с center
  • Углы между соседними вершинами равны: 360° / sides

Координаты вершин вычисляются автоматически по формуле:

x = center.x + radius * cos(angle)
y = center.y + radius * sin(angle)

где angle изменяется с равным шагом.

Количество сторон

Минимально допустимое значение:

sides >= 3
  • 3 — треугольник
  • 4 — квадрат
  • 5 — пятиугольник
  • 6 — шестиугольник и т.д.

Пример:

new Path.RegularPolygon(new Point(100, 100), 3, 50); // треугольник
new Path.RegularPolygon(new Point(200, 100), 4, 50); // квадрат
new Path.RegularPolygon(new Point(300, 100), 8, 50); // восьмиугольник

Управление внешним видом

Так как RegularPolygon возвращает объект Path, доступны все свойства стилизации:

Обводка и заливка

polygon.strokeColor = 'black';
polygon.fillColor = 'yellow';
polygon.strokeWidth = 2;

Прозрачность

polygon.opacity = 0.5;

Тень

polygon.shadowColor = 'black';
polygon.shadowBlur = 10;
polygon.shadowOffset = new Point(5, 5);

Поворот многоугольника

По умолчанию одна из вершин располагается сверху. Для изменения ориентации используется вращение:

polygon.rotate(30);

Поворот осуществляется вокруг центра фигуры.

Масштабирование

polygon.scale(1.5); // увеличение в 1.5 раза

Или относительно точки:

polygon.scale(0.5, new Point(0, 0));

Перемещение

polygon.position = new Point(300, 300);

или:

polygon.translate(new Point(50, 0));

Доступ к сегментам

Каждая вершина многоугольника — это сегмент пути:

polygon.segments.forEach(function(segment) {
    console.log(segment.point);
});

Изменение сегментов позволяет деформировать фигуру:

polygon.segments[0].point.y -= 20;

После такого изменения фигура перестаёт быть строго правильной.

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

Конструктор не позволяет напрямую менять sides, поэтому требуется пересоздание:

polygon.remove();

polygon = new Path.RegularPolygon(center, newSides, radius);

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

Часто применяется в анимациях:

function onFrame(event) {
    polygon.rotate(1);
}

Или динамическое изменение радиуса:

function onFrame(event) {
    var scale = 1 + Math.sin(event.time) * 0.01;
    polygon.scale(scale);
}

Создание звёздчатых форм

Хотя RegularPolygon создаёт только правильные фигуры, его можно использовать как основу:

var star = new Path.RegularPolygon(new Point(200, 200), 5, 100);

for (var i = 0; i < star.segments.length; i++) {
    if (i % 2 === 0) {
        star.segments[i].point = star.segments[i].point.multiply(0.5);
    }
}

Так формируется примитивная звезда.

Комбинирование с другими объектами

Многоугольники можно использовать в булевых операциях:

var poly1 = new Path.RegularPolygon(new Point(200, 200), 6, 80);
var poly2 = new Path.RegularPolygon(new Point(250, 200), 6, 80);

var result = poly1.unite(poly2);
result.fillColor = 'red';

Доступные операции:

  • unite() — объединение
  • intersect() — пересечение
  • subtract() — вычитание

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

  • Малое количество сегментов делает RegularPolygon лёгким объектом
  • При частом обновлении лучше переиспользовать объект, а не пересоздавать
  • Изменение сегментов быстрее, чем удаление и создание новых путей

Практические применения

Генерация паттернов:

for (var x = 0; x < 500; x += 100) {
    for (var y = 0; y < 500; y += 100) {
        new Path.RegularPolygon(new Point(x, y), 6, 40);
    }
}

Интерфейсы и визуализация:

  • иконки
  • кнопки
  • диаграммы

Игровая графика:

  • тайловые карты (например, гексагональные сетки)
  • декоративные элементы

Особенности и ограничения

  • Всегда строится по описанной окружности
  • Нет встроенной поддержки скругления углов
  • Нельзя напрямую задать внутренний радиус (как у звезды)
  • Все стороны строго равны — любое изменение сегмента нарушает регулярность

Связь с другими примитивами

В Paper.js RegularPolygon тесно связан с:

  • Path.Circle — окружность как база построения
  • Path.Star — расширенный вариант с внутренним радиусом
  • Path.Rectangle — частный случай (4 стороны)

Расширенные техники

Генерация радиальных узоров

var center = new Point(300, 300);

for (var i = 0; i < 12; i++) {
    var poly = new Path.RegularPolygon(center, 3, 100);
    poly.rotate(i * 30);
}

Пульсация фигуры

function onFrame(event) {
    var scale = 1 + Math.sin(event.time * 3) * 0.02;
    polygon.scale(scale);
}

Реакция на мышь

function onMouseMove(event) {
    polygon.position = event.point;
}

Работа с центром и позиционированием

Важно различать:

  • center при создании
  • position после создания

После инициализации центр управляется через position:

polygon.position.x += 10;

Контроль ориентации вершин

По умолчанию первая вершина направлена вверх (по оси Y). Для изменения:

polygon.rotate(90);

или точнее:

polygon.rotate(180 / polygon.segments.length);

Это позволяет выровнять фигуру по горизонтали.

Работа с группами

var group = new Group();

for (var i = 0; i < 5; i++) {
    var poly = new Path.RegularPolygon(new Point(100 + i * 100, 200), 5, 40);
    group.addChild(poly);
}

group.rotate(15);

Группировка упрощает управление множеством фигур.

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

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

Оглавление