Graphics.hitArea not triggering interaction when mask attached

I think I found a bug in pixi.js.

If I add a mask like this:

this.container = new PIXI.Container();

var mask = new PIXI.Graphics();
//mask.beginFill(0x000000); <-- note I'm not calling this line
mask.drawRect(0,0,500,500);

this.addChild(mask);
this.container.mask = mask;

When I run this, I do see that the mask is clipping the content but the interaction is not working, only after I added beginFill(0x000000) it started clipping and allowing interaction.

Maybe it’s just a mistake on my side, but I spent almost an hour figuring this out. I initially thought I had to set filterArea (which according to the comments in the source is also responsible for interaction clipping in v4, which was hard to find in the docs) in order to get interaction to work.

Maybe this is not so much of a bug as a documentation issue, I just didn’t know how to get masking + interaction working. Turns out, I just needed to call beginFill(0x000000) on the masking object.

[staff0rd]

@ricklamers actually it does look like a bug here. I tried setting hitArea on the graphics object and the handlers are not triggered. Currently the only work around is to use beginFill.

I’ll write some tests to help determine where the issue is - won’t be able to do this until around 24 hours from this post however. For now i’ll mark this as a bug.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.