Arc

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

Основные способы создания дуги

  1. Через начальную, контрольную и конечную точку
var start = new Point(50, 150);
var through = new Point(150, 50);
var end = new Point(250, 150);

var arc = new Path.Arc(start, through, end);
arc.strokeColor = 'blue';
  • start — точка начала дуги.
  • through — контрольная точка, через которую дуга проходит.
  • end — конечная точка дуги.

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

  1. Через прямоугольник и углы (Arc по угловой мере)
var rect = new Rectangle(new Point(50, 50), new Size(200, 100));
var arc = new Path.Arc({
    from: rect.topLeft,
    through: rect.topRight,
    to: rect.bottomRight,
    strokeColor: 'red'
});

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

Настройка параметров дуги

  • strokeColor — цвет линии дуги.
  • strokeWidth — ширина линии дуги.
  • dashArray — массив значений для создания пунктирной линии на дуге.

Пример:

arc.strokeColor = 'green';
arc.strokeWidth = 3;
arc.dashArray = [10, 4];

Работа с кривизной и углами

Paper.js использует кривые Безье для аппроксимации дуг. Важно понимать, что дуга задаётся не прямым радиусом, а через контрольные точки, которые определяют форму кривой. Для точной работы можно использовать методы:

  • Path.Arc.fromPoints(start, through, end) — статический метод создания дуги.
  • arc.segments — массив сегментов, который позволяет изменять начальную, контрольную и конечную точки после создания.

Пример модификации дуги:

arc.segments[1].point = new Point(150, 100); // Изменение контрольной точки

Соединение дуг с другими фигурами

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

var path = new Path();
path.add(new Point(50, 150));
path.arcTo(new Point(150, 50), new Point(250, 150));
path.lineTo(new Point(250, 250));
path.strokeColor = 'purple';

Метод arcTo() создаёт дугу между текущей точкой и конечной, используя промежуточную контрольную точку.

Полезные приёмы при работе с дугами

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

Пример интерактивной дуги:

arc.onMouseD rag = function(event) {
    arc.segments[1].point += event.delta;
};

Вычисление длины дуги и точек на кривой

  • arc.length — возвращает длину дуги.
  • arc.getPointAt(offset) — возвращает точку на дуге по смещению от начала.
  • arc.getTangentAt(offset) — возвращает касательную к дуге в указанной точке.

Пример:

var midPoint = arc.getPointAt(arc.length / 2);
var tangent = arc.getTangentAt(arc.length / 2);

Интеграция дуг в сложные пути

Дуги могут быть объединены с линиями, кривыми и другими дугами для создания многоугольников и декоративных элементов. Методы path.add(), path.arcTo() и работа с сегментами обеспечивают максимальную гибкость при проектировании сложных графических объектов.

Хотя Paper.js не предоставляет прямой объект “CircleArc”, комбинация Path.Arc и кривых Безье позволяет реализовать любые дуги и сегменты окружности с высокой точностью, обеспечивая при этом динамическую настройку кривизны и интерактивность.

Оглавление