Curve и её свойства

В Paper.js объект Curve представляет отдельный сегмент кривой Безье, который соединяет два узла (handle points) в Path. Он является фундаментальной единицей построения сложных кривых и обеспечивает контроль над формой линии на уровне отдельных сегментов.

Каждая кривая формируется двумя сегментами: начальным и конечным. Curve хранит ссылки на точку начала (point1), точку конца (point2), а также на контрольные точки хэндлов (handle1 и handle2). Эти контрольные точки определяют направление и кривизну линии Безье.

var path = new Path();
path.add(new Point(50, 50));
path.add(new Point(150, 150));
var curve = path.curves[0];

console.log(curve.point1); // { x: 50, y: 50 }
console.log(curve.point2); // { x: 150, y: 150 }
console.log(curve.handle1); // Vector хэндла начала кривой
console.log(curve.handle2); // Vector хэндла конца кривой

Свойства Curve

  • point1 и point2 – координаты начала и конца кривой. Это объекты типа Point.
  • handle1 и handle2 – векторы, определяющие направление и длину хэндлов кривой.
  • segment1 и segment2 – ссылки на сегменты, соединяющие кривую. Segment содержит point и хэндлы, позволяя изменять кривую через сегменты.
  • path – ссылка на Path, которому принадлежит данная кривая.
  • length – длина кривой, вычисляемая по кривой Безье. Полезна для анимаций и равномерного распределения объектов вдоль кривой.
  • bounds – прямоугольник, ограничивающий кривую. Позволяет определять область взаимодействия.
  • intersections(curve) – метод нахождения точек пересечения с другой кривой.

Методы работы с Curve

getPoint(t)

Возвращает координату точки на кривой для параметра t в диапазоне [0, 1].

var point = curve.getPoint(0.5); // середина кривой

getTangent(t)

Возвращает вектор касательной к кривой в точке t.

var tangent = curve.getTangent(0.25);

getNormal(t)

Выдает нормаль к кривой в точке t. Вектор нормали перпендикулярен касательной.

var normal = curve.getNormal(0.75);

getLocationAt(offset)

Позволяет получить точку на кривой на определенном расстоянии offset от начала кривой.

var location = curve.getLocationAt(50); // точка на 50 пикселей от начала кривой

getOffsetOf(point)

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

var offset = curve.getOffsetOf(new Point(100, 100));

divideAt(offset)

Разделяет кривую в точке, расположенной на расстоянии offset от начала кривой, создавая новый сегмент и кривые.

curve.divideAt(75);

Геометрические особенности

  • Curve построена по принципу кубической кривой Безье, где форма определяется хэндлами сегментов.
  • Прямолинейная кривая имеет хэндлы равные нулю (handle1 = handle2 = {x:0, y:0}).
  • Изменение хэндлов позволяет плавно управлять кривизной и создавать сложные формы без добавления новых сегментов.

Применение в Path

Curve тесно связана с Path. Path хранит массив сегментов (segments) и автоматически создает кривые между соседними сегментами. Каждая кривая предоставляет более точный контроль над формой, чем манипуляции с сегментами напрямую.

var path = new Path();
path.add(new Point(20, 20));
path.add(new Point(80, 50));
path.add(new Point(120, 20));

path.curves.forEach(curve => {
    console.log(curve.length);
    console.log(curve.bounds);
});

Использование для анимаций и интерактивных эффектов

Curve позволяет анимировать объекты вдоль пути с использованием методов getPoint(t) и getTangent(t) для получения положения и направления. Например, для движения объекта вдоль кривой:

var t = 0;
function onFrame(event) {
    var point = curve.getPoint(t);
    circle.position = point;
    t += 0.01;
    if(t > 1) t = 0;
}

Взаимодействие кривых

Методы intersects(curve) и getIntersections(curve) позволяют вычислять пересечения между кривыми, что полезно для построения сложных форм, коллизий и разбиения фигур на сегменты.

var intersections = curve.getIntersections(anotherCurve);
intersections.forEach(i => {
    console.log(i.point);
});

Итоговая структура Curve

Curve в Paper.js является мощным инструментом для работы с кривыми Безье на уровне сегментов. Основные элементы, которые управляют её поведением:

  • Точки начала и конца: point1, point2
  • Хэндлы: handle1, handle2
  • Связанные сегменты: segment1, segment2
  • Методы получения позиции, касательной и нормали: getPoint(), getTangent(), getNormal()
  • Методы взаимодействия и анимации: divideAt(), getLocationAt(), getOffsetOf()

Использование Curve обеспечивает точное моделирование сложных линий, контроль над кривизной и упрощает анимацию и геометрические вычисления в Paper.js.

Оглавление