浅谈 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);　　// 添加监听器到管理器