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)等。