Размещение и масштабирование

В Paper.js каждый объект (Path, Raster, Group, Layer) располагается в координатной системе холста. Основная единица измерения — пиксели, а точка (0, 0) находится в левом верхнем углу канваса. Понимание координатной системы критично для точного размещения объектов и их последующего масштабирования.

Свойства позиции объектов:

  • position — центральная точка объекта, используется для смещения и центрирования.
  • bounds — прямоугольник, охватывающий объект; имеет свойства topLeft, topRight, bottomLeft, bottomRight, center.
  • pivot — точка поворота и масштабирования относительно объекта (по умолчанию совпадает с position).

Пример установки позиции:

let circle = new Path.Circle({
    center: [150, 100],
    radius: 50,
    fillColor: 'blue'
});

circle.position = new Point(200, 150);

Point — объект Paper.js для представления координат, позволяющий выполнять операции сложения, вычитания и масштабирования векторно.

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

Масштабирование в Paper.js производится методом scale(factor, center), где factor может быть числом или объектом Point, а center — точка, относительно которой выполняется масштабирование.

Ключевые моменты:

  • Одномерное масштабирование: scale(2) увеличивает объект в 2 раза по всем осям.
  • Дифференциальное масштабирование: scale(new Point(2, 0.5)) увеличивает по X и сжимает по Y.
  • Относительная точка: объект масштабируется относительно своей позиции по умолчанию, но можно задать любую точку.

Пример масштабирования относительно верхнего левого угла объекта:

let rect = new Path.Rectangle({
    point: [50, 50],
    size: [100, 80],
    fillColor: 'green'
});

rect.scale(1.5, rect.bounds.topLeft);

Группы объектов и их трансформации

Объекты в Paper.js можно объединять в группы (Group). Масштабирование группы автоматически применяет трансформацию ко всем дочерним элементам, сохраняя относительные позиции и размеры.

let circle1 = new Path.Circle([50, 50], 30);
circle1.fillColor = 'red';

let circle2 = new Path.Circle([150, 50], 30);
circle2.fillColor = 'blue';

let group = new Group([circle1, circle2]);
group.scale(2, new Point(100, 50));

Здесь каждая окружность увеличивается вдвое относительно точки [100, 50], сохраняя пропорции и взаимное расположение.

Использование matrix для точного управления

Для более сложных операций Paper.js предоставляет матричные трансформации (Matrix). Через Matrix можно комбинировать масштабирование, поворот и смещение в одной операции.

Создание и применение матрицы:

let matrix = new Matrix();
matrix.translate(50, 30);
matrix.scale(2, 2, new Point(100, 100));
matrix.rotate(45, new Point(100, 100));

rect.transform(matrix);

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

Масштабирование растровых изображений (Raster)

Raster объекты поддерживают не только позицию, но и разрешение исходного изображения. Масштабирование производится через scale, аналогично Path:

let raster = new Raster('image.jpg');
raster.position = view.center;
raster.scale(0.5);  // Уменьшение до 50%

Важно помнить, что слишком сильное увеличение растрового объекта приведёт к размытому изображению из-за ограничений пиксельного разрешения.

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

Paper.js поддерживает плавные изменения позиции и масштаба через метод onFrame, позволяя создавать динамическую визуализацию:

circle.onFr ame = function(event) {
    let scaleFactor = 1 + 0.01 * Math.sin(event.count / 10);
    circle.scale(scaleFactor, circle.position);
};

Каждый кадр вычисляет новое значение масштаба относительно центральной точки объекта, создавая эффект «дыхания» фигуры.

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

  • Использовать bounds для позиционирования объектов относительно краев холста.
  • Применять группы для масштабирования наборов объектов без нарушения их взаимного расположения.
  • Для сложных анимаций или повторных трансформаций использовать матрицы Matrix.
  • Масштабировать растровые объекты с осторожностью, чтобы сохранить качество изображения.
  • Всегда учитывать центр трансформации (pivot или передаваемую точку), иначе объект будет смещаться неожиданным образом.
Оглавление