Rectangle

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

Создание прямоугольника

В Paper.js прямоугольник создаётся через конструктор Path.Rectangle. Существует несколько способов задания его параметров:

Через координаты и размеры

var rect = new Path.Rectangle({
    point: [50, 50],
    size: [200, 100],
    fillColor: 'blue'
});
  • point — координаты верхнего левого угла
  • size — ширина и высота

Через два противоположных угла

var rect = new Path.Rectangle({
    from: [50, 50],
    to: [250, 150],
    strokeColor: 'black'
});
  • from — первая точка (обычно верхний левый угол)
  • to — противоположная точка (нижний правый угол)

Через объект Rectangle

var rectangle = new Rectangle(new Point(50, 50), new Size(200, 100));
var path = new Path.Rectangle(rectangle);

Скруглённые прямоугольники

Для создания прямоугольников со скруглёнными углами используется параметр radius.

var rect = new Path.Rectangle({
    point: [50, 50],
    size: [200, 100],
    radius: 20,
    fillColor: 'green'
});

Также можно задавать разные радиусы по осям:

radius: [30, 10]
  • первый параметр — радиус по горизонтали
  • второй — по вертикали

Свойства прямоугольника

Прямоугольник в Paper.js — это частный случай Path, поэтому он наследует все свойства пути.

Основные свойства

  • position — центр объекта
  • bounds — границы (включая обводку)
  • strokeBounds — границы с учётом толщины линии
  • fillColor — цвет заливки
  • strokeColor — цвет обводки
  • strokeWidth — толщина линии

Пример:

rect.strokeColor = 'black';
rect.strokeWidth = 5;

Изменение размеров

Размеры можно менять через bounds или напрямую трансформациями.

Через bounds

rect.bounds.width = 300;
rect.bounds.height = 150;

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

rect.scale(1.5);

Перемещение

Перемещение осуществляется через изменение позиции:

rect.position = [300, 200];

Или сдвигом:

rect.translate([50, 20]);

Вращение

rect.rotate(45);

Вращение происходит относительно центра, если не указана другая точка:

rect.rotate(45, new Point(0, 0));

Доступ к сегментам

Прямоугольник состоит из четырёх сегментов:

console.log(rect.segments);

Каждый сегмент содержит:

  • point
  • handleIn
  • handleOut

Это позволяет модифицировать форму:

rect.segments[0].point.x += 20;

Преобразование в произвольную форму

После создания прямоугольник можно деформировать:

rect.segments[1].point.y += 50;

Так он перестаёт быть строго прямоугольником и становится произвольным путём.

Проверка попадания точки

var hit = rect.contains(new Point(100, 100));

Возвращает true, если точка внутри фигуры.

Пересечения и булевы операции

Прямоугольники активно используются в булевой геометрии:

var rect1 = new Path.Rectangle([50, 50], [100, 100]);
var rect2 = new Path.Rectangle([100, 100], [150, 150]);

var united = rect1.unite(rect2);

Доступные операции:

  • unite — объединение
  • intersect — пересечение
  • subtract — вычитание
  • exclude — исключающее ИЛИ

Клонирование

var copy = rect.clone();
copy.position.x += 100;

Клон полностью независим от оригинала.

Удаление

rect.remove();

Удаляет объект со сцены.

Работа с группами

Прямоугольники можно объединять в группы:

var group = new Group([rect1, rect2]);

Группа позволяет применять трансформации ко всем объектам сразу.

Использование как маски

var mask = new Path.Rectangle({
    point: [50, 50],
    size: [200, 100]
});

group.clipped = true;
group.addChild(mask);

Прямоугольник ограничивает видимую область содержимого группы.

Анимация

function onFrame(event) {
    rect.rotate(1);
}

Каждый кадр изменяет состояние объекта.

Производительность

  • Прямоугольники легче в обработке, чем сложные пути
  • При большом количестве объектов предпочтительно использовать Symbol и PlacedSymbol
  • Частые изменения сегментов могут снижать производительность

Практические применения

  • UI-элементы (кнопки, панели)
  • Области клика
  • Фоновые блоки
  • Маски и клиппинг
  • Геометрические вычисления
  • Основы для сложных фигур

Особенности реализации

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

Частые ошибки

  • Неправильное понимание point (это не центр, а угол)
  • Изменение bounds без учёта позиции
  • Потеря формы при ручной правке сегментов
  • Использование scale без контроля центра трансформации

Расширенные техники

Анимация радиуса скругления

rect.radius = 0;

function onFrame(event) {
    rect.radius += 0.5;
}

Реакция на мышь

rect.onCl ick = function() {
    this.fillColor = 'red';
};

Генерация сетки прямоугольников

for (var x = 0; x < 5; x++) {
    for (var y = 0; y < 5; y++) {
        new Path.Rectangle({
            point: [x * 50, y * 50],
            size: [40, 40],
            fillColor: 'black'
        });
    }
}

Формирование регулярных структур на основе прямоугольников лежит в основе многих графических интерфейсов и визуализаций.

Оглавление