Position и перемещение

В Paper.js каждый объект, будь то Path, Raster или Group, имеет свойство position, которое определяет его положение на канвасе. position представляет собой объект типа Point с координатами x и y. Изменение позиции перемещает объект без изменения его геометрии относительно центра.

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

circle.position = new Point(100, 100);

Здесь круг перемещается к координатам (100, 100). Важно: center используется только при создании объекта, для дальнейшего позиционирования применяется position.

Смещение объектов

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

let vector = new Point(10, 5);
circle.translate(vector);

translate изменяет position объекта на указанное смещение. Это удобно для анимаций и пошагового движения.

Доступ к координатам

position можно разбирать на компоненты:

let x = circle.position.x;
let y = circle.position.y;

// Или изменять координаты отдельно
circle.position.x += 20;
circle.position.y -= 10;

Paper.js также поддерживает арифметику с Point, что позволяет выполнять операции сложения, вычитания и умножения векторно.

circle.position += new Point(5, 5);
circle.position -= new Point(2, 3);

Перемещение групп объектов

Объекты можно объединять в Group. Перемещение группы осуществляется аналогично отдельным объектам через position или translate. При этом все дочерние элементы смещаются синхронно.

let rect = new Path.Rectangle([0, 0], [50, 50]);
let ellipse = new Path.Ellipse([0, 0], [80, 40]);
let group = new Group([rect, ellipse]);

group.position = new Point(200, 200);
group.translate(new Point(20, 0));

Изменение позиции группы не влияет на относительное расположение её элементов, они остаются в той же конфигурации.

Анимация перемещения

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

let movingCircle = new Path.Circle({
    center: [50, 50],
    radius: 20,
    fillColor: 'red'
});

function onFrame(event) {
    movingCircle.position.x += 2; // движение по оси X
}

Здесь объект будет перемещаться на 2 пикселя каждый кадр. Для более сложных траекторий можно использовать векторы и функции синуса/косинуса для криволинейного движения.

Привязка позиции к других объектов

Иногда требуется, чтобы объект следовал за другим объектом. Для этого достаточно обновлять его position в соответствии с положением «ведущего» объекта.

let follower = new Path.Circle({radius: 10, fillColor: 'green'});

function onFrame(event) {
    follower.position = movingCircle.position + new Point(30, 0);
}

follower теперь будет всегда находиться на 30 пикселей правее movingCircle.

Работа с локальными координатами

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

let child = new Path.Circle([10, 10], 5);
let parentGroup = new Group([child]);

parentGroup.position = new Point(100, 100);
// child.position автоматически пересчитывается глобально

Использование свойства bounds

Свойство bounds возвращает прямоугольник (Rectangle), охватывающий объект. Его центр совпадает с position, но через bounds удобно управлять крайними точками и проводить выравнивание.

let rect = new Path.Rectangle([50, 50], [100, 60]);
let center = rect.bounds.center; // то же самое, что rect.position
let topLeft = rect.bounds.topLeft;

rect.position = topLeft + new Point(10, 10); // смещение относительно угла

Сравнение position и pivot

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

rect.rotate(45); // поворот вокруг rect.position
rect.scale(1.5); // масштабирование относительно rect.position

Это делает position ключевым элементом при управлении движением, анимацией и трансформациями объектов.

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

Оглавление