Как избежать интерактивности (щелчок и т.д.) в альфа-прозрачных зонах в спрайтах в PIXI.js

#javascript #alpha #pixi.js

#javascript #альфа #pixi.js

Вопрос:

Я загрузил hexagon.png, незаполненная область которого прозрачна из-за альфа-значений. Когда пользователь нажимает на эту область, я хочу, чтобы он мог щелкнуть только непрозрачную область, чтобы избежать перекрывающихся событий на границах прямоугольника, когда шестиугольники выровнены вместе. Есть ли какая-либо функция или свойство, способное это сделать?

1. У вас уже есть хороший ответ ниже, но если вам нужны функции для вычисления точек шестиугольника, вы можете найти здесь полезные материалы: github.com/Hachitus/FlaTWorld/blob/master/src/components/map/… Я использую coordsToPixiPoints для вычисления правильного многоугольника hitarea на основе радиуса шестиугольника… Я использовал hitarea с пользовательскими обнаружениями попаданий (поэтому, как это работает с автоматической обработкой щелчков, я не очень хорошо знаю), но кое-что, что, возможно, тоже стоит знать: github.com/pixijs/pixi.js/issues/2487

Ответ №1:

Вы можете установить область доступа для спрайта. Это может быть прямоугольник, круг или многоугольник. Для шестиугольного спрайта размером 200 x 200 вы могли бы сделать что-то вроде этого:

 var points = [50,0, 150,0, 200,100, 150,200, 50,200, 0,100];
sprite.hitArea = new PIXI.Polygon(points);

** обратите внимание, что это, похоже, нарушено в последней версии. Это работало в PIXI v3 и вплоть до PIXI v4.0.3.