Точки на кривых и путях

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

Создание кривых и путей

Для создания пути используется метод draw.path() или конструктор SVG.Path():

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

const path = draw.path('M50 150 C150 50, 350 250, 450 150');
  • M x y — перемещение пера в точку (x, y).
  • C x1 y1, x2 y2, x y — кубическая кривая Безье с двумя управляющими точками (x1, y1) и (x2, y2) и конечной точкой (x, y).

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

Получение точек на пути

Метод path.array() возвращает массив сегментов пути. Каждый сегмент представляет собой массив, где первый элемент — команда (M, L, C, Q, A, Z), а последующие — координаты:

const segments = path.array();
console.log(segments);

Пример вывода для кубической кривой Безье:

[
  ["M", 50, 150],
  ["C", 150, 50, 350, 250, 450, 150]
]

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

Работа с кривыми Безье

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

const cubic = path.array()[1]; // ["C", 150, 50, 350, 250, 450, 150]
const [x1, y1, x2, y2, x, y] = cubic.slice(1);

console.log(`Первая контрольная точка: (${x1}, ${y1})`);
console.log(`Вторая контрольная точка: (${x2}, ${y2})`);
console.log(`Конечная точка: (${x}, ${y})`);

Изменение координат позволяет интерактивно деформировать кривую:

cubic[5] = 200; // меняем конечную точку по X
path.plot(segments);

Метод plot() обновляет путь на основе нового массива сегментов, сохраняя связь с исходным объектом SVG.

Вычисление точек на пути

SVG.js совместно с методом getPointAtLength() позволяет вычислять координаты точки на пути в зависимости от длины:

const totalLength = path.length();
const point = path.pointAt(totalLength * 0.5); // точка на середине пути
console.log(point.x, point.y);

Метод length() возвращает общую длину пути, а pointAt(length) — координаты точки на этой длине. Это особенно полезно для анимации объектов вдоль кривой, например, для создания эффекта движения объекта по траектории.

Изменение контрольных точек динамически

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

let segments = path.array();
segments[1][1] += 20; // сдвигаем первую контрольную точку по X
segments[1][2] -= 10; // сдвигаем первую контрольную точку по Y
path.plot(segments);

Изменение точек может быть анимировано с использованием метода animate():

path.animate(1000).plot('M50 150 C170 70, 330 230, 450 150');

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

Разделение пути на сегменты

Для сложной работы с кривыми полезно разделять путь на отдельные сегменты. Метод path.array() позволяет это делать, а дальнейшая обработка сегментов дает возможность:

  • Получать координаты каждой точки кривой.
  • Изменять отдельные сегменты.
  • Вычислять промежуточные точки для анимации.

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

Вспомогательные методы

  • bbox() — возвращает ограничивающий прямоугольник для пути, что важно для позиционирования и коллизий.
  • length() — общая длина пути.
  • pointAt(length) — координаты точки на пути.
  • array() и plot() — для чтения и изменения структуры пути.

Эти инструменты позволяют полностью контролировать точки кривой и создавать интерактивные и анимированные графические объекты.

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

Оглавление