Прямые линии

В библиотеке Snap.svg прямые линии создаются с использованием метода line() объекта Snap. Этот метод требует указания координат начала и конца линии:

var s = Snap(800, 600); // создание рабочей области SVG
var line = s.line(50, 50, 200, 200);

Здесь (50, 50) — координаты начала линии, (200, 200) — координаты конца. Координаты задаются в пикселях относительно верхнего левого угла SVG-контейнера.

Основные атрибуты линии

Для изменения визуальных характеристик линии используются атрибуты, передаваемые через метод attr():

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

Изменение координат линии

Прямую линию можно динамически перемещать, изменяя её координаты с помощью attr():

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

Здесь x1, y1 — новые координаты начала линии, x2, y2 — конца линии. Такой способ позволяет анимировать линию или изменять её положение в процессе работы приложения.

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

Snap.svg поддерживает анимацию атрибутов линии через метод animate():

line.animate({
    x2: 500,
    y2: 100,
    strokeWidth: 8
}, 2000, mina.easeinout);
  • Первый объект задает конечные значения атрибутов.
  • Второй параметр — длительность анимации в миллисекундах.
  • Третий параметр — функция интерполяции (из библиотеки mina), например mina.easein, mina.linear, mina.elastic.

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

Группировка и трансформация линий

Для сложных графических конструкций линии удобно объединять в группы:

var group = s.group(line);
group.transform("t50,50 r45"); // смещение на 50,50 и поворот на 45°

Метод transform() принимает строки трансформаций:

  • tX,Y — перемещение.
  • rAngle[,cx,cy] — вращение вокруг точки (cx,cy).
  • sSX,SY[,cx,cy] — масштабирование.

Группировка облегчает работу с несколькими линиями одновременно, применяя к ним общие трансформации.

Обработка событий на линии

Прямые линии можно использовать интерактивно, подключая события:

line.click(function() {
    this.attr({ stroke: "#0000ff" });
});

line.hover(
    function() { this.attr({ strokeWidth: 6 }); },
    function() { this.attr({ strokeWidth: 4 }); }
);
  • Метод click() срабатывает при клике на линию.
  • Метод hover() принимает две функции: при наведении и при уходе курсора.

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

Соединение линий с кривыми и другими элементами

Прямые линии могут использоваться как части сложных графических объектов:

var circle = s.circle(200, 200, 50).attr({ fill: "#ccc" });
line.attr({ x2: circle.getBBox().cx, y2: circle.getBBox().cy });

Методы getBBox() и getPointAtLength() позволяют привязать линию к другим элементам SVG, обеспечивая точное соединение.

Резюме по работе с прямыми линиями

Ключевые возможности Snap.svg при работе с прямыми линиями:

  • Создание линии: s.line(x1, y1, x2, y2).
  • Настройка внешнего вида: stroke, strokeWidth, strokeLinecap, strokeDasharray.
  • Динамическое изменение координат через attr().
  • Анимация линии через animate().
  • Группировка и трансформация линий через group() и transform().
  • Подключение интерактивных событий: click(), hover().
  • Связь с другими элементами SVG для построения сложных схем.

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

Оглавление