PaperJS, как найти ближайший элемент к событию мыши в элементе группы

Question

В настоящее время я пытаюсь создать интерактивный редактор для сложных и больших элементов SVG с помощью PaperJS.Все пути SVG вложены в объект Group, фактически дочерние объекты объекта Group CompoundPaths.

Я хочу иметь возможность выбрать конкретный Path в пределахGroup с помощью щелчка мыши, но я не хочу, чтобы мой сценарий был (даже больше) вычислительно тяжелым, поэтому я не хочу повторять все элементы пути (чуть менее 1000 элементов пути, да, я знаю) или попытаться добавить обработчики событий ко всем элементам пути в группе.

Я видел еще один ответ , в котором говорится о выборе ближайшей точки, но этот метод недоступен дляЭлемент группы, к сожалению, так, каков обходной путь?(если есть)

Answer 1

Этот вопрос можно решить с помощью функции .hitTest(), которая также применима к объекту Group.

При использовании события мыши, такого как «щелчок», в функции обратного вызова просто используйте точкуот события и введите его в <groupName>.hitTest().

Обратите внимание, что параметры здесь могут быть весьма важными, убедитесь, что в качестве пути указана опция 'class' (или другая подходящая производная paperJS Item, которую вы ищете. С точки зрения дополнительных опций, которые я определила длятест на попадание, чтобы определить только заполнение, так как все элементы, которые я выбрал, заполнены, если ваши элементы не заполнены, тогда установите «штрих» в true вместо «заливка», а затем убедитесь, что щелкаете по границе пути, а не по телуформа. Ниже приведен пример кода для реализации события мыши с последующим тестом нажатия:

tool.onMouseDown = function(event) {
    var result = groupItem.hitTest(event.point, {fill: true, stroke: false, segments: false, class: Path});
    console.log(result);
    result.item.selected = true;