在PIXI.js中如何避免精灵中alpha透明区域的交互性(点击等)

How to avoid interactivity (click etc.) on alpha transparent zones in sprites in PIXI.js

本文关键字:交互性 区域 透明 js PIXI 何避免 alpha 精灵      更新时间:2023-09-26

我加载了一个六边形。png,由于alpha值,未填充的区域是透明的。当用户单击该按钮时,我希望他只能单击非透明区域,以避免在六边形对齐时矩形边界上的重叠事件。是否有任何函数或属性能够做到这一点?

可以设置精灵的hitArea。它可以是矩形、圆形或多边形。对于一个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。