浅谈 cosos2d-x 的ImageView和Sprite的区别

ImageView

1. ImageView是继承于Widget的，是cocos2d-x的基类

2. 实现了类似于按钮监听的事件，通过addTouchEventListener添加事件

     var imageView = new ccui.ImageView(res.BackGround_png);
     imageView.addTouchEventListener(touchEvent, this);

     // 继承widget的组件都可以使用该触摸事件
     function touchEvent(sender, type){
         switch(type)
         {
             case ccui.widget.TOUCH_BEGAN:
                 cc.log("Touch Down");
                 break;

             case ccui.widget.TOUCH_MOVED:
                 cc.log("Touch Move");
                 break;

             case ccui.widget.TOUCH_ENDED:
                 cc.log("Touch Up");
                 break;

             case ccui.widget.TOUCH_CANCELED:
                 cc.log("Touch Canceled");
                 break;

             default:
                 break;
         }

Sprite

1. Sprite类继承于Node，是cocos2dx中的渲染基类。

2. 需要通过EventListenerTouchOneByOne方式实现监听事件代码，需要根据坐标，去做精灵点击区域判断，写起来比较麻烦。

 var touchListener = cc.EventListener.create({
         event: cc.EventListener.TOUCH_ONE_BY_ONE,
         /**
          * 可选event类型列表:
          *
          * cc.EventListener.TOUCH_ONE_BY_ONE (单点触摸)
          * cc.EventListener.TOUCH_ALL_AT_ONCE (多点触摸)
          * cc.EventListener.KEYBOARD (键盘)
          * cc.EventListener.MOUSE (鼠标)
          * cc.EventListener.ACCELERATION (加速计)
          * cc.EventListener.CUSTOM (自定义)
          *
          */

         swallowTouches: true, //设置吞没事件，在onTouchBegan方法返回true时吞没事件
         status: null,

         onTouchBegan:function (touch, event)
         {
             console.log("在触摸东西");
             var target = event.getCurrentTarget();
             var pos = target.getParent().convertTouchToNodeSpace(touch); // 世界坐标转换 (子节点相对于父节点的位置)

             // 如果触碰起始地点在本区域中
             if(!cc.rectContainsPoint(target.getBoundingBox(), pos))
             {
                 return false;
             }

             return true;
         },

         onTouchMoved:function (touch, event)
         {
             console.log("在移动东西");
             var target = event.getCurrentTarget();
             var pos = target.getParent().convertTouchToNodeSpace(touch); // 世界坐标转换 (子节点相对于父节点的位置)
             // 如果触碰起始地点在本区域中
             var rect = target.getBoundingBox();
             rect.height *= 2;
             rect.width *= 2;
             if(!cc.rectContainsPoint(rect, pos))
             {
                 if(this.status == 0)
                 {
                     return false;
                 }

                 this.status = 0;
                 console.log("松开手指取消发送");
                 return true;
             }

             if(this.status == 1)
             {
                 return false;
             }

             console.log("上滑取消发送");
             this.status = 1;
             return true;

         },

         onTouchEnded:function (touch, event)
         {
             return true;
         },

         onTouchCancelled:function(touch, event)
         {
             return true;
         }

     });

     cc.eventManager.addListener(this.touchListener, node);　　// 添加监听器到管理器