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

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

Создание окружности

Для создания окружности используется метод makeCircle(x, y, radius), где x и y — координаты центра, а radius — радиус окружности.

const two = new Two({ width: 800, height: 600 }).appendTo(document.body);

const circle = two.makeCircle(400, 300, 100);
circle.fill = '#1abc9c';
circle.stroke = '#16a085';
circle.linewidth = 5;

two.update();
  • fill — цвет заливки.
  • stroke — цвет контура.
  • linewidth — толщина линии контура.

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

Создание эллипса

Для эллипса используется метод makeEllipse(x, y, width, height), где width и height — размеры по горизонтали и вертикали соответственно.

const ellipse = two.makeEllipse(400, 300, 200, 100);
ellipse.fill = '#e74c3c';
ellipse.stroke = '#c0392b';
ellipse.linewidth = 4;

two.update();

Эллипс можно воспринимать как растянутую окружность. Он поддерживает те же свойства заливки, контура и толщины линии.

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

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

  • Прозрачность: circle.opacity = 0.5;
  • Скругленные линии: circle.cap = 'round';
  • Масштабирование: ellipse.scale = 1.5;
  • Поворот: ellipse.rotation = Math.PI / 4; (угол в радианах)

Все эти свойства можно изменять динамически в анимационных циклах для создания визуально интересных эффектов.

Анимация окружностей и эллипсов

Two.js использует встроенный цикл обновления через метод bind('upd ate', callback). Пример анимации увеличения и уменьшения радиуса окружности:

two.bind('update', function(frameCount) {
  circle.radius = 50 + 50 * Math.sin(frameCount * 0.05);
}).play();

Для эллипса можно анимировать искажение по осям:

two.bind('update', function(frameCount) {
  ellipse.width = 200 + 50 * Math.sin(frameCount * 0.03);
  ellipse.height = 100 + 30 * Math.cos(frameCount * 0.03);
}).play();

Работа с группами и комбинированными формами

Окружности и эллипсы легко объединять в группы (Two.Group), что упрощает совместные трансформации:

const group = two.makeGroup(circle, ellipse);
group.translation.se t(200, 100);
group.rotation = Math.PI / 6;

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

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

Two.js поддерживает базовое взаимодействие через DOM-элементы и сторонние библиотеки для событий мыши. Например, изменение цвета при наведении:

document.querySelector('canvas').addEventListener('mousemove', (e) => {
  const rect = e.target.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;
  const mouseY = e.clientY - rect.top;

  if (Math.hypot(mouseX - circle.translation.x, mouseY - circle.translation.y) < circle.radius) {
    circle.fill = '#f1c40f';
  } else {
    circle.fill = '#1abc9c';
  }
});

Создание сложных форм на основе окружностей и эллипсов

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

  • Солнце с лучами: круг + эллипсы лучей.
  • Планеты с орбитами: эллипс для орбиты + круг для планеты.
  • Инфографика: радиальные диаграммы, круговые прогресс-бары.

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

Поддержка стилей и градиентов

Two.js позволяет применять градиенты к окружностям и эллипсам с помощью LinearGradient и RadialGradient:

const gradient = two.makeRadialGradient(
  0, 0, 0, 0, 0, 100,
  new Two.Stop(0, '#3498db'),
  new Two.Stop(1, '#2980b9')
);

circle.fill = gradient;

Градиенты добавляют глубину и визуальную выразительность, особенно в анимационных сценах.

Итоговые рекомендации по использованию

  • Для простых форм использовать makeCircle и makeEllipse.
  • Для комплексных сцен комбинировать объекты в группы.
  • Анимации и трансформации управлять через bind('update').
  • Применять градиенты и прозрачность для визуального разнообразия.
  • Сохранять относительные позиции объектов через группы, упрощая масштабирование и вращение.

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

Оглавление