Cocos Creator基礎（八）cc.Button使用1，添加按鈕的方法2，按鈕的過渡效果:3，按鈕添加響應事件 --> 節點–>元件 --> 代碼的函數

cc.Button使用

• 1，添加按鈕的方法
• 2，按鈕的過渡效果:
• 3，按鈕添加響應事件 --> 節點-->元件 --> 代碼的函數
• 4，注意：
• 5，代碼添加Button以及綁定觸發的事件
• • (1)建立一個精靈
  • (2)綁定相關事件以及屬性
• 6，代碼觸發cc.Button事件

1，添加按鈕的方法

(1)直接建立帶Button元件的節點;
(2)先建立節點，再添加元件;
           

2，按鈕的過渡效果:

過渡: 普通狀态, 滑鼠滑動到物體上, 按下狀态, 禁用狀态
(1)沒有過渡，隻有響應事件;
(2)顔色過渡, 過渡效果中使用顔色;
(3)精靈過渡，使用圖檔過渡;
(4)縮放過渡, 選項，在disable的時候是否置灰;
(5)Enable Auto Gray Effect 禁用
           

3，按鈕添加響應事件 --> 節點–>元件 --> 代碼的函數

clickBtn: function (e, str) {  //e是事件對象，str是傳的參數
        cc.log(e, str)
    },
           

4，注意：

Button響應這個觸摸點選，是以Button所挂的這個節點，一定要有大小,如果你向大小(0,0)的節點上，挂一個Button,這個是無法響應點選事件;

5，代碼添加Button以及綁定觸發的事件

(1)建立一個精靈

(2)綁定相關事件以及屬性

onLoad() {
        // 建立一個新button 并将其挂載到建立的精靈下
        this.new_btn = this.node.getChildByName("red_btn").addComponent(cc.Button)
        // 添加一個響應函數
        var click_event = new cc.Component.EventHandler()
        // 找到目前節點
        click_event.target = this.node
        // 找到目前腳本
        click_event.component = "btn_event"
        // 綁定響應函數
        click_event.handler = "red_btn_fn"
        //所傳參數
        click_event.customEventData = "test1"
        // 将事件添加到事件組
        // this.new_btn.clickEvents = [click_event]  
        // 或
        this.new_btn.clickEvents.push(click_event)
    },

    red_btn_fn: function (e, str) { //代碼建立的按鈕綁定的事件
        cc.log(str)  //test1
    },
           

詳情可以參考Component.EventHandler 類型

6，代碼觸發cc.Button事件

cc.Class({
    extends: cc.Component,
    properties: {
    },
    onLoad() {
        // 建立一個新button 并将其挂載到建立的精靈下
        this.new_btn = this.node.getChildByName("red_btn").addComponent(cc.Button)
        // 添加一個響應函數
        var click_event = new cc.Component.EventHandler()
        // 找到目前節點
        click_event.target = this.node
        // 找到目前腳本
        click_event.component = "btn_event"
        // 綁定響應函數
        click_event.handler = "red_btn_fn"
        //所傳參數
        click_event.customEventData = "test1"
        // 将事件添加到事件組
        // this.new_btn.clickEvents = [click_event]  
        // 或
        this.new_btn.clickEvents.push(click_event)


        // 代碼觸發事件，而不是觸摸buttom
        this.scheduleOnce(() => {
            var eventList = this.new_btn.clickEvents
            for (var i = 0; i < eventList.length; i++) {
                var item_bundle = eventList[i]
                // 觸發響應函數
                item_bundle.emit(["", "test2"])  //模拟傳參 會傳兩個參數 e不傳 test2為第二個參數
            }
        })
    },

    red_btn_fn: function (e, str) { //代碼建立的按鈕綁定的事件
        cc.log(str)  //test2
    },
    // clickBtn: function (e, str) {  //e是事件對象，str是傳的參數
    //     cc.log(e, str)
    // },
    start() {
    },
    // update (dt) {},
});