Относительные и абсолютные координаты

Snap.svg предоставляет удобный способ создания и управления векторной графикой в браузере с использованием языка JavaScript. Одним из ключевых аспектов работы с элементами SVG является понимание координатной системы. В Snap.svg различают абсолютные и относительные координаты, что особенно важно при построении сложных графических объектов, анимации и трансформаций.

Абсолютные координаты

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

Пример создания прямоугольника с абсолютными координатами:

var s = Snap(800, 600);
var rect = s.rect(100, 50, 200, 100); // x=100, y=50, width=200, height=100
rect.attr({
    fill: "#3498db",
    stroke: "#2c3e50",
    strokeWidth: 4
});

В этом примере координата x=100 и y=50 определяют верхний левый угол прямоугольника относительно начала координат SVG-контейнера. Любые изменения этих значений перемещают объект по абсолютной позиции на холсте.

Ключевой момент: Абсолютные координаты удобны для точного позиционирования объектов, но при сложных вложенных структурах (группы, трансформации) они могут затруднить управление элементами, так как координаты не учитывают локальные преобразования.

Относительные координаты

Относительные координаты определяют положение точки относительно текущего положения или родительского элемента. Они особенно полезны при работе с анимацией, группами (<g>), и при создании сложных композиционных элементов.

Snap.svg поддерживает относительные координаты через методы трансформации, например, translate, rotate и scale.

Пример использования относительных координат для смещения:

var circle = s.circle(150, 150, 50);
circle.attr({
    fill: "#e74c3c"
});

// Смещение на 100 по x и 50 по y относительно текущего положения
circle.transform("t100,50");

Здесь "t100,50" означает translation — смещение объекта на указанное количество единиц координат относительно его текущей позиции.

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

Преобразование координат между системами

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

  • el.getBBox() — возвращает ограничивающий прямоугольник элемента в абсолютных координатах.
  • el.matrix — объект матрицы трансформации элемента.
  • el.getCTM() — возвращает текущую матрицу преобразований, учитывающую все трансформации родительских элементов.

Пример:

var rect = s.rect(50, 50, 100, 100);
rect.transform("t30,40 r45"); // Смещение и поворот

var ctm = rect.getCTM(); 
console.log(ctm.a, ctm.b, ctm.c, ctm.d, ctm.e, ctm.f);

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

Работа с группами и координатами

Группировка элементов (g) облегчает управление относительными координатами, так как трансформации применяются ко всей группе одновременно.

var group = s.group();
var circle1 = s.circle(50, 50, 30);
var circle2 = s.circle(150, 50, 30);

group.add(circle1, circle2);

// Перемещение всей группы на 100 по x и 50 по y
group.transform("t100,50");

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

Преимущества использования относительных координат

  1. Масштабируемость — объекты внутри группы остаются пропорциональными при масштабировании группы.
  2. Простота анимации — можно анимировать группы, не пересчитывая координаты каждого объекта.
  3. Удобство композиции — легко строить сложные графические элементы из нескольких простых объектов.

Практическое применение

Создание сложной фигуры с использованием относительных координат:

var star = s.group();
var points = [
    [0, -50], [14, -15], [47, -15],
    [23, 7], [29, 40], [0, 25],
    [-29, 40], [-23, 7], [-47, -15], [-14, -15]
];

points.forEach(function(p) {
    star.add(s.circle(p[0], p[1], 5).attr({fill: "#f1c40f"}));
});

// Перемещение всей звезды в центр холста
star.transform("t400,300");

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

Рекомендации по выбору системы координат

  • Использовать абсолютные координаты, когда требуется точное позиционирование объектов на холсте без зависимости от других элементов.

  • Использовать относительные координаты, когда нужно:

    • сгруппировать объекты и управлять ими вместе;
    • анимировать объекты без пересчета координат;
    • строить повторяющиеся или сложные композиции, где положение элементов зависит друг от друга.

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

Оглавление