Transformation паттернов

Paper.js предоставляет мощный набор инструментов для работы с векторной графикой, включая возможность трансформации паттернов (Pattern) внутри объектов. Паттерн в Paper.js представляет собой объект Pattern, который можно использовать для заполнения геометрических фигур повторяющейся текстурой. Управление трансформациями паттерна позволяет изменять его масштаб, поворот, смещение и зеркальное отображение без модификации исходного изображения.

Создание паттерна

Паттерн создаётся на основе любого объекта Paper.js или элемента HTML <canvas>/<image>. Простейший способ — создать Path или Raster и использовать его для заполнения другого объекта:

var circle = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'red'
});

var pattern = new Pattern(circle, [0, 0, 50, 50]);
var rect = new Path.Rectangle({
    point: [0, 0],
    size: [200, 200],
    fillColor: pattern
});
  • Pattern принимает два аргумента: источник (item) и размер области повторения (rectangle).
  • fillColor объекта можно назначить паттерн напрямую.

Основные трансформации паттерна

Трансформации паттерна задаются через объект Matrix, который можно применять к свойству pattern.transform объекта FillColor. Matrix позволяет управлять следующими аспектами:

  1. Смещение (Translation) Перемещение паттерна относительно объекта:

    pattern.transform(new Matrix().translate(30, 50));

    Параметры translate(x, y) задают смещение по осям X и Y.

  2. Масштабирование (Scaling) Изменение размера паттерна без изменения исходного объекта:

    pattern.transform(new Matrix().scale(2, 2));

    Масштабирование может быть неодинаковым по осям: scale(sx, sy).

  3. Поворот (Rotation) Вращение паттерна относительно начала координат:

    pattern.transform(new Matrix().rotate(45));

    Углы задаются в градусах, положительное значение — по часовой стрелке.

  4. Отражение (Reflection / Skew) Можно инвертировать паттерн или создавать косые сдвиги:

    pattern.transform(new Matrix().scale(-1, 1)); // зеркальное отражение по X
pattern.transform(new Matrix().shear(30, 0)); // наклон по оси X

Комбинирование трансформаций

Matrix поддерживает цепочку операций. Это позволяет одновременно поворачивать, масштабировать и смещать паттерн в одной матрице:

var m = new Matrix();
m.translate(50, 50)
 .rotate(30)
 .scale(1.5, 1.5);
pattern.transform(m);

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

Привязка трансформаций к объектам

Чтобы паттерн следовал за объектом при перемещении или вращении, нужно применять трансформацию к паттерну до назначения fillColor, либо обновлять матрицу при каждом изменении объекта:

var rect = new Path.Rectangle([0, 0], [200, 100]);
rect.fillColor = pattern;

// обновление паттерна при движении
rect.onFr ame = function(event) {
    pattern.transform(new Matrix().rotate(1, rect.bounds.center));
};

Здесь паттерн плавно вращается вместе с анимацией объекта.

Использование трансформаций для динамических эффектов

Трансформации паттернов позволяют создавать сложные визуальные эффекты, такие как:

  • Анимация движения текстуры внутри фигуры
  • Вращение и масштабирование при интерактивных событиях
  • Создание бесшовных повторяющихся узоров с произвольными смещениями
  • Искажения и наклоны для имитации перспективы или 3D-эффектов

Например, плавное смещение паттерна:

view.onFr ame = function(event) {
    pattern.transform(new Matrix().translate(2, 0));
};

Это создаёт иллюзию движения текстуры слева направо.

Важные моменты

  • Паттерн не изменяет исходный объект: трансформации влияют только на заполнение.
  • Объекты Matrix можно комбинировать с invert() для обратных эффектов.
  • Для точного контроля центра вращения или масштабирования можно использовать второй аргумент метода (rotate(angle, point) или scale(sx, sy, point)).
  • Performance: сложные анимации паттернов лучше реализовывать через отдельные канвасы или Raster, чтобы не перегружать GPU.

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

Оглавление