Методы paper

В Snap.svg объект paper является основным контейнером для всех SVG-элементов. Создается он с помощью функции Snap(width, height) или Snap(selector):

var paper = Snap(800, 600); // создаем холст 800x600 пикселей

Параметры:

  • width, height – размеры холста в пикселях.
  • selector – CSS-селектор, указывающий на существующий <svg> элемент в DOM.

Созданный объект paper предоставляет методы для добавления элементов SVG, управления их свойствами и анимацией.

Методы добавления примитивов

Snap.svg поддерживает основные SVG-элементы через методы paper:

  • circle(cx, cy, r) – создает окружность с центром (cx, cy) и радиусом r.
  • rect(x, y, width, height, rx?, ry?) – прямоугольник. Параметры rx и ry задают радиус скругления углов.
  • ellipse(cx, cy, rx, ry) – эллипс с центром (cx, cy) и радиусами по осям.
  • line(x1, y1, x2, y2) – линия между двумя точками.
  • polygon(points) – многоугольник. points — строка с координатами вершин: "x1,y1 x2,y2 x3,y3".
  • polyline(points) – ломаная линия с аналогичным форматом.
  • path(d) – путь SVG с использованием атрибутов d (M, L, C, Q, Z и др.).
  • text(x, y, textContent) – текстовый элемент с содержимым textContent.

Пример создания элементов:

var c = paper.circle(100, 100, 50).attr({
    fill: "red",
    stroke: "black",
    strokeWidth: 3
});

var r = paper.rect(200, 50, 100, 100, 10, 10).attr({
    fill: "blue"
});

Группировка элементов: group()

Метод paper.group(...elements) позволяет объединять несколько элементов в единую группу для удобного управления:

var circle = paper.circle(50, 50, 20);
var rect = paper.rect(40, 40, 40, 40);
var group = paper.group(circle, rect);

group.transform("t100,0"); // смещение всей группы

Особенности:

  • Все атрибуты, применяемые к группе (attr, transform), воздействуют на все дочерние элементы.
  • Группы могут быть вложенными, создавая иерархию элементов.

Работа с клипами и масками

Snap.svg позволяет создавать маски и клипы через объект paper:

  • clip() – создание клипа через элемент rect, circle, path и др.
  • mask() – создание маски, где белая область видима, а черная скрыта.

Пример маски:

var maskRect = paper.rect(50, 50, 100, 100);
var mask = paper.mask(maskRect);

var circle = paper.circle(100, 100, 80).attr({ fill: "green" });
circle.attr({ mask: mask });

Методы трансформации холста

Объект paper поддерживает трансформации всех вложенных элементов:

  • transform(tstr) – применяет строку трансформации (t — translate, r — rotate, s — scale, m — matrix).
  • clear() – удаляет все элементы с холста.
  • select(selector) и selectAll(selector) – выбор элементов по CSS-селекторам.

Пример трансформации:

var rect = paper.rect(50, 50, 100, 100);
rect.transform("t50,50 r45"); // смещаем на (50,50) и поворачиваем на 45°

Анимации и интерактивность

Методы paper поддерживают анимацию через animate(attrs, duration, easing, callback):

var circle = paper.circle(100, 100, 40).attr({ fill: "orange" });
circle.animate({ r: 80, fill: "yellow" }, 1000, mina.easeinout);

Для интерактивности можно использовать события:

  • click(handler) – клик мышью.
  • hover(f_in, f_out) – наведение курсора.
  • mousedown(handler), mouseup(handler), mousemove(handler) – базовые события мыши.

Дополнительные методы работы с paper

  • image(src, x, y, width, height) – вставка растрового изображения в SVG.
  • use(element) – создание экземпляра элемента с использованием <use>.
  • filter() – создание фильтров для эффекта размытия, тени, инвертирования и т.д.
  • gradient(type, stops) – создание градиентов (linear, radial) с набором цветовых остановок.

Пример линейного градиента:

var grad = paper.gradient("l(0,0,0,1)#fff-#000");
var rect = paper.rect(10, 10, 200, 200).attr({ fill: grad });

Методы выборки и обхода элементов

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

  • forEach(callback) – перебор всех прямых дочерних элементов.
  • select(), selectAll() – выбор по CSS-селектору внутри холста.
  • getBBox() – получение ограничивающего прямоугольника элемента.

Пример перебора:

paper.forEach(function(el) {
    el.attr({ stroke: "black" });
});

Работа с слоем z-index

  • prepend(element) – перемещает элемент в начало слоя.
  • append(element) – перемещает элемент в конец слоя.
  • insertBefore(element), insertAfter(element) – точное позиционирование относительно других элементов.

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

Оглавление