Создание собственных фигур

Для создания фигур в Two.js необходимо сначала инициализировать экземпляр библиотеки и подготовить область рендеринга. Обычно это делается с помощью конструктора Two и указания размеров холста:

const elem = document.getElementById('draw-shapes');
const params = { width: 800, height: 600 };
const two = new Two(params).appendTo(elem);

Здесь elem — HTML-элемент контейнера, а params определяет размеры холста. После этого можно приступать к созданию фигур, линий и сложных композиций.

Основные примитивы

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

Линии

const line = two.makeLine(50, 50, 200, 200);
line.stroke = '#FF0000';
line.linewidth = 5;
  • makeLine(x1, y1, x2, y2) — координаты начала и конца линии.
  • stroke задает цвет линии.
  • linewidth определяет толщину.

Прямоугольники

const rect = two.makeRectangle(400, 300, 150, 100);
rect.fill = '#00FF00';
rect.stroke = '#000000';
rect.linewidth = 2;
  • makeRectangle(x, y, width, height) — позиция центра и размеры.
  • fill задает заливку фигуры.
  • stroke и linewidth управляют контуром.

Окружности и эллипсы

const circle = two.makeCircle(600, 150, 75);
circle.fill = 'blue';
circle.opacity = 0.7;

const ellipse = two.makeEllipse(200, 450, 100, 50);
ellipse.fill = 'orange';
ellipse.stroke = 'black';
  • makeCircle(x, y, radius) — создаёт окружность с центром (x, y) и радиусом.
  • makeEllipse(x, y, width, height) — создаёт эллипс с указанными размерами.

Многоугольники и кастомные формы

Two.js позволяет создавать многоугольники через массив вершин:

const vertices = [
  new Two.Anchor(0, 0),
  new Two.Anchor(100, 0),
  new Two.Anchor(50, 80)
];

const polygon = two.makePolygon(vertices);
polygon.fill = 'purple';
polygon.stroke = 'black';
polygon.linewidth = 3;
  • Two.Anchor(x, y) — точка вершины.
  • makePolygon(vertices) автоматически соединяет все точки и замыкает фигуру.

Для произвольных форм можно использовать путь через makePath:

const path = two.makePath(
  300, 300,
  350, 350,
  400, 300,
  375, 250,
  true // замкнутый путь
);
path.fill = 'cyan';
path.stroke = 'navy';
path.linewidth = 2;
  • Последний аргумент true замыкает путь, превращая его в фигуру.

Комбинирование фигур и группировка

Для удобства управления несколькими фигурами применяется Two.Group:

const group = two.makeGroup(rect, circle, ellipse);
group.translation.set(100, 50);
group.rotation = Math.PI / 6;
  • makeGroup объединяет объекты, позволяя управлять ими как единым целым.
  • Свойства translation, rotation, scale применяются ко всей группе.

Настройка свойств и трансформаций

Каждая фигура имеет набор ключевых свойств:

  • Положение: translation.x, translation.y
  • Масштаб: scale, scale.x, scale.y
  • Поворот: rotation (в радианах)
  • Прозрачность: opacity
  • Цвета: fill, stroke
  • Толщина линий: linewidth
circle.translation.set(500, 400);
circle.rotation = Math.PI / 4;
circle.scale = 1.5;
circle.opacity = 0.5;

Анимация фигур

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

two.bind('update', function(frameCount) {
  circle.rotation += 0.02;
  rect.translation.x += 1;
  if(rect.translation.x > 800) rect.translation.x = 0;
}).play();
  • bind('update', callback) вызывается на каждом кадре.
  • Изменения rotation, translation, scale создают плавные анимации.

Пользовательские фигуры с помощью функций

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

function createStar(cx, cy, spikes, outerRadius, innerRadius) {
  const vertices = [];
  let angle = Math.PI / spikes;

  for(let i = 0; i < 2 * spikes; i++) {
    const r = (i % 2 === 0) ? outerRadius : innerRadius;
    const x = cx + Math.cos(i * angle) * r;
    const y = cy + Math.sin(i * angle) * r;
    vertices.push(new Two.Anchor(x, y));
  }

  return two.makePolygon(vertices);
}

const star = createStar(400, 300, 5, 100, 50);
star.fill = 'gold';
star.stroke = 'red';
star.linewidth = 4;
  • Генерация фигур через алгоритмы позволяет создавать звёзды, спирали, волны и произвольные формы.

Взаимодействие с событиями

Two.js поддерживает обработку событий через HTML-контейнер:

elem.addEventListener('click', function(e) {
  circle.fill = circle.fill === 'blue' ? 'green' : 'blue';
});
  • События мыши можно связывать с конкретными фигурами через вычисление попадания по координатам.
  • Для динамических взаимодействий комбинируются update и слушатели событий.

Итоговый цикл работы с фигурами

  1. Создание экземпляра Two.js.
  2. Инициализация примитивов и пользовательских форм.
  3. Настройка свойств и трансформаций.
  4. Группировка фигур при необходимости.
  5. Анимация через bind('update').
  6. Обработка событий для интерактивности.

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

Оглавление