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

Snap.svg предоставляет мощные возможности для работы с векторной графикой, включая создание, трансформацию и управление паттернами. Масштабирование паттернов — это процесс изменения размера повторяющегося рисунка, не влияя на исходные элементы графики. В Snap.svg паттерны создаются через элемент <pattern> и применяются к объектам с помощью атрибута fill.

var s = Snap(400, 400);
var pattern = s.paper.pattern(0, 0, 20, 20, function() {
    this.rect(0, 0, 10, 10).attr({fill: "red"});
    this.rect(10, 10, 10, 10).attr({fill: "blue"});
});
var rect = s.rect(0, 0, 200, 200).attr({fill: pattern});

В этом примере создается паттерн размером 20x20, содержащий два квадрата 10x10, окрашенных в красный и синий цвета. Паттерн применяется к прямоугольнику 200x200.

Масштабирование паттерна с помощью pattern.attr

Snap.svg позволяет изменять атрибуты паттерна напрямую. Основными атрибутами для масштабирования являются width и height паттерна, а также трансформация patternTransform.

pattern.attr({
    width: 40,
    height: 40
});

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

Для более гибкого управления масштабом используется patternTransform. Этот атрибут принимает строку трансформации в формате SVG:

pattern.attr({
    patternTransform: "scale(2)"
});

Здесь паттерн масштабируется в два раза относительно своей исходной точки. Важно помнить, что масштабирование через patternTransform влияет на все содержимое паттерна одновременно.

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

Для точного контроля над масштабированием можно использовать матрицы трансформации. Snap.svg предоставляет объект Snap.Matrix, который позволяет комбинировать масштабирование, вращение и смещение.

var matrix = new Snap.Matrix();
matrix.scale(1.5, 1.5);  // масштабирование по осям X и Y
pattern.attr({
    patternTransform: matrix.toTransformString()
});

Метод toTransformString() преобразует матрицу в строку формата SVG, которую Snap.svg применяет к паттерну. Этот подход особенно полезен при сложных комбинациях трансформаций.

Масштабирование относительно центра паттерна

По умолчанию масштабирование происходит относительно точки (0,0) паттерна. Чтобы масштабировать относительно центра, нужно использовать комбинированную трансформацию с трансляцией:

var cx = 10; // центр по X
var cy = 10; // центр по Y
pattern.attr({
    patternTransform: `translate(${cx}, ${cy}) scale(2) translate(${-cx}, ${-cy})`
});

Сначала паттерн смещается к центру, затем масштабируется, и возвращается в исходное положение. Такой подход позволяет сохранять симметрию рисунка при увеличении или уменьшении.

Динамическое масштабирование с анимацией

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

pattern.animate({patternTransform: "scale(3)"}, 1000, mina.easeinout);

В этом примере паттерн плавно увеличивается в три раза за 1 секунду с функцией сглаживания mina.easeinout. Можно комбинировать с циклическими анимациями для создания повторяющихся эффектов.

Особенности масштабирования сложных паттернов

  1. Вложенные элементы: Если паттерн содержит группы элементов <g>, масштабирование через patternTransform применится ко всей группе.
  2. Пропорции: При изменении width и height пропорции паттерна могут нарушаться. Для сохранения пропорций лучше использовать scale(s) через patternTransform.
  3. Точки привязки: Масштабирование может влиять на видимую точку привязки. При необходимости точку можно корректировать через смещение или матрицу трансформации.

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

  • Использовать patternTransform для универсального масштабирования, особенно если паттерн применяется к множеству объектов.
  • Для сохранения качества векторной графики избегать прямого растягивания паттернов через CSS ширины и высоты объектов.
  • При динамическом масштабировании комбинировать анимацию с mina для плавности и естественного движения.

Масштабирование паттернов в Snap.svg позволяет управлять визуальными эффектами на уровне векторной графики, обеспечивая точность, гибкость и совместимость с анимацией и трансформациями объектов.

Оглавление