CocosCreator_Button与PolygonCollider的区别

cc.Button表示按钮组件。
按钮常用于事件监听,一般为了按钮形象的美观,我们常常需要在按钮上添加Sprite组件来改变按钮的形状,然而,事件的监听范围依旧是按钮本身的范围,更有甚者,在按钮自身或者父节点进行旋转后,监听范围甚至更为广泛,类似下图我将按钮进行45°旋转后会出现这样的情况:
CocosCreator_Button与PolygonCollider的区别
这中情况下再使用按钮进行监听现象就比较奇怪了。

这时候我们就可以使用PolygonCollider组件来进行事件的监听了,首先我们需要在监听对象上添加组件
CocosCreator_Button与PolygonCollider的区别

然后进行监听范围的编辑,编辑过程如下:
点击编辑,
CocosCreator_Button与PolygonCollider的区别
然后我们编辑的范围就是我们监听的范围。这样实现的按钮监听效果更为真实。

监听部分代码如下:(这种监听类似Unity中的射线检测)

 this.polygonCollider = this.node.getComponent(cc.PolygonCollider);
       cc.eventManager.addListener({
           event: cc.EventListener.TOUCH_ONE_BY_ONE,
           onTouchBegan:(touch,event) => {
               var touchLoc = this.node.convertToNodeSpaceAR(touch.getLocation());
               //console.log(this.polygonCollider.points);           
               if(cc.Intersection.pointInPolygon(touchLoc,this.polygonCollider.points)){
                   console.log("yse is hit:");                   
               }else{
                   console.log("no is hit:");                   
               }
               return true;
           },
       },this.node);