Линии

Snap.svg предоставляет мощный и гибкий способ работы с векторной графикой через SVG. Линии являются базовым элементом SVG и служат фундаментом для построения более сложных форм. В Snap.svg линии создаются с помощью метода line, который относится к объекту Snap.

var s = Snap(800, 600); // создаём холст SVG размером 800x600
var line = s.line(50, 50, 200, 200); // создаём линию от точки (50,50) до (200,200)

Здесь (x1, y1) — координаты начальной точки линии, (x2, y2) — координаты конечной точки. Возвращаемое значение — объект типа Element, который можно дальше стилизовать и анимировать.

Настройка стиля линии

Линия в SVG имеет несколько ключевых атрибутов для визуального оформления:

  • stroke — цвет линии.
  • stroke-width — толщина линии.
  • stroke-linecap — стиль окончания линии (butt, round, square).
  • stroke-dasharray — создание пунктирной линии.

Пример:

line.attr({
    stroke: "#ff0000",
    strokeWidth: 4,
    strokeLinecap: "round",
    strokeDasharray: "5,5"
});
  • strokeLinecap управляет формой концов линии. Опция round создаёт закруглённые концы, square — квадратные, butt — стандартные.
  • strokeDasharray задаёт шаблон штрихов и промежутков. В примере 5,5 означает 5 пикселей линии, затем 5 пикселей пробела.

Прямое использование атрибутов SVG

Snap.svg позволяет работать с атрибутами SVG напрямую через attr. Например, изменение координат линии:

line.attr({
    x1: 100,
    y1: 100,
    x2: 300,
    y2: 100
});

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

Соединение нескольких линий в группы

Для построения сложных фигур линии можно объединять в группы с помощью g():

var group = s.group(
    s.line(50, 50, 150, 50),
    s.line(150, 50, 150, 150),
    s.line(150, 150, 50, 150),
    s.line(50, 150, 50, 50)
);
group.attr({stroke: "#0000ff", strokeWidth: 2});

Группы упрощают управление несколькими элементами одновременно: изменение цвета, толщины линии или перемещение всей фигуры целиком.

Анимация линии

Snap.svg поддерживает плавные анимации атрибутов через метод animate. Пример перемещения конца линии:

line.animate({x2: 400, y2: 300}, 1000, mina.easeinout);

Здесь mina.easeinout — функция сглаживания движения. Анимация выполняется за 1000 миллисекунд, плавно изменяя координаты конца линии.

Можно анимировать также цвет линии, толщину и пунктирный рисунок:

line.animate({
    stroke: "#00ff00",
    strokeWidth: 6,
    strokeDasharray: "10,5"
}, 1500, mina.linear);

Создание динамических линий с событиями

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

line.hover(
    function() { this.attr({stroke: "#ff00ff"}); },
    function() { this.attr({stroke: "#ff0000"}); }
);

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

Использование кривых и соединений через линии

Линии часто комбинируются с кривыми для создания сложных траекторий. Snap.svg поддерживает кривые Безье (path), а линии можно использовать как ориентир или направляющие. Например:

var path = s.path("M50 50 L150 150 L250 50");
path.attr({stroke: "#333", fill: "none", strokeWidth: 3});

Здесь L задаёт линейные сегменты, что позволяет легко комбинировать прямые линии и кривые в единой структуре.

Примеры практического применения

  1. Графики и диаграммы — линии соединяют точки данных и создают тренды.
  2. Схемы и диаграммы связей — линии визуализируют связи между объектами.
  3. Интерактивные интерфейсы — линии с событиями реагируют на действия пользователя.
  4. Анимация движения объектов — линии задают траекторию движения или визуальный эффект.

Ключевые моменты работы с линиями

  • Создание: Snap.line(x1, y1, x2, y2) возвращает элемент линии.
  • Стилизация: через attr({stroke, strokeWidth, strokeLinecap, strokeDasharray}).
  • Анимация: метод animate меняет координаты, цвет, толщину.
  • Группы: group() объединяет несколько линий для совместного управления.
  • События: hover, click и другие события позволяют создавать интерактивные элементы.

Линии в Snap.svg — базовый, но крайне гибкий инструмент, который служит основой для построения сложных графических и интерактивных решений на основе SVG.

Оглавление