Пути и кривые Безье

В SVG.js для создания сложных графических фигур используется объект Path, который представляет произвольный путь. Путь состоит из последовательности команд, описывающих движение пера по координатной плоскости. Каждая команда имеет буквенный идентификатор и набор числовых параметров.

Создание простого пути осуществляется через метод draw.path(). Пример:

const draw = SVG().addTo('body').size(500, 500);

const path = draw.path('M50 50 L150 50 L150 150 L50 150 Z')
                 .fill('none')
                 .stroke({ color: '#f06', width: 3 });

Объяснение команд пути:

  • M x y – перемещение пера в точку (x, y) без рисования линии.
  • L x y – линейная сегментная линия до точки (x, y).
  • H x и V y – горизонтальное или вертикальное перемещение соответственно.
  • C x1 y1, x2 y2, x y – кубическая кривая Безье.
  • S x2 y2, x y – сглаженная кубическая кривая Безье.
  • Q x1 y1, x y – квадратичная кривая Безье.
  • T x y – сглаженная квадратичная кривая Безье.
  • Z – закрытие пути (соединение последней точки с первой).

Каждая команда может использоваться как в абсолютной (M, L, C) форме, так и в относительной (m, l, c) форме, где координаты считаются относительно текущей позиции пера.

Кубические кривые Безье

Кубическая кривая Безье определяется командой C x1 y1, x2 y2, x y.

  • (x1, y1) и (x2, y2) – контрольные точки, определяющие форму кривой.
  • (x, y) – конечная точка сегмента кривой.

Пример построения S-образной кривой:

const curve = draw.path('M50 250 C150 100, 350 400, 450 250')
                  .fill('none')
                  .stroke({ color: '#00f', width: 4 });

Для упрощения касательных при последовательных кривых используется команда S. Она автоматически рассчитывает первую контрольную точку зеркально относительно предыдущей кривой.

const smoothCurve = draw.path('M50 250 C150 100, 350 400, 450 250 S550 100, 650 250')
                        .fill('none')
                        .stroke({ color: '#0a0', width: 3 });

Квадратичные кривые Безье

Квадратичная кривая задаётся командой Q x1 y1, x y:

  • (x1, y1) – единственная контрольная точка.
  • (x, y) – конечная точка кривой.

Пример:

const quadCurve = draw.path('M50 350 Q250 150, 450 350')
                      .fill('none')
                      .stroke({ color: '#f80', width: 3 });

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

Применение методов SVG.js к путям

plot()

Метод plot() позволяет динамически изменять путь после его создания:

path.plot('M100 100 L300 100 L300 300 L100 300 Z');

move(), size()

Путь можно перемещать и масштабировать:

path.move(50, 50);
path.size(200, 200);

bbox()

Возвращает ограничивающий прямоугольник пути:

const box = path.bbox();
console.log(box.x, box.y, box.width, box.height);

length() и pointAt()

Для кривых важно вычислять длину и точки на пути:

const length = path.length();
const point = path.pointAt(length / 2); // точка посередине пути

Практические приёмы построения сложных форм

  1. Комбинирование линий и кривых
draw.path('M50 50 L150 50 C200 50, 200 150, 150 150 L50 150 Z')
    .fill('lightblue')
    .stroke({ color: 'blue', width: 2 });
  1. Создание волнообразных кривых
draw.path('M0 200 C50 100, 150 300, 200 200 S350 100, 400 200')
    .fill('none')
    .stroke({ color: '#f00', width: 2 });
  1. Анимация движения по пути
const circle = draw.circle(20).fill('#0f0');
circle.animate(3000).during((pos) => {
  const point = path.pointAt(pos * path.length());
  circle.center(point.x, point.y);
});

Рекомендации по точкам контроля

  • Чем ближе контрольная точка к началу сегмента, тем круче изгиб в начале кривой.
  • Для плавного соединения нескольких кривых важно использовать зеркальное расположение контрольных точек при S или T.
  • Квадратичные кривые проще для симметричных форм, кубические — для сложных, многозвенных изгибов.

Итоговая структура пути

Путь в SVG.js можно рассматривать как последовательность сегментов, каждый сегмент имеет тип (линия, квадратичная или кубическая кривая) и набор координат. Комбинируя эти сегменты, создаются любые сложные формы, от простых многоугольников до плавных волнистых кривых и анимированных траекторий движения объектов.

Оглавление