HandleBounds

В Paper.js каждый объект, имеющий кривые Безье или сегменты, обладает контроллерами кривых, которые называются handles (ручки). Эти ручки определяют форму кривой между сегментами. Свойство handleBounds позволяет получить ограничивающий прямоугольник, который включает не только точки сегментов, но и сами ручки. Это отличается от обычного bounds, который учитывает только фактические точки геометрии объекта.

// Пример: создание кривой с ручками
var path = new Path();
path.add(new Point(50, 50));
path.add(new Point(150, 100));
path.add(new Point(200, 50));
path.smooth();
console.log(path.bounds);        // Ограничивающий прямоугольник по точкам
console.log(path.handleBounds);  // Ограничивающий прямоугольник с учётом ручек

Ключевой момент: handleBounds всегда больше или равен bounds, так как учитывает экстремальные значения ручек кривой, которые выходят за пределы самих сегментов.

Структура объекта handleBounds

Свойство handleBounds возвращает объект типа Rectangle с полями:

  • x и y – координаты верхнего левого угла
  • width и height – размеры прямоугольника
  • topLeft, topRight, bottomLeft, bottomRight – точки углов
  • center – центр прямоугольника

Эти данные позволяют легко позиционировать объект или проверять столкновения с другими элементами с учётом кривых Безье.

var bounds = path.handleBounds;
console.log(bounds.topLeft);  // { x: 50, y: 50 }
console.log(bounds.bottomRight); // { x: 200, y: 100 }

Использование handleBounds для визуализации

Часто требуется визуально показать границы кривых с ручками. Можно создать прямоугольник с помощью Rectangle и Path.Rectangle:

var rect = new Path.Rectangle(path.handleBounds);
rect.strokeColor = 'red';

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

Сравнение с обычными bounds

Свойство Учитывает Пример использования
bounds Только сегменты Проверка попадания точки внутрь объекта
handleBounds Сегменты + ручки Выравнивание объектов с кривыми, визуализация полного экстремума кривой

Важно: При трансформациях (масштабирование, поворот) handleBounds обновляется автоматически, так же как bounds, но может иметь более крупные значения из-за изгибов кривой.

Применение в интерактивных сценах

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

  2. Выравнивание и компоновка При создании интерфейсов с множеством кривых можно выравнивать объекты по их handleBounds, чтобы их внешние концы совпадали.

var path1 = new Path.Circle(new Point(100, 100), 50);
var path2 = new Path.Circle(new Point(200, 150), 30);

// Выравнивание по левому краю с учётом ручек
path2.position.x = path1.handleBounds.left + path2.handleBounds.width / 2;
  1. Анимация кривых Можно анимировать объекты с учётом их handleBounds, чтобы избежать пересечения управляющих точек с другими элементами сцены.

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

  • При сложных путях всегда использовать handleBounds для точного измерения размеров.
  • Для проверки видимости объекта на канвасе и столкновений лучше применять handleBounds.
  • handleBounds особенно полезно при использовании smooth() или ручной коррекции кривых, когда сегменты визуально выходят за пределы bounds.

Важные методы, связанные с handleBounds

  • path.bounds – возвращает прямоугольник без ручек
  • path.handleBounds – прямоугольник с ручками
  • path.bounds.contains(point) – проверка попадания точки в основной прямоугольник
  • path.handleBounds.contains(point) – проверка с учётом ручек

Итоговая концепция

handleBounds позволяет точно учитывать экстремальные точки кривых, что критично для точного позиционирования, визуализации и интерактивного редактирования сложных объектов в Paper.js. Без этого свойства корректное отображение кривых с ручками становится затруднительным, так как обычный bounds может недооценивать размеры объекта.

Оглавление