Cocos2d-js 3.10 ccui:Button及其子控件cc.Label

Cocos Studio 中的Button上是自帶文本的，如下圖所示

但是這個Button上的“文本”並沒有像Text那樣有開放描邊、陰影的接口，下圖是Text在Cocos Studio中的接口

通常情況下我們可能會在Button上添加一個Text設置描邊和陰影，但是這樣的話按鈕點擊時，Button的點擊效果（縮放）並沒有在子控件Text上體現（Text無縮放效果），所以這也是弊端！

Button上自帶的Text實際上就是cc.Label，如下圖所示

既然是cc.Label那麼對應的cc.Label的API也是有的，只不過我們要手動代碼設置。

ccui.Button有個接口是setTitleText即設置cc.Label的顯示內容，但是如果我們手動設置了cc.Label的位置，那麼調用此setTitleText時會產生一個問題就是位置會被重新設置回去詳見C++代碼，如下圖

void Button::setTitleText(const std::string& text)
{
    if (text == getTitleText())
    {
        return;
    }
    if(nullptr == _titleRenderer)
    {
        this->createTitleRenderer();
    }
    _titleRenderer->setString(text);
    this->setTitleFontSize(_fontSize);
    updateContentSize();
    updateTitleLocation();
}

setTitleText方法會調用updateTitleLocation()；方法重置ccui.Button上的文本位置到中心。

void Button::updateTitleLocation()
{
    _titleRenderer->setPosition(_contentSize.width * 0.5f, _contentSize.height * 0.5f);
}

如果我們想設置cc.Label的位置，而且不想被重置，我們就不要調用ccui.Button的setTitleText()方法，可以直接設置cc.Label的string，如下所示：

var render = this.getTitleRenderer();
render.setPositionY(0);
render.setString("測試按鈕："+Math.random()*100000);

同樣render也可以設置描邊(enableOutline)、陰影(enableShadow)等。