Ломаные линии (polyline)

В библиотеке Snap.svg ломаные линии создаются с помощью элемента <polyline>. Этот элемент позволяет объединять несколько точек, формируя последовательность сегментов, соединённых прямыми линиями. Основной метод для создания ломаной линии — paper.polyline(points), где points — это массив координат или строка с координатами точек.

Пример создания базовой ломаной линии:

var s = Snap(800, 600); // Создаём рабочее поле
var polyline = s.polyline([50, 50, 150, 100, 250, 50, 350, 150]);
polyline.attr({
    fill: "none",
    stroke: "#000",
    strokeWidth: 2
});

Здесь fill: "none" отключает заливку, так как ломаные линии обычно используются без неё, а stroke и strokeWidth задают цвет и толщину линии.

Формат точек и массив координат

Для <polyline> можно использовать два подхода к описанию точек:

  1. Массив чисел — последовательность [x1, y1, x2, y2, ...].
  2. Строка с координатами — "x1,y1 x2,y2 x3,y3 ...".

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

var polyline2 = s.polyline("400,50 500,100 600,50 700,150");
polyline2.attr({
    stroke: "#f00",
    strokeWidth: 3,
    fill: "none"
});

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

Динамическое добавление и изменение точек

Snap.svg позволяет изменять координаты точек после создания линии через метод attr({ points: [...] }). Например, можно анимировать или добавлять новые вершины:

polyline.attr({
    points: [50, 50, 150, 100, 250, 50, 350, 150, 450, 100]
});

Для динамического добавления одной точки требуется сначала получить текущие координаты:

var currentPoints = polyline.attr("points"); // Возвращает массив координат
currentPoints.push(500, 50);
polyline.attr({ points: currentPoints });

Работа с атрибутами линии

Ключевые атрибуты <polyline>:

  • stroke — цвет линии.
  • strokeWidth — толщина линии.
  • fill — заливка (обычно “none” для полилиний).
  • strokeDasharray — создание пунктирной линии, например "5,5".
  • strokeLinecap и strokeLinejoin — стиль концов и соединений сегментов.

Пример использования пунктирной линии:

polyline.attr({
    stroke: "#00f",
    strokeWidth: 2,
    strokeDasharray: "10,5",
    fill: "none"
});

Анимация полилиний

Snap.svg поддерживает анимацию атрибутов, что позволяет плавно изменять форму ломаной линии. Например, анимация добавления новой точки:

var newPoints = [50, 50, 150, 100, 250, 50, 350, 150, 450, 200];
polyline.animate({ points: newPoints }, 1000, mina.easeinout);

Можно комбинировать с изменением stroke или strokeWidth для создания визуально динамичных эффектов.

Применение трансформаций

Полилинии в Snap.svg можно трансформировать с помощью метода transform() или анимации animate():

polyline.transform("t100,50 r45"); // перенос на 100,50 и поворот на 45 градусов

Используются стандартные SVG-трансформации:

  • t — translate (смещение)
  • r — rotate (поворот)
  • s — scale (масштаб)
  • m — matrix (матрица трансформации)

Пример плавного поворота:

polyline.animate({ transform: "r360,200,100" }, 2000, mina.linear);

Стилизация соединений и концов

Для ломаных линий важны визуальные свойства соединений и концов:

  • strokeLinecap — "butt", "round", "square".
  • strokeLinejoin — "miter", "round", "bevel".
polyline.attr({
    strokeLinejoin: "round",
    strokeLinecap: "round"
});

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

События для полилиний

Полилинии поддерживают стандартные события Snap.svg:

  • click — обработка кликов по линии.
  • mouseover и mouseout — реакции на наведение курсора.
  • dblclick, mousedown, mouseup — другие события мыши.

Пример изменения цвета при наведении:

polyline.hover(
    function() { this.attr({ stroke: "#f80" }); },
    function() { this.attr({ stroke: "#000" }); }
);

Заключение

Использование <polyline> в Snap.svg открывает широкие возможности для визуализации сложных траекторий, графиков и декоративных элементов. Комбинация атрибутов, трансформаций и анимаций позволяет создавать динамичные и интерактивные линии с минимальным количеством кода. Внимание к деталям, таким как strokeLinejoin и strokeLinecap, обеспечивает профессиональный внешний вид графики.

Оглавление