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

В библиотеке Snap.svg квадратичные кривые реализуются через метод path, который поддерживает синтаксис SVG. Квадратичная кривая определяется командой Q (абсолютная) или q (относительная). Формат команды:

Q x1 y1, x y
q dx1 dy1, dx dy

где (x1, y1) — координаты контрольной точки, определяющей изгиб кривой, а (x, y) — конечная точка сегмента.

Основы работы с методом path

Для создания кривой необходимо сначала создать SVG-контейнер с помощью Snap:

var s = Snap(800, 600); // создаём холст размером 800x600

Затем можно определить кривую:

var curve = s.path("M100,300 Q200,100 400,300");
  • M100,300 — перемещение пера к стартовой точке кривой.
  • Q200,100 400,300 — квадратичная кривая с контрольной точкой (200,100) и конечной точкой (400,300).

Для стилизации кривой применяются атрибуты:

curve.attr({
    stroke: "#ff6600",
    strokeWidth: 4,
    fill: "none"
});

stroke задаёт цвет линии, strokeWidth — толщину, fill: "none" отключает заливку, что важно для кривых без замкнутого контура.

Работа с относительными кривыми

Относительные кривые удобно использовать при последовательных сегментах. Команда q задаёт смещение относительно текущей позиции:

var curve = s.path("M100,300 q150,-200 300,0");
  • Контрольная точка смещена на (150,-200) относительно стартовой точки.
  • Конечная точка смещена на (300,0).

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

Динамическое изменение кривой

Snap.svg позволяет изменять координаты кривой в процессе работы:

curve.attr({ d: "M100,300 Q250,50 400,300" });

Можно анимировать кривую с помощью метода animate:

curve.animate({ d: "M100,300 Q250,150 400,300" }, 1000, mina.easeinout);
  • 1000 — длительность анимации в миллисекундах.
  • mina.easeinout — плавное ускорение и замедление движения кривой.

Анимация возможна как изменения контрольной точки, так и конечной точки, что создаёт эффект движения изгиба.

Создание сложных кривых

Для сложных фигур можно комбинировать несколько сегментов:

var complexCurve = s.path("M50,300 Q150,100 250,300 Q350,500 450,300");
complexCurve.attr({
    stroke: "#0066ff",
    strokeWidth: 3,
    fill: "none"
});

Каждая последовательная команда Q добавляет новый сегмент к предыдущему концу. При этом важно правильно рассчитывать координаты контрольных точек, чтобы кривая плавно соединялась.

Визуализация контрольных точек

Для анализа кривых полезно визуализировать контрольные точки:

var start = s.circle(100, 300, 5).attr({ fill: "red" });
var control = s.circle(200, 100, 5).attr({ fill: "green" });
var end = s.circle(400, 300, 5).attr({ fill: "blue" });
  • Красный — стартовая точка.
  • Зелёный — контрольная.
  • Синий — конечная.

Это помогает понимать, как изменение координаты контрольной точки влияет на изгиб кривой.

Функциональное построение кривой

Snap.svg поддерживает программное создание кривых через массивы:

var points = [{x:100, y:300}, {x:200, y:100}, {x:400, y:300}];
var d = `M${points[0].x},${points[0].y} Q${points[1].x},${points[1].y} ${points[2].x},${points[2].y}`;
var curve = s.path(d);

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

Закрепление знаний

  • Q / q — команды квадратичных кривых (абсолютные/относительные).
  • Контрольная точка — определяет изгиб.
  • Конечная точка — задаёт конец сегмента.
  • M / m — стартовая позиция пера.
  • Анимация атрибута d — динамическая модификация кривой.
  • Стилизация — stroke, strokeWidth, fill для управления внешним видом.

Правильное понимание квадратичных кривых в Snap.svg позволяет строить плавные линии, сложные фигуры и динамические анимации, управляя формой кривой через контрольные точки и координаты.

Оглавление