Скругленные углы

Snap.svg предоставляет мощные возможности для работы с векторной графикой в браузере, включая управление формами с закругленными углами. Основные элементы, которые поддерживают скругление углов, — это прямоугольники (rect) и полигоны (path). Snap.svg реализует это через атрибуты rx и ry для прямоугольников и через построение кривых Безье для сложных форм.

Атрибуты rx и ry для прямоугольников

Для прямоугольников rect Snap.svg использует стандартные SVG-атрибуты rx и ry:

var s = Snap(400, 400);
var rect = s.rect(50, 50, 200, 100);
rect.attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 4,
    rx: 20,
    ry: 20
});
  • rx — радиус скругления по горизонтали.
  • ry — радиус скругления по вертикали.

Если указать только rx, значение ry автоматически примет то же значение, и наоборот. Это упрощает создание одинаково закругленных углов.

Динамическое изменение радиуса скругления

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

rect.animate({ rx: 50, ry: 50 }, 1000, mina.easeinout);
  • Функция animate плавно изменяет атрибуты rx и ry за указанное время (в миллисекундах).
  • mina.easeinout — стандартная кривая анимации Snap.svg, создающая плавное ускорение и замедление.

Скругление углов сложных форм с помощью path

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

var path = "M100,100 L300,100 Q320,100 320,120 L320,200 Q320,220 300,220 L100,220 Q80,220 80,200 L80,120 Q80,100 100,100 Z";
var shape = s.path(path);
shape.attr({
    fill: "#e74c3c",
    stroke: "#c0392b",
    strokeWidth: 3
});
  • Q — квадратичная кривая Безье, используемая для скругления углов.
  • Каждая вершина, которую требуется скруглить, заменяется на сегмент с кривой Q, где первый параметр задаёт контрольную точку, а второй — конечную точку дуги.

Комбинирование скругления с трансформациями

Snap.svg позволяет объединять скругление с трансформациями, такими как вращение, масштабирование и сдвиг:

rect.transform("r45,150,100 s1.5");
  • r45,150,100 — поворот на 45° вокруг точки (150, 100).
  • s1.5 — масштабирование в 1.5 раза.

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

Анимация скругленных углов в сложных формах

Можно создавать динамические эффекты скругления через функцию Snap.animate:

Snap.animate(0, 50, function(val) {
    rect.attr({ rx: val, ry: val });
}, 2000, mina.elastic);
  • Плавное изменение радиуса от 0 до 50 за 2 секунды.
  • mina.elastic добавляет эффект пружины, создавая визуально интересное скругление.

Для многоугольников необходимо обновлять путь (path) на каждом кадре анимации, изменяя контрольные точки кривых Безье.

Практические советы

  1. Соблюдать пропорции: слишком большой rx или ry может визуально «съесть» форму.
  2. Использовать единые значения для простых прямоугольников: одинаковые rx и ry создают гармоничный вид.
  3. Проверять совместимость с transform: при масштабировании и вращении скругленные углы остаются корректными только при правильном порядке трансформаций.
  4. Оптимизация сложных path: использовать минимальное количество кривых для плавного скругления, иначе производительность падает.

Snap.svg делает работу со скругленными углами простой и гибкой, позволяя комбинировать стандартные прямоугольники и кастомные пути с анимацией и трансформациями. Правильное использование атрибутов rx, ry и кривых Безье открывает возможности для создания динамических и визуально привлекательных интерфейсов.

Оглавление