如何避免 PIXI.js 中精灵中 alpha 透明区域的交互性（点击等）答案

【问题标题】：How to avoid interactivity (click etc.) on alpha transparent zones in sprites in PIXI.js如何避免 PIXI.js 中精灵中 alpha 透明区域的交互性（点击等）
【发布时间】：2016-10-19 18:29:33
【问题描述】：

我加载了一个 hexagon.png，由于 alpha 值，它的未填充区域是透明的。当用户单击那个时，我希望他只能单击非透明区域以避免当六边形对齐在一起时矩形边框上的重叠事件。是否有任何功能或属性能够做到这一点？

【问题讨论】：

您在下面已经有了一个很好的答案，但是如果您需要计算六边形点的函数，您可能会在这里找到有用的东西：github.com/Hachitus/FlaTWorld/blob/master/src/components/map/… 我使用 coordsToPixiPoints，根据六边形半径计算正确的命中区域多边形...我已经使用了带有自定义点击检测的 hitarea（所以它如何与自动点击处理一起工作，我不太清楚），但也可能值得知道一些事情：github.com/pixijs/pixi.js/issues/2487

标签： javascript alpha pixi.js

【解决方案1】：

您可以设置 Sprite 的 hitArea。它可以是矩形、圆形或多边形。对于 200 x 200 六边形 Sprite，您可以执行以下操作：

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。

【讨论】：

这还是坏了吗？我需要在我的项目中使用多边形 hitArea。