Многоугольники

В библиотеке Two.js многоугольники создаются с помощью класса Two.Polygon. Этот класс является наследником базового примитива Two.Path и обладает всеми его методами и свойствами, позволяя управлять формой, положением и стилем объектов на сцене.

Инициализация многоугольника

Многоугольник создаётся через передачу массива вершин, каждая из которых представлена объектом { x, y }:

const vertices = [
  { x: 0, y: 0 },
  { x: 100, y: 0 },
  { x: 50, y: 86 }
];

const polygon = two.makePolygon(vertices);

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

  • two.makePolygon() автоматически добавляет объект в сцену.
  • Вершины должны формировать замкнутый контур. Two.js самостоятельно соединяет последнюю вершину с первой.
  • Порядок вершин определяет направление обхода контура (важно для заливки и рендеринга линий).

Настройка внешнего вида

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

polygon.fill = '#3498db';       // цвет заливки
polygon.stroke = '#2c3e50';     // цвет контура
polygon.linewidth = 4;          // ширина линии контура
polygon.opacity = 0.8;          // прозрачность
  • fill — цвет внутренней области многоугольника. Может быть строкой CSS ('#ff0000', 'rgba(0,255,0,0.5)') или градиентом Two.Gradient.
  • stroke — цвет линии контура.
  • linewidth — толщина линии контура.
  • opacity — прозрачность объекта, от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

Динамическое изменение формы

Вершины многоугольника можно изменять после создания:

polygon.vertices[0].x = 50;
polygon.vertices[0].y = 50;

two.update();
  • Любое изменение координат вершин требует вызова two.update(), чтобы отразить изменения на холсте.
  • Можно добавлять новые вершины через метод массива vertices.push({ x, y }) или удалять существующие через vertices.splice(index, 1).

Анимация многоугольников

Two.js поддерживает плавную анимацию с помощью встроенного метода two.bind('upd ate', callback). Пример вращения многоугольника:

two.bind('update', function(frameCount) {
  polygon.rotation += 0.01;
}).play();
  • rotation — вращение объекта вокруг его центра (точка polygon.translation задает центр вращения).
  • Для анимации можно менять любую свойство: координаты вершин, цвет заливки, прозрачность, размеры.

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

Многоугольники поддерживают стандартные трансформации:

polygon.translation.se t(150, 100);  // смещение
polygon.scale = 1.5;                // масштабирование
polygon.rotation = Math.PI / 4;     // поворот
  • translation — позиция центра многоугольника.
  • scale — масштаб по умолчанию равен 1. Можно задавать отдельно по осям: polygon.scaleX, polygon.scaleY.
  • rotation — угол в радианах.

Работа с сложными формами

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

function createRegularPolygon(sides, radius) {
  const vertices = [];
  const angleStep = (Math.PI * 2) / sides;
  for (let i = 0; i < sides; i++) {
    vertices.push({
      x: radius * Math.cos(angleStep * i),
      y: radius * Math.sin(angleStep * i)
    });
  }
  return two.makePolygon(vertices);
}

const hexagon = createRegularPolygon(6, 50);
hexagon.fill = '#e74c3c';
hexagon.stroke = '#c0392b';
  • sides — количество вершин (например, 3 для треугольника, 6 для шестиугольника).
  • radius — расстояние от центра до вершины.
  • Метод позволяет создавать правильные регулярные многоугольники с равными сторонами и равными углами.

Обработка событий

Two.js не имеет встроенной системы событий для вершин, но можно отслеживать взаимодействие с помощью библиотек верхнего уровня или интеграции с HTML Canvas:

canvas.addEventListener('mousemove', (e) => {
  const mouseX = e.offsetX;
  const mouseY = e.offsetY;
  // Проверка попадания мыши в bounding box
  if (
    mouseX > polygon.left &&
    mouseX < polygon.right &&
    mouseY > polygon.top &&
    mouseY < polygon.bottom
  ) {
    polygon.fill = '#f1c40f';
  } else {
    polygon.fill = '#3498db';
  }
});
  • left, right, top, bottom — геттеры для границ объекта.
  • Позволяет реализовать базовую интерактивность без сложных алгоритмов пересечения с контуром.

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

Многоугольники можно комбинировать с кругами, линиями и кривыми:

const circle = two.makeCircle(200, 200, 30);
const line = two.makeLine(100, 100, 200, 200);

polygon.fill = 'rgba(52, 152, 219, 0.5)';
circle.fill = '#2ecc71';
line.stroke = '#e67e22';
  • Все объекты остаются независимыми, но можно группировать их с помощью Two.Group для совместных трансформаций.

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

Оглавление