Rectangle и прямоугольные области

Для работы с прямоугольными областями в Paper.js используется объект Rectangle. Он представляет собой область, определяемую координатами верхнего левого угла и размерами, либо двумя точками (верхний левый и нижний правый угол).

let rect1 = new Rectangle(new Point(50, 50), new Size(100, 80));
let rect2 = new Rectangle(new Point(50, 50), new Point(150, 130));

Ключевые свойства объекта Rectangle:

  • point – верхний левый угол прямоугольника (Point).
  • size – размеры прямоугольника (Size), включает width и height.
  • width и height – ширина и высота.
  • topLeft, topRight, bottomLeft, bottomRight – доступ к углам прямоугольника.
  • center – центр прямоугольника (Point).
  • left, right, top, bottom – координаты соответствующих сторон.

Методы работы с прямоугольниками

Изменение размеров и положения

  • translate(delta) – сдвигает прямоугольник на вектор delta (Point).
  • scale(factor) – масштабирует прямоугольник относительно его центра. Фактор может быть числом или объектом {x, y}.
  • expand(amount) – увеличивает размеры прямоугольника на указанное количество пикселей со всех сторон.
  • shrink(amount) – уменьшает размеры прямоугольника.
let rect = new Rectangle(new Point(20, 20), new Size(100, 50));
rect.translate(new Point(50, 0));
rect.expand(20);

Проверка пересечений и содержимого

  • contains(pointOrRect) – проверяет, содержит ли прямоугольник точку или другой прямоугольник.
  • intersects(rect) – проверяет пересечение с другим прямоугольником.
  • intersect(rect) – возвращает новый прямоугольник, представляющий область пересечения.
  • unite(rect) – возвращает новый прямоугольник, объединяющий текущий и переданный.
let rectA = new Rectangle(new Point(0, 0), new Size(100, 100));
let rectB = new Rectangle(new Point(50, 50), new Size(100, 100));

console.log(rectA.intersects(rectB)); // true
let intersection = rectA.intersect(rectB);

Преобразование Rectangle в Path

Для отображения прямоугольника на холсте используется Path.Rectangle. Он принимает Rectangle или координаты/размеры.

let path = new Path.Rectangle(rect1);
path.strokeColor = 'black';
path.fillColor = 'lightblue';

Опции Path.Rectangle:

  • radius – скругление углов. Может быть числом или объект {x, y}.
let rounded = new Path.Rectangle({
    point: [50, 50],
    size: [120, 80],
    radius: 10,
    fillColor: 'pink',
    strokeColor: 'red'
});

Работа с точками и размерами

  • Создание точек: new Point(x, y) или new Point([x, y]).
  • Создание размеров: new Size(width, height) или new Size([width, height]).

Пример объединения точек и размеров:

let topLeft = new Point(30, 40);
let size = new Size(150, 100);
let rect = new Rectangle(topLeft, size);
let path = new Path.Rectangle(rect);
path.strokeColor = 'green';

Манипуляции с отдельными сторонами и углами

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

let rect = new Rectangle(new Point(20, 20), new Size(100, 60));
rect.topLeft.x += 10; // сдвиг верхнего левого угла вправо
rect.bottomRight.y += 20; // удлинение прямоугольника вниз

Доступ к сторонам через left, right, top, bottom позволяет динамически изменять размеры:

rect.right += 50;  // расширение прямоугольника вправо
rect.bottom -= 10; // сжатие прямоугольника сверху вниз

Прямоугольники и центрирование объектов

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

let rect = new Rectangle(new Point(100, 100), new Size(200, 150));
let circle = new Path.Circle({
    center: rect.center,
    radius: 30,
    fillColor: 'orange'
});

Метод rect.center возвращает объект Point, который легко использовать для выравнивания объектов относительно прямоугольника.

Прямоугольники с отрицательными размерами

Если ширина или высота заданы отрицательной величиной, Paper.js автоматически корректирует прямоугольник, нормализуя координаты и размеры:

let rect = new Rectangle(new Point(150, 150), new Size(-50, -80));
console.log(rect.topLeft); // Point {x: 100, y: 70}
console.log(rect.size);    // Size {width: 50, height: 80}

Итоговые возможности Rectangle в Paper.js

  • Создание прямоугольников различными способами: через точки, размеры, массивы.
  • Изменение размеров, положения, сдвиг и масштабирование.
  • Проверка пересечений и объединение областей.
  • Преобразование в видимые объекты Path.Rectangle.
  • Работа с углами, сторонами и центром для точного позиционирования.

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

Оглавление