Замыкание контура

В Snap.svg контур (path) является одним из наиболее гибких и мощных инструментов для построения графики. Контур задаётся строкой команд SVG или создаётся через методы Snap.svg для рисования сложных форм. Замыкание контура позволяет получить замкнутую фигуру, которая может быть залита цветом, иметь обводку и участвовать в сложных анимациях.

Определение контура

Контур создаётся с помощью метода paper.path(). В качестве аргумента передаётся строка с командами SVG:

var s = Snap(800, 600);
var path = s.path("M100,100 L200,100 L200,200");

Здесь:

  • M100,100 – перемещение пера в точку (100,100);
  • L200,100 – линия к точке (200,100);
  • L200,200 – линия к точке (200,200).

На данный момент контур не замкнут. Он представляет собой открытую линию, которая не образует замкнутую фигуру.

Замыкание контура

Чтобы замкнуть контур, необходимо использовать команду Z (или z) в конце строки пути:

var closedPath = s.path("M100,100 L200,100 L200,200 Z");

Команда Z автоматически соединяет последнюю точку с первой, создавая замкнутую форму. В Snap.svg это также можно сделать программно, добавив последнюю линию к начальной точке:

var path = s.path("M100,100 L200,100 L200,200");
var bbox = path.getBBox();
path.attr({ d: path.attr("d") + " L100,100" });

Использование команды Z предпочтительнее, так как позволяет SVG корректно определять фигуру как замкнутую и упрощает дальнейшие операции.

Применение заливки и обводки

Замкнутый контур становится полноценной фигурой, к которой можно применять заливку и обводку:

closedPath.attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 4
});
  • fill – цвет заливки фигуры;
  • stroke – цвет линии обводки;
  • strokeWidth – толщина линии.

Важно понимать, что для незамкнутого контура fill не будет виден, так как область фигуры не определена.

Работа с кривыми и сложными формами

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

  • C – кубическая криволинейная Bézier;
  • Q – квадратичная криволинейная Bézier;
  • A – дуга эллипса;
  • Z – замыкание контура.

Пример замкнутого контура с кривой:

var curvePath = s.path("M100,100 C150,50 250,150 300,100 Z");
curvePath.attr({
    fill: "#e74c3c",
    stroke: "#c0392b",
    strokeWidth: 3
});

Здесь команда C задаёт кубическую кривую, а Z замыкает фигуру.

Получение информации о замкнутом контуре

Snap.svg предоставляет методы для анализа формы:

  • getBBox() – возвращает ограничивающий прямоугольник контура;
  • getTotalLength() – длина пути;
  • getPointAtLength(len) – координаты точки на пути по длине.
var length = closedPath.getTotalLength();
var point = closedPath.getPointAtLength(length / 2);
console.log(point.x, point.y);

Эти методы полезны для анимации и динамического построения контуров.

Программное замыкание и модификация контура

Иногда необходимо замкнуть контур после его создания. Snap.svg позволяет работать с атрибутом d:

var pathData = path.attr("d");
if (!pathData.endsWith("Z")) {
    path.attr({ d: pathData + " Z" });
}

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

Анимация замкнутых контуров

Замкнутый контур можно анимировать, изменяя атрибут d или свойства fill и stroke:

closedPath.animate({ transform: "r45,200,200" }, 1000, mina.easeinout);
closedPath.animate({ fill: "#2ecc71" }, 1500, mina.linear);

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

Практические рекомендации

  • Всегда использовать команду Z для замыкания, если планируется заливка фигуры.
  • Для динамически создаваемых контуров проверять и при необходимости добавлять Z.
  • Для сложных кривых заранее планировать контрольные точки, чтобы замыкание контура выглядело аккуратно.
  • Использовать getBBox() и getTotalLength() для точного позиционирования и анимации.

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

Оглавление