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

Posted 2020-11-11 Mike丶

ImageView

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

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

 1     var imageView = new ccui.ImageView(res.BackGround_png);
 2     imageView.addTouchEventListener(touchEvent, this);
 3     
 4     // 继承widget的组件都可以使用该触摸事件
 5     function touchEvent(sender, type){
 6         switch(type)
 7         {
 8             case ccui.widget.TOUCH_BEGAN:
 9                 cc.log("Touch Down");
10                 break;
11 
12             case ccui.widget.TOUCH_MOVED:
13                 cc.log("Touch Move");
14                 break;
15 
16             case ccui.widget.TOUCH_ENDED:
17                 cc.log("Touch Up");
18                 break;
19 
20             case ccui.widget.TOUCH_CANCELED:
21                 cc.log("Touch Canceled");
22                 break;
23                 
24             default:
25                 break;
26         }

Sprite

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

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

 1 var touchListener = cc.EventListener.create({
 2         event: cc.EventListener.TOUCH_ONE_BY_ONE,
 3         /**
 4          * 可选event类型列表:
 5          *
 6          * cc.EventListener.TOUCH_ONE_BY_ONE (单点触摸)
 7          * cc.EventListener.TOUCH_ALL_AT_ONCE (多点触摸)
 8          * cc.EventListener.KEYBOARD (键盘)
 9          * cc.EventListener.MOUSE (鼠标)
10          * cc.EventListener.ACCELERATION (加速计)
11          * cc.EventListener.CUSTOM (自定义)
12          *
13          */
14 
15         swallowTouches: true, //设置吞没事件，在onTouchBegan方法返回true时吞没事件
16         status: null,
17 
18         onTouchBegan:function (touch, event)
19         {
20             console.log("在触摸东西");
21             var target = event.getCurrentTarget();
22             var pos = target.getParent().convertTouchToNodeSpace(touch); // 世界坐标转换 (子节点相对于父节点的位置)
23 
24             // 如果触碰起始地点在本区域中
25             if(!cc.rectContainsPoint(target.getBoundingBox(), pos))
26             {
27                 return false;
28             }
29 
30             return true;
31         },
32 
33         onTouchMoved:function (touch, event)
34         {
35             console.log("在移动东西");
36             var target = event.getCurrentTarget();
37             var pos = target.getParent().convertTouchToNodeSpace(touch); // 世界坐标转换 (子节点相对于父节点的位置)
38             // 如果触碰起始地点在本区域中
39             var rect = target.getBoundingBox();
40             rect.height *= 2;
41             rect.width *= 2;
42             if(!cc.rectContainsPoint(rect, pos))
43             {
44                 if(this.status == 0)
45                 {
46                     return false;
47                 }
48 
49                 this.status = 0;
50                 console.log("松开手指取消发送");
51                 return true;
52             }
53 
54             if(this.status == 1)
55             {
56                 return false;
57             }
58 
59             console.log("上滑取消发送");
60             this.status = 1;
61             return true;
62 
63         },
64 
65         onTouchEnded:function (touch, event)
66         {
67             return true;
68         },
69 
70         onTouchCancelled:function(touch, event)
71         {
72             return true;
73         }
74 
75     });
76 
77     cc.eventManager.addListener(this.touchListener, node);　　// 添加监听器到管理器