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);　　// 添加監聽器到管理器

淺談 cosos2d-x 的ImageView和Sprite的區別