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

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

В Two.js масштаб задается через свойства scale, scaleX и scaleY объекта.

  • scale — общий коэффициент масштабирования по обеим осям.
  • scaleX — масштабирование по горизонтали.
  • scaleY — масштабирование по вертикали.

Пример задания масштаба для объекта:

let circle = two.makeCircle(100, 100, 50);
circle.scale = 2;        // увеличиваем объект в 2 раза
circle.scaleX = 1.5;     // горизонтальное растяжение
circle.scaleY = 0.5;     // вертикальное сжатие
two.update();

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

Для удобного управления сложными сценами используется Two.Group. Любой объект можно добавить в группу и изменять масштаб всех объектов одновременно, сохраняя их относительное положение.

let group = two.makeGroup();
let rect = two.makeRectangle(0, 0, 50, 50);
let circle = two.makeCircle(60, 0, 30);

group.add(rect, circle);
group.scale = 1.5;
two.update();

В данном примере прямоугольник и круг увеличены на 50% одновременно, при этом их координаты относительно группы сохраняются.

Относительное масштабирование и точка отсчета

Масштабирование выполняется относительно центра объекта или группы. В Two.js это определяется свойствами translation и origin.

  • translation задает положение объекта на сцене.
  • origin определяет точку, относительно которой выполняются трансформации.

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

let rect = two.makeRectangle(100, 100, 80, 40);
rect.origin.set(0, 0); // верхний левый угол как точка отсчета
rect.scale = 2;
two.update();

Использование origin позволяет масштабировать объект относительно любой точки, что особенно важно при анимациях и интерактивных интерфейсах.

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

Two.js поддерживает плавные анимации с использованием функции two.bind('update', callback). Для масштабирования можно динамически изменять значения scale:

let square = two.makeRectangle(200, 200, 50, 50);
let factor = 1;
let growing = true;

two.bind('update', function(frameCount, delta) {
    if (growing) {
        factor += 0.01;
        if (factor >= 2) growing = false;
    } else {
        factor -= 0.01;
        if (factor <= 1) growing = true;
    }
    square.scale = factor;
}).play();

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

Масштабирование при комбинировании трансформаций

Важный аспект — порядок применения трансформаций. В Two.js объекты могут иметь несколько свойств трансформации одновременно: translation, rotation, scale.

  • Масштабирование выполняется после смещения и поворота, если используется стандартный рендеринг.
  • Для корректного управления можно предварительно сбросить трансформации с помощью методов resetTransform или менять origin.

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

let triangle = two.makePolygon(300, 300, 40, 3);
triangle.rotation = Math.PI / 4; // поворот на 45 градусов
triangle.scale = 1.5;            // масштабирование после поворота
two.update();

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

  • Для объектов с анимацией лучше использовать группы, чтобы масштабирование не нарушало положение внутренних элементов.
  • Изменение масштаба не изменяет координаты vertices, оно применяет матрицу трансформации на рендер-уровне. Это важно при расчетах коллизий или интерактивных взаимодействиях.
  • Использование origin позволяет точно управлять точкой масштабирования, что облегчает создание эффектов «выхода из центра», вращения с масштабированием и пульсирующих объектов.

Масштабирование текстовых объектов

Two.js позволяет масштабировать текст через объект Two.Text. Масштабирование работает аналогично геометрическим объектам:

let text = two.makeText("Two.js", 100, 50, { size: 20 });
text.scale = 3; // текст увеличивается в 3 раза
two.update();

Важно учитывать, что увеличение текста также увеличивает толщину линий, если используется stroke.

Использование трансформаций через CSS-свойства (SVG рендер)

При рендеринге в SVG объекты Two.js используют атрибут transform, который включает все трансформации (translate, rotate, scale). Это позволяет экспортировать анимации или управлять ими через сторонние SVG-инструменты.

let circle = two.makeCircle(150, 150, 30);
circle.scale = 2;
console.log(circle._renderer.elem.getAttribute('transform'));
// Результат: "translate(150 150) scale(2)"

Такой подход обеспечивает точное соответствие визуальных эффектов между Canvas и SVG.

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

Оглавление