Многоугольники (polygon)

Snap.svg предоставляет удобный способ работы с векторной графикой на основе SVG в браузере. Для создания многоугольников используется элемент <polygon>, который определяется списком координат вершин. В Snap.svg это реализуется через метод paper.polygon(), где paper — объект SVG-контейнера, созданный методом Snap().

var s = Snap(500, 500);
var poly = s.polygon("50,150 150,50 250,150 150,250");

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

var poly = s.polygon([50,150, 150,50, 250,150, 150,250]);

Атрибуты многоугольников

Многоугольник в Snap.svg поддерживает стандартные SVG-атрибуты: fill, stroke, stroke-width, а также opacity. Применение атрибутов осуществляется методом attr():

poly.attr({
    fill: "#4CAF50",
    stroke: "#000000",
    strokeWidth: 2,
    opacity: 0.8
});
  • fill — цвет заливки.
  • stroke — цвет контура.
  • strokeWidth — толщина линии.
  • opacity — прозрачность элемента.

Можно динамически изменять атрибуты после создания:

poly.attr({ fill: "#FF5722" });
poly.attr({ strokeWidth: 5 });

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

Snap.svg позволяет изменять форму многоугольника через его атрибут points. Точки можно передавать как строку, так и массив:

poly.attr({
    points: "60,160 160,60 260,160 160,260"
});

Или через массив:

poly.attr({
    points: [60,160, 160,60, 260,160, 160,260]
});

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

Трансформации и анимации

Многоугольники поддерживают все трансформации Snap.svg: translate, rotate, scale и matrix. Пример перемещения и поворота:

poly.transform("t50,50r45");
  • t50,50 — смещение по X и Y на 50 единиц.
  • r45 — поворот на 45 градусов вокруг центра фигуры.

Анимации выполняются методом animate():

poly.animate({ points: "100,200 200,100 300,200 200,300" }, 1000, mina.easeinout);
  • Первый аргумент — новые координаты вершин.
  • Второй — длительность анимации в миллисекундах.
  • Третий — функция интерполяции (mina.easeinout, mina.linear и т.д.).

Взаимодействие с событиями

Многоугольники могут реагировать на пользовательские события. Snap.svg позволяет использовать стандартные события: click, mouseover, mouseout и др.

poly.click(function() {
    this.attr({ fill: "#FFC107" });
});

poly.hover(
    function() { this.attr({ strokeWidth: 4 }); },
    function() { this.attr({ strokeWidth: 2 }); }
);
  • click — обработчик клика по фигуре.
  • hover — два обработчика: наведение и уход курсора.

Создание сложных многоугольников

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

var points = [];
var centerX = 250, centerY = 250, radius = 100, sides = 6;

for (var i = 0; i < sides; i++) {
    var angle = (Math.PI * 2 / sides) * i;
    var x = centerX + radius * Math.cos(angle);
    var y = centerY + radius * Math.sin(angle);
    points.push(x, y);
}

var hexagon = s.polygon(points);
hexagon.attr({ fill: "#2196F3", stroke: "#000", strokeWidth: 3 });

В этом примере создается правильный шестиугольник с центром в (250, 250) и радиусом 100. Такой подход позволяет программно создавать многоугольники с любым количеством сторон.

Группировка многоугольников

Snap.svg поддерживает группы через метод group(). Многоугольники можно объединять в группу и применять трансформации ко всей группе:

var poly1 = s.polygon("50,50 150,50 100,150").attr({ fill: "#F44336" });
var poly2 = s.polygon("200,50 300,50 250,150").attr({ fill: "#4CAF50" });

var g = s.group(poly1, poly2);
g.transform("t50,50r30");

Все элементы внутри группы смещаются и вращаются синхронно.

Итоговые рекомендации по работе с polygon

  • Всегда использовать массив или строку координат для упрощения анимации.
  • Атрибуты fill, stroke и strokeWidth делают фигуру визуально выразительной.
  • Динамическое обновление points — ключ к интерактивности.
  • Для сложных форм использовать циклы и математические функции для расчета координат.
  • Группировка позволяет манипулировать несколькими многоугольниками одновременно.

Использование этих инструментов позволяет создавать интерактивные и анимированные SVG-графики высокого качества в Snap.svg.

Оглавление