Выравнивание и позиционирование

В Paper.js каждый графический объект является экземпляром класса Item или его потомков, таких как Path, Group, Raster и Shape. Для управления положением объекта используются свойства position, pivot, bounds, а также методы translate, rotate, scale.

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

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

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

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

Работа с выравниванием объектов

Paper.js не имеет встроенной системы автоматического выравнивания, как CSS в веб-разработке, но можно легко реализовать выравнивание через свойства bounds и position.

Горизонтальное и вертикальное выравнивание

Для центрирования объекта относительно другого объекта или холста используется bounds.center:

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

// Центрирование относительно холста
rect.position = view.center;

Для выравнивания по левому, правому или верхнему краю применяются bounds.left, bounds.right, bounds.top, bounds.bottom:

rect.bounds.left = 50;    // Смещение к координате x = 50 слева
rect.bounds.top = 20;     // Смещение к координате y = 20 сверху

Выравнивание нескольких объектов

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

let circle1 = new Path.Circle([50, 50], 20);
let circle2 = new Path.Circle([150, 80], 30);

let group = new Group([circle1, circle2]);
group.position = view.center;  // Центрирование всей группы на холсте

Для точного выравнивания отдельных элементов внутри группы используют item.position и item.bounds.

Применение трансформаций для позиционирования

translate() позволяет перемещать объекты на заданный вектор:

circle.translate(new Point(50, 0)); // Сдвиг на 50 пикселей вправо

rotate(angle, point) поворачивает объект на угол angle вокруг точки point. Если точка не указана, используется pivot:

rect.rotate(45, rect.bounds.center);

scale(factor, point) масштабирует объект. При масштабировании вокруг центра объекта используется pivot:

rect.scale(1.5, rect.bounds.center); // Увеличение на 50%

Учет координатных систем и иерархий

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

  • Изменение позиции группы перемещает все её дочерние элементы.
  • Изменение pivot у родителя влияет на вращение всех вложенных объектов.

Для независимого позиционирования дочерних объектов внутри группы необходимо управлять их position и bounds локально, учитывая координаты родителя:

let group = new Group();
let rect = new Path.Rectangle([0,0], [100,50]);
let circle = new Path.Circle([50,25], 20);

group.addChild(rect);
group.addChild(circle);

circle.position = rect.bounds.rightCenter + new Point(30, 0); // Сдвиг относительно прямоугольника

Автоматическое распределение объектов

Для равномерного распределения нескольких объектов по горизонтали или вертикали можно использовать массивы и вычисление промежутков:

let items = [];
for (let i = 0; i < 5; i++) {
    items.push(new Path.Circle([0,0], 20));
}

// Распределение по горизонтали на 500px
let spacing = 500 / (items.length + 1);
items.forEach((item, index) => {
    item.position = new Point((index + 1) * spacing, view.center.y);
});

Привязка объектов к границам холста

Для интерфейсов и динамических сцен важно позиционировать объекты относительно размеров окна. Свойство view.bounds содержит текущие границы холста:

let topRightCircle = new Path.Circle(view.bounds.topRight - new Point(30, -30), 20);
topRightCircle.fillColor = 'green';

Использование view.onResize позволяет поддерживать корректное выравнивание при изменении размеров окна:

view.onRes ize = function() {
    topRightCircle.position = view.bounds.topRight - new Point(30, -30);
};

Ключевые рекомендации по выравниванию и позиционированию

  • Всегда использовать bounds для точного контроля крайних точек объектов.
  • Для групп и сложных сцен применять Group и управлять position группы, сохраняя локальные позиции дочерних элементов.
  • Для динамических интерфейсов учитывать view.bounds и события изменения размеров.
  • Комбинировать translate, rotate, scale с pivot для гибкого позиционирования и трансформаций.
  • Для автоматического распределения объектов вычислять координаты через массивы и математические формулы, избегая ручного подбора.

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

Оглавление