Масштабирование изображений

Масштабирование — базовая операция при работе с графикой, позволяющая изменять размеры объектов без пересчёта их геометрии. В библиотеке Two.js масштаб применяется через трансформации, что делает процесс гибким и эффективным.

Принцип работы масштабирования

В Two.js любой графический объект (shape) обладает свойством scale, которое определяет коэффициент увеличения или уменьшения относительно исходного размера.

Ключевые особенности:

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

Простейший пример:

const two = new Two({ width: 500, height: 500 }).appendTo(document.body);

const rect = two.makeRectangle(250, 250, 100, 100);
rect.fill = 'blue';

// Увеличение в 2 раза
rect.scale = 2;

two.update();

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

Свойство scale может быть:

  • числом (одинаковый масштаб по X и Y)
  • объектом Two.Vector (раздельный масштаб)

Пример неравномерного масштабирования:

rect.scale = new Two.Vector(2, 0.5);

Результат:

  • по оси X — увеличение в 2 раза
  • по оси Y — уменьшение в 2 раза

Это используется для:

  • растяжения изображений
  • создания эффектов перспективы
  • анимаций деформации

Масштабирование изображений (Two.Image / Two.Sprite)

В Two.js изображения добавляются через makeImage или Two.Sprite.

Пример загрузки изображения:

const image = two.makeImage('image.png', 250, 250);
image.scale = 1.5;

two.update();

Важно:

  • масштаб применяется после загрузки изображения
  • начальный размер зависит от исходного файла

Центр масштабирования

По умолчанию масштабирование происходит относительно центра объекта.

Центр определяется свойством:

shape.translation

Для изменения точки масштабирования используется смещение (offset):

image.translation.set(100, 100);

Однако более точное управление достигается через группировку:

const group = two.makeGroup(image);

// смещение центра группы
group.translation.set(200, 200);
group.scale = 2;

Группы позволяют:

  • менять точку трансформации
  • масштабировать несколько объектов одновременно

Анимация масштабирования

Масштаб удобно использовать для создания анимаций:

two.bind('update', function(frameCount) {
  rect.scale = 1 + Math.sin(frameCount * 0.05) * 0.5;
});

Эффект:

  • плавное “пульсирование”
  • масштаб колеблется от 0.5 до 1.5

Ограничения и особенности

1. Масштаб не влияет на разрешение изображения

При увеличении растровых изображений:

  • появляется пикселизация
  • качество зависит от исходного файла

2. Толщина линий

При масштабировании:

  • линии (stroke) также масштабируются
  • это может быть нежелательно

Решение — вручную компенсировать:

rect.linewidth = 2 / rect.scale;

3. Вложенные трансформации

Если объект находится внутри группы:

group.scale = 2;
rect.scale = 0.5;

Итоговый масштаб:

2 * 0.5 = 1

Это важно учитывать при сложных сценах.

Масштабирование через матрицы трансформаций

Two.js использует матрицы преобразований “под капотом”.

Каждый объект имеет:

  • позицию (translation)
  • вращение (rotation)
  • масштаб (scale)

Все они объединяются в одну матрицу.

Порядок применения:

  1. Масштаб
  2. Вращение
  3. Перемещение

Это означает:

  • масштаб всегда происходит относительно локальной системы координат

Практические приёмы

Адаптивное масштабирование

const scaleFactor = window.innerWidth / 500;
image.scale = scaleFactor;

Позволяет подгонять графику под экран.

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

element.addEventListener('mouseenter', () => {
  rect.scale = 1.2;
});

element.addEventListener('mouseleave', () => {
  rect.scale = 1;
});

Эффект приближения (zoom)

let zoom = 1;

window.addEventListener('wheel', (e) => {
  zoom += e.deltaY * -0.001;
  zoom = Math.max(0.5, Math.min(3, zoom));
  group.scale = zoom;
});

Оптимизация

При частом изменении масштаба:

  • избегать лишних вызовов two.update()
  • использовать two.play() для анимации
  • минимизировать количество объектов в сцене

Сравнение scale и resize

Подход Описание
scale Быстрое изменение размера через трансформацию
изменение геометрии Пересчёт точек объекта

Преимущества scale:

  • высокая производительность
  • простота
  • удобство анимации

Недостатки:

  • нет изменения реальной геометрии
  • возможны артефакты при больших масштабах

Итоговая схема использования

  1. Создать объект (изображение или фигуру)
  2. Установить scale
  3. При необходимости использовать Two.Vector
  4. Управлять центром через группы
  5. Анимировать через two.bind('update', ...)

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

Оглавление