求助:如何控制只让图像遮罩的可视区域响应点击

  • Creator 版本:1.6.1
  • 目标平台:all

使用 Mask 创建遮罩时发现,当 Mask 的 type 是 Rect 或者 Ellipse 的时候, 整个节点可点击的热点区域就是当前的可视区域。

然而,当 Mask 的 type 是 Image Stencil 的时候,整个节点的可点击区域就是整个节点的大小。

如上图所示,点击按钮1、按钮3、按钮4时,能够正确响应,而点击按钮2时,却是按钮1做出了响应。
这是因为按钮1的点击区域并没有被裁剪,依然是整个mask的节点大小。

这是 bug 吗?有什么解决办法?

附上完整工程,可供调试:

maskbuttons.zip (217.1 KB)

https://github.com/cocos-creator/engine/blob/master/cocos2d/core/components/CCMask.js#L49

你可以看一下 RECT类型和ELLIPSE类型处理方式完全不一样
因为没有仔细看 所以大概的情况是 ELLIPSE真正的把图片处理为椭圆形或者圆形了 但是 RECT和Image Stencil没有这么做 依然是个矩形 然后挡住了你的按钮点击 这不是BUG

道理是这么说,但你所说的不是bug只是实现上的“不是bug”。
然而,从功能上说,几种mask类型在体验上出现了不一致,而且目前似乎没有简单的办法能够达到预期的效果,这是功能上的不完美。
所以,我个人觉得 Image Stencil 也应该加上对可点击范围的裁剪处理,保证体验上的一致。

现在的解决方案是从像素值入手:

在点击的时候,从顶层 mask 开始,逐层取出 mask 的 SpriteFrame,判断 pixel 值。

  • 如果等于 0 ,说明当前层当前位置处于遮罩区外,不响应点击,继续判断下一层;
  • 如果不等于 0 ,说明当前层当前位置处于遮罩区内,响应点击。

大哥你这个自定义遮罩吗?还是图片?

用图片来做遮罩

现在2.0.9了,这个问题依然没有优化