HitResult и его свойства

HitResult — это объект, который возвращается методами, связанными с обнаружением пересечений и попаданий по объектам в Paper.js. Основное предназначение HitResult — предоставить детальную информацию о том, где и как произошло взаимодействие между курсором, точкой или другим объектом и графическим элементом сцены.

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

type

Свойство type определяет тип попадания. Оно может принимать следующие значения:

  • ‘segment’ — попадание произошло на сегмент кривой или линии.
  • ‘handle-in’ — попадание на входящую управляющую точку кривой.
  • ‘handle-out’ — попадание на исходящую управляющую точку кривой.
  • ‘fill’ — попадание в область заливки объекта.
  • ‘stroke’ — попадание по обводке объекта.
  • ‘curve’ — попадание на кривую без точного попадания в сегмент.
  • ‘bounds’ — попадание на границы объекта.
  • ‘center’ — попадание по центру объекта.
  • ‘caret’ — для текста, попадание на позицию курсора.
  • ‘pixel’ — попадание на конкретный пиксель объекта (используется для растровых элементов).

type позволяет точно определить, какой элемент объекта был выбран при взаимодействии, что особенно важно для сложных Path и CompoundPath.

item

Свойство item хранит ссылку на объект Paper.js (Path, Shape, Raster, TextItem и другие), с которым произошло попадание. Через это свойство можно получить полный доступ к объекту и его методам для дальнейшей обработки.

Пример использования:

var hit = project.activeLayer.hitTest(point);
if (hit) {
    console.log(hit.item.fillColor); // получение цвета объекта, на который произошло попадание
}

point

Свойство point содержит объект типа Point, который обозначает точное место попадания на объект. Это координаты в локальной системе координат Paper.js, что позволяет использовать их для построения новых элементов или анимации.

segment

Если type равен 'segment', свойство segment возвращает объект типа Segment, на который произошло попадание. Через него можно получить доступ к координатам сегмента, его управляющим точкам (handleIn, handleOut) и изменять кривую напрямую.

if (hit && hit.type === 'segment') {
    hit.segment.point.x += 10; // сдвиг сегмента по оси X
}

curve

Свойство curve используется при попадании на кривую между сегментами. Оно возвращает объект типа Curve, позволяющий анализировать форму кривой, её длину, направление и параметры кривизны.

location

Свойство location — объект типа CurveLocation, который предоставляет более детальную информацию о положении попадания на кривой. С помощью location можно узнать:

  • curve — кривую, на которой произошло попадание.
  • parameter — нормализованное положение попадания на кривой (от 0 до 1).
  • point — координаты попадания.
  • segment — ближайший сегмент кривой.

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

distance

Свойство distance показывает расстояние от указанной точки теста до фактического попадания на объект. Это число удобно для сортировки попаданий или выбора ближайшего объекта.

name и tolerance

Хотя HitResult напрямую не содержит свойства name, некоторые методы Paper.js используют дополнительные параметры tolerance для настройки точности попаданий. tolerance определяет максимальное расстояние, на котором точка считается “попавшей” в объект. Это критично для тонких линий и сложных кривых.

var hit = path.hitTest(point, { tolerance: 5 });

Использование HitResult с методами hitTest

Методы hitTest и hitTestAll возвращают объект HitResult или массив объектов HitResult соответственно. Они поддерживают гибкую настройку через опции:

  • fill — учитывать попадания в заливку.
  • stroke — учитывать попадания по обводке.
  • segments — учитывать попадания на сегменты.
  • tolerance — точность попадания.

Пример:

var hit = path.hitTest(event.point, {
    fill: true,
    stroke: true,
    segments: true,
    tolerance: 2
});

if (hit) {
    console.log('Попадание на:', hit.type, 'в точке', hit.point);
}

Важные моменты

  • HitResult обеспечивает единый интерфейс для всех видов попаданий, включая сегменты, кривые, заливки, обводки и текст.
  • Использование location и segment позволяет управлять объектами на низком уровне, что делает Paper.js мощным инструментом для интерактивной графики.
  • Для оптимальной работы с множественными объектами рекомендуется использовать hitTestAll и сортировать результаты по distance, чтобы определить ближайший объект.

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

Оглавление