Дуги и сектора

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

Метод makeArcSegment

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

const arc = two.makeArcSegment(x, y, radius, startAngle, endAngle, clockwise);

Параметры:

  • x, y — координаты центра окружности.
  • radius — радиус дуги.
  • startAngle, endAngle — начальный и конечный углы в радианах.
  • clockwise — логическое значение (true/false), определяющее направление построения дуги.

Пример:

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

const arc = two.makeArcSegment(
  200, 200,          // центр
  100,               // радиус
  0, Math.PI / 2,    // углы: от 0 до 90 градусов
  false              // против часовой стрелки
);

arc.stroke = '#FF0000';
arc.linewidth = 4;

two.update();

В данном примере создается четверть круга с красной линией толщиной 4 пикселя.

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

Цвет и толщина линии

  • stroke — цвет контура.
  • linewidth — толщина линии.
  • fill — цвет заливки (для замкнутых дуг, например с секторами).
arc.stroke = '#0000FF';
arc.linewidth = 2;
arc.fill = 'rgba(0,0,255,0.2)';

Замкнутые дуги (сектора)

Для создания сектора необходимо замкнуть дугу с центром:

arc.closed = true;

После этого fill будет окрашивать внутреннюю часть сектора.

Анимация дуг и секторов

Two.js поддерживает анимацию свойств объектов через обновление в two.update() внутри цикла requestAnimationFrame.

Пример анимации угла:

let endAngle = 0;

two.bind('upd ate', function(frameCount) {
  endAngle += 0.02;
  arc.vertices = two.makeArcSegment(200, 200, 100, 0, endAngle, false).vertices;
}).play();

В этом примере сектор постепенно увеличивается, создавая эффект «нарастающей дуги».

Работа с несколькими дугами

Можно создавать несколько дуг и секторов с разными свойствами:

const arcs = [];
for (let i = 0; i < 5; i++) {
  const a = two.makeArcSegment(
    200, 200,
    50 + i * 20,
    0,
    Math.PI / (i + 2),
    false
  );
  a.stroke = `hsl(${i*60}, 80%, 50%)`;
  a.linewidth = 3;
  arcs.push(a);
}

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

Преобразования и трансформации дуг

Объекты дуг и секторов поддерживают стандартные трансформации:

  • translate(x, y) — смещение.
  • rotate(angle) — вращение.
  • scale(sx, sy) — масштабирование.

Пример вращающегося сектора:

two.bind('update', function(frameCount) {
  arc.rotation += 0.01;
}).play();

Взаимодействие дуг с другими объектами

Дуги в Two.js являются полноценными объектами сцены и могут комбинироваться с прямыми линиями, кругами и другими фигурами. Использование групп (Two.Group) позволяет объединять дуги и применять к ним общие трансформации:

const group = two.makeGroup(arc, anotherArc);
group.rotation = Math.PI / 4;
group.translation.se t(100, 50);

Секреты точного позиционирования

  • Все углы задаются в радианах, но можно использовать Math.PI / 180 * degrees для перевода из градусов.
  • При создании нескольких дуг с одинаковым центром следует тщательно следить за порядком слоев, чтобы заливка не перекрывала соседние элементы.
  • Для динамического изменения формы дуги лучше обновлять vertices, чем пересоздавать объект заново.

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

Дуги и секторы поддерживают события мыши через стандартные слушатели DOM, но для более сложной интерактивности можно использовать Two.js в связке с библиотеками для отслеживания столкновений или кликов по векторным объектам.

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

Оглавление