getTangentAt и касательные

В Paper.js кривые и контуры являются ключевыми объектами для векторной графики, и часто возникает необходимость определить направление касательной в определённой точке кривой. Для этого используется метод getTangentAt, который принадлежит объекту Path. Этот метод возвращает вектор направления касательной линии в точке на пути, определяемой по длине от начала кривой.

Синтаксис метода

var tangent = path.getTangentAt(offset);
  • path — объект Path, к которому применяется метод.
  • offset — числовое значение, задающее расстояние вдоль пути от его начала. Измеряется в пикселях.
  • Возвращаемое значение — объект Point, представляющий вектор касательной в данной точке.

Если значение offset выходит за границы длины пути, метод возвращает null.

Ключевые особенности

  1. Векторная природа возвращаемого значения Вектор, который возвращает getTangentAt, имеет компоненты x и y, представляющие направления по осям. Он не нормализован по умолчанию. Для получения единичного вектора необходимо использовать метод .normalize():

    var tangent = path.getTangentAt(50).normalize();

  2. Связь с getPointAt Для нахождения точки на кривой, соответствующей тому же смещению, используется метод:

    var point = path.getPointAt(offset);

    Таким образом, getPointAt и getTangentAt работают в паре для построения касательных и направляющих линий.

  3. Поддержка сложных кривых Метод корректно обрабатывает Bezier-кривые и сегменты сложных контуров, автоматически учитывая кривизну. Даже на кривых высокой степени сложность вычисления касательной остаётся прозрачной для разработчика.

Практическое использование

Отрисовка касательной в точке

var path = new Path();
path.strokeColor = 'black';
path.add(new Point(50, 50));
path.add(new Point(150, 150));
path.add(new Point(250, 100));

var offset = 100;
var point = path.getPointAt(offset);
var tangent = path.getTangentAt(offset).normalize().multiply(50); // длина касательной

var line = new Path();
line.strokeColor = 'red';
line.add(point.subtract(tangent));
line.add(point.add(tangent));

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

Использование для анимации

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

var circle = new Path.Circle(new Point(0, 0), 10);
circle.fillColor = 'blue';

var offset = 0;
function onFrame(event) {
    offset += 2;
    if (offset > path.length) offset = 0;

    var point = path.getPointAt(offset);
    var tangent = path.getTangentAt(offset);
    circle.position = point;
    circle.rotation = tangent.angle; // угол поворота по касательной
}

Здесь tangent.angle возвращает угол наклона касательной относительно оси X, что обеспечивает естественное движение объекта вдоль пути.

Примечания и советы

  • getTangentAt возвращает вектор касательной, а не точку на кривой. Для визуализации часто используется комбинация с getPointAt.
  • Если путь замкнутый, метод корректно обрабатывает переход через начало-конец.
  • Для кривых с резкими углами касательная в точке перегиба может изменяться скачкообразно, поэтому для плавных анимаций лучше использовать интерполяцию по длине.
  • Использование .normalize() делает касательную независимой от локальной скорости кривой, что полезно для одинакового масштабирования или анимации объектов вдоль пути.

Метод getTangentAt является фундаментальным инструментом для работы с кривыми в Paper.js. Он позволяет создавать динамические визуальные эффекты, анимации и точное управление ориентацией объектов на пути, что делает его неотъемлемой частью любой работы с векторной графикой.

Оглавление