Cocos2d-JS项目之二：cocostudio基础控件的使用

刺骨的言语ヽ痛彻心扉 2022-08-03 00:29 132阅读 0赞

在studio里把几个基础控件往场景文件一拖，然后导出json格式的资源文件

![021701463337966.png][]

逻辑代码如下：

![复制代码][copycode.gif]

1 var HelloWorldLayer = cc.Layer.extend({
      2     sprite:null,
      3     value : 90,
      4    // self : this,
      5     ctor:function () {
      6         //
      7         // 1. super init first
      8         this._super();
      9 
     10         /////
     11         // 2. add a menu item with "X" image, which is clicked to quit the program
     12         //    you may modify it.
     13         // ask the window size
     14         var size = cc.winSize;
     15 
     16         this.initUI();
     17 
     18         return true;
     19     },
     20 
     21     //init ui
     22     initUI : function(){
     23         var mainscene = ccs.load(res.MainScene_json);
     24         this.addChild(mainscene.node);
     25 
     26         var self = this;
     27         //   btn.addClickEventListener(this.btnClick);
     28         //   addTouchEventListener(this.backEvent,this);
     29 
     30         var btn = ccui.helper.seekWidgetByName(mainscene.node, "Button_9");
     31         btn.addClickEventListener(function(){
     32                 cc.log("btn_9 click: %d", self.value);
     33             });
     34 
     35 
     36         var checkBox = ccui.helper.seekWidgetByName(mainscene.node, "CheckBox_2");
     37         this.checkBox = checkBox;
     38         checkBox.addEventListener(this.selectedStateEvent, this);
     39 
     40         //slider addClickEventListener、addTouchEventListener 事件在鼠标松开时才触发 //
     41         // addEventListener 在按住并有移动时（值不一定有改变）就触发 //
     42         var slider = ccui.helper.seekWidgetByName(mainscene.node, "Slider_2");
     43         this.slider = slider;
     44         slider.addClickEventListener(function(){
     45             var percent = slider.getPercent();
     46             cc.log("addClickEventListener   %d", percent);
     47         });
     48 
     49         slider.addTouchEventListener(function(){
     50             var percent = slider.getPercent();
     51             cc.log("addTouchEventListener   %d", percent);
     52         });
     53 
     54         slider.addEventListener(this.sliderEvent,this);
     55 
     56 
     57         var textField = ccui.helper.seekWidgetByName(mainscene.node, "TextField_3");
     58         this.textFiel = textField;
     59         textField.addEventListener(this.textFieldEvent,this);
     60 
     61         var loadingBar = ccui.helper.seekWidgetByName(mainscene.node, "LoadingBar_2");
     62         this.loadingBar = loadingBar;
     63        // loadingBar.addTouchEventListener();
     64 
     65         var label = ccui.helper.seekWidgetByName(mainscene.node, "Text_2");
     66         this.label = label;
     67 
     68         var image = ccui.helper.seekWidgetByName(mainscene.node, "Image_1");
     69         this.image = image;
     70 
     71     },
     72 
     73     selectedStateEvent: function (sender, type) {
     74         switch (type) {
     75             case ccui.CheckBox.EVENT_SELECTED:
     76                 //this._topDisplayText.setString("Selected");
     77                 cc.log("checkbox select");
     78                 this.image.setVisible(true);
     79                 break;
     80             case ccui.CheckBox.EVENT_UNSELECTED:
     81                 //this._topDisplayText.setString("Unselected");
     82                 cc.log("checkbox unselect");
     83                 this.image.setVisible(false);
     84                 break;
     85 
     86             default:
     87                 break;
     88         }
     89     },
     90 
     91     sliderEvent: function (sender, type) {
     92         switch (type) {
     93             case ccui.Slider.EVENT_PERCENT_CHANGED:
     94                 var slider = sender;
     95                 var percent = slider.getPercent();
     96                // this._topDisplayText.setString("Percent " + percent.toFixed(0));
     97                 cc.log("addEventListener   %f", percent);
     98                 this.label.setString(Math.floor(percent));//setString(percent) 会在后面多一个点， 如 123.
     99                 break;
    100             default:
    101                 break;
    102         }
    103     },
    104 
    105     textFieldEvent: function (sender, type) {
    106 
    107         switch (type) {
    108             //get focus
    109             case ccui.TextField. EVENT_ATTACH_WITH_IME:
    110                 cc.log("attach with IME");
    111                 break;
    112             //lost focus
    113             case ccui.TextField. EVENT_DETACH_WITH_IME:
    114                 cc.log("detach with IME");
    115                 break;
    116             //insert word
    117             case ccui.TextField. EVENT_INSERT_TEXT:
    118                 var text = sender.getString();
    119                 var percent = parseInt(text);
    120                 this.loadingBar.setPercent(percent);
    121               //  cc.log(text);
    122                 break;
    123             //delete word
    124             case ccui.TextField. EVENT_DELETE_BACKWARD:
    125                 //cc.log("delete word");
    126                 var text = sender.getString();
    127                 var percent = parseInt(text);
    128                 this.loadingBar.setPercent(percent);
    129                 break;
    130             default:
    131                 break;
    132         }
    133     }
    134 
    135 });

![复制代码][copycode.gif]

源引：http://www.cnblogs.com/zouzf/p/4472230.html

[021701463337966.png]: /images/20220731/e4551d077fcb4797a81234dd074ce6ed.png
[copycode.gif]: /images/20220731/f7b3dd089dc74e69bc8c3e79578dd9a7.png