Наклон: skew

В библиотеке SVG.js метод skew используется для наклона объектов по горизонтальной и вертикальной осям. Он позволяет создавать визуальный эффект перспективы или динамических искажений, не изменяя реальные координаты элементов. Метод принимает два параметра: угол наклона по X и угол наклона по Y, задаваемые в градусах.

// Пример базового использования
const draw = SVG().addTo('body').size(400, 400);
const rect = draw.rect(100, 100).fill('#f06');
rect.skew(30, 20); // наклон по X на 30°, по Y на 20°
  • Первый параметр (skewX) задаёт наклон по горизонтальной оси.
  • Второй параметр (skewY) задаёт наклон по вертикальной оси.
  • Параметры можно указывать как числа (градусы) или строки с указанием единиц ('30deg'). Если единицы не указаны, по умолчанию используются градусы.

Наклон с использованием отдельных методов skewX и skewY

Для большей точности и контроля SVG.js предоставляет методы skewX() и skewY(). Они позволяют задавать наклон по одной оси без влияния на другую:

rect.skewX(45); // наклон только по горизонтальной оси
rect.skewY(10); // наклон только по вертикальной оси

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

Комбинирование наклона с другими трансформациями

Метод skew может комбинироваться с другими трансформациями: rotate, scale, translate. Важно помнить, что порядок применения трансформаций влияет на результат:

rect
  .translate(50, 50)
  .rotate(20)
  .skew(15, 30);

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

Анимация наклона

SVG.js позволяет плавно анимировать наклон объектов с помощью метода animate():

rect.animate(1000, '<>').skew(60, 0); // анимация наклона по X на 60° за 1 секунду
  • Первый параметр метода animate — длительность анимации в миллисекундах.
  • Второй параметр — кривая анимации ('<>' — ease-in-out).
  • Можно комбинировать с другими свойствами:
rect.animate(1500).skew(0, 45).fill('#0f9');

Наклон текста и сложных элементов

Метод skew работает не только с простыми фигурами (прямоугольники, круги), но и с группами элементов (g) и текстовыми объектами (text). Для групп наклон применяется ко всем вложенным элементам:

const group = draw.group();
group.add(draw.rect(50, 50).fill('#f00'));
group.add(draw.circle(50).fill('#00f'));
group.skew(20, 0);

Для текста наклон позволяет создавать эффект перспективного написания:

draw.text('SVG.js').font({ size: 40 }).skew(-15, 0);

Отрицательные и большие углы

Наклон может быть отрицательным или превышать 360°:

rect.skew(-30, 720);
  • Отрицательные значения инвертируют наклон.
  • Углы, превышающие 360°, нормализуются по модулю 360°.

Получение текущего наклона

Для анализа текущего состояния элемента можно использовать метод transform():

const t = rect.transform();
console.log(t); // объект с ключами skewX, skewY, rotate, scale и др.

Это позволяет динамически проверять и изменять наклон в зависимости от условий приложения.

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

  • Использовать skew для создания перспективы и динамических эффектов.
  • При анимации комбинировать с rotate и scale для более выразительных визуальных результатов.
  • Для точного управления анимацией наклона применять отдельные методы skewX и skewY.
  • Проверять порядок трансформаций, чтобы избежать неожиданных искажений.

Метод skew является мощным инструментом SVG.js, позволяющим добавлять объём и динамику визуальным элементам, сохраняя при этом простоту и гибкость кода.

Оглавление