Прямоугольники

В Snap.svg прямоугольник создается с помощью метода rect(), который принимает четыре основных параметра: координаты верхнего левого угла (x, y) и размеры (width, height). Пример создания прямоугольника:

var s = Snap(800, 600);
var rect = s.rect(50, 50, 200, 100);

Здесь создается прямоугольник с верхним левым углом в точке (50, 50), шириной 200 пикселей и высотой 100 пикселей.

Ключевые свойства:

  • x, y – координаты верхнего левого угла.
  • width, height – ширина и высота.
  • rx, ry – радиусы скругления углов по горизонтали и вертикали. Если задать только rx, ry будет равен rx.

Пример с скругленными углами:

var roundedRect = s.rect(100, 100, 150, 80, 20, 20);

Атрибуты для стилизации

Snap.svg использует метод attr() для установки визуальных свойств прямоугольника. Основные атрибуты:

  • fill – заливка фигуры, может быть цветом, градиентом или none.
  • stroke – цвет обводки.
  • stroke-width – толщина линии.
  • stroke-dasharray – пунктирная линия.
  • opacity – прозрачность фигуры.
  • transform – трансформации (перемещение, вращение, масштабирование).

Пример стилизации:

rect.attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 4,
    rx: 15,
    ry: 15
});

Трансформации прямоугольников

Прямоугольники могут быть перемещены, повернуты и масштабированы с помощью атрибута transform или методов translate(), rotate(), scale().

Перемещение:

rect.transform("t100,50"); // перемещение на 100px по X и 50px по Y

Вращение:

rect.transform("r45,150,100"); // вращение на 45° вокруг точки (150,100)

Масштабирование:

rect.transform("s2,2,100,50"); // масштабирование в 2 раза относительно точки (100,50)

Методы translate(dx, dy), rotate(angle, cx, cy) и scale(sx, sy, cx, cy) позволяют применять последовательные трансформации, удобные для анимаций.

Анимации

Snap.svg поддерживает плавные анимации с помощью метода animate(). Для прямоугольников можно анимировать любые числовые свойства и трансформации.

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

rect.animate({
    width: 300,
    height: 150,
    fill: "#e74c3c"
}, 1000, mina.easeinout);

Здесь анимация длится 1000 миллисекунд с функцией плавности mina.easeinout.

Анимация движения:

rect.animate({ transform: "t200,0" }, 1500, mina.elastic);

Работа с группами прямоугольников

Для объединения нескольких прямоугольников используют элемент group(). Группа позволяет управлять всеми фигурами одновременно, применяя трансформации и атрибуты к группе целиком.

var r1 = s.rect(50,50,100,60);
var r2 = s.rect(200,50,100,60);
var group = s.group(r1, r2);
group.attr({ fill: "#9b59b6" });
group.transform("t0,100"); // перемещение всей группы

События и интерактивность

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

  • click – клик по фигуре.
  • mouseover и mouseout – наведение мыши.
  • mousedown и mouseup – нажатие и отпускание кнопки мыши.

Пример:

rect.click(function() {
    this.attr({ fill: "#1abc9c" });
});

Ключевые моменты при работе с прямоугольниками

  • rx и ry позволяют создавать скругленные углы, создавая более плавный визуальный стиль.
  • Атрибут transform комбинирует перемещение, вращение и масштабирование в одной строке.
  • Метод animate() работает с любыми числовыми атрибутами, включая координаты и размеры.
  • Группы позволяют управлять сразу несколькими прямоугольниками как одним объектом.
  • Snap.svg поддерживает каскадное изменение атрибутов, что удобно для сложной визуализации.

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

Оглавление