Cocos2d-x中Button的子节点如何自动缩放

问题

前段时间在使用Button的时候遇到一个问题：
在代码中创建了Button并设置了其setPressedActionEnabled为true，然后给Button添加了一个Label。在点击Button时，Button正常的进行缩放，但是其子节点Label并没有跟随进行缩放。

看源码

打开UIButton.h可以看到：
这里有三个成员变量，分别对应的是Normal、Clicled、DIsable三个状态的Node。从这里可以知道，Button的三张图片其实是加载不同的子节点上的，而不是Button本身。

protected:
    Node* _buttonNormalRenderer;
    Node* _buttonClickedRenderer;
    Node* _buttonDisableRenderer;

打开UIButton.cpp可以看到:
打开onPressStateChangedToPressed，即在按钮按下时的处理。这里可以看到在_pressedActionEnabled为true时，这边隐藏了Normal、Disable的节点，显示了Clicked的节点，并且对Clicked节点进行了缩放。

void Button::onPressStateChangedToPressed()
{
    if (_pressedTextureLoaded)
    {
        _buttonNormalRenderer->setVisible(false);
        _buttonClickedRenderer->setVisible(true);
        _buttonDisableRenderer->setVisible(false);
        if (_pressedActionEnabled)
        {
            _buttonNormalRenderer->stopAllActions();
            _buttonClickedRenderer->stopAllActions();
            Action *zoomAction = ScaleTo::create(0.05f, _pressedTextureScaleXInSize + 0.1f, _pressedTextureScaleYInSize + 0.1f);
            _buttonClickedRenderer->runAction(zoomAction);
            _buttonNormalRenderer->setScale(_pressedTextureScaleXInSize + 0.1f, _pressedTextureScaleYInSize + 0.1f);
        }
    }
    else
    {
        _buttonNormalRenderer->setVisible(true);
        _buttonClickedRenderer->setVisible(true);
        _buttonDisableRenderer->setVisible(false);
        if (_scale9Enabled)
        {
            _buttonNormalRenderer->setColor(Color3B::GRAY);
        }
        else
        {
            _buttonNormalRenderer->stopAllActions();
            _buttonNormalRenderer->setScale(_normalTextureScaleXInSize + 0.1f, _normalTextureScaleYInSize + 0.1f);
        }
    }
}

修改源码

这里采用了一种解决方式：修改Button源码。在按下或放开时，不去缩放Normal、Clicked、Disable这几个子节点，而是缩放Button本身的节点。

void Button::onPressStateChangedToNormal()
{
    _buttonNormalRenderer->setVisible(true);
    _buttonClickedRenderer->setVisible(false);
    _buttonDisableRenderer->setVisible(false);
    if (_pressedTextureLoaded)
    {
        if (_pressedActionEnabled)
        {
            //改为this执行action
            /*
            _buttonNormalRenderer->stopAllActions();
            _buttonClickedRenderer->stopAllActions();
            Action *zoomAction = ScaleTo::create(0.05f, _normalTextureScaleXInSize, _normalTextureScaleYInSize);
            _buttonNormalRenderer->runAction(zoomAction);
            _buttonClickedRenderer->setScale(_pressedTextureScaleXInSize, _pressedTextureScaleYInSize);
            */
            this->stopAllActions();
            Action *zoomAction = ScaleTo::create(0.05f, _originalScaleRatioX, _originalScaleRatioY);
            _buttonNormalRenderer->runAction(zoomAction);
        }
    }
    else
    {
        if (_scale9Enabled)
        {
            updateTexturesRGBA();
        }
        else
        {
            //改为this缩放
            /*
            _buttonNormalRenderer->stopAllActions();
            _buttonNormalRenderer->setScale(_normalTextureScaleXInSize, _normalTextureScaleYInSize);
            */
            this->stopAllActions();
            this->setScale(_originalScaleRatioX, _originalScaleRatioY);
        }
    }
}

void Button::onPressStateChangedToPressed()
{
    if (_pressedTextureLoaded)
    {
        _buttonNormalRenderer->setVisible(false);
        _buttonClickedRenderer->setVisible(true);
        _buttonDisableRenderer->setVisible(false);
        if (_pressedActionEnabled)
        {
            //改为this执行action
            /*
            _buttonNormalRenderer->stopAllActions();
            _buttonClickedRenderer->stopAllActions();
            Action *zoomAction = ScaleTo::create(0.05f, _pressedTextureScaleXInSize + 0.1f, _pressedTextureScaleYInSize + 0.1f);
            _buttonClickedRenderer->runAction(zoomAction);
            _buttonNormalRenderer->setScale(_pressedTextureScaleXInSize + 0.1f, _pressedTextureScaleYInSize + 0.1f);
            */
            this->stopAllActions();
            Action *zoomAction = ScaleTo::create(0.05f, _originalScaleRatioX + 0.1f, _originalScaleRatioY + 0.1f);
            this->runAction(zoomAction);
        }
    }
    else
    {
        _buttonNormalRenderer->setVisible(true);
        _buttonClickedRenderer->setVisible(true);
        _buttonDisableRenderer->setVisible(false);
        if (_scale9Enabled)
        {
            _buttonNormalRenderer->setColor(Color3B::GRAY);
        }
        else
        {
            //改为this缩放
            /*
            _buttonNormalRenderer->stopAllActions();
            _buttonNormalRenderer->setScale(_normalTextureScaleXInSize + 0.1f, _normalTextureScaleYInSize + 0.1f);
            */
            this->stopAllActions();
            this->setScale(_originalScaleRatioX + 0.1f, _originalScaleRatioY + 0.1f);
        }
    }
}

这里就导致了一个问题：按下时，使用this->setScale()对Button进行了缩放，在放开时怎样将Button缩放回来？

这里就需要添加2个成员变量：
···
float _originalScaleRatioX; //X原始缩放比例
float _originalScaleRatioY; //Y原始缩放比例
···
保存了原始缩放比例，那松开按钮时再缩放回去就很简单了。

这里又出现了另外一个问题：何时去保存原始比例呢？在每次setScale()的时候肯定不行，因为按钮按下时使用的就是这个函数。

所以这里需要添加一组成员函数，用于模仿setScale的操作，而且同时保存原始缩放比例:

//添加函数，用于缩放Button，这里会改变记录原始缩放比例的成员变量
void Button::setButtonScaleX(float scaleX)
{
    _originalScaleRatioX = scaleX;
    this->setScaleX(scaleX);
}
void Button::setButtonScaleY(float scaleY)
{
    _originalScaleRatioY = scaleY;
    this->setScaleY(scaleY);
}
void Button::setButtonScale(float scale)
{
    _originalScaleRatioX = scale;
    _originalScaleRatioY = scale;
    this->setScale(scale);
}
void Button::setButtonScale(float scaleX, float scaleY)
{
    _originalScaleRatioX = scaleX;
    _originalScaleRatioY = scaleY;
    this->setScale(scaleX, scaleY);
}

这样就可以实现：
在按下按钮时，按钮放大，其子节点跟随按钮一起放大
在松开按钮时，按钮恢复原大小，其子节点跟随按钮一起恢复

这里有一点需要注意的是：当我们添加按钮后，希望对按钮进行缩放操作时，需要使用setButtonScale()函数，因为使用setScale()时，不会保存原始大小，导致按下松开按钮后，按钮会恢复到1.0倍大小。

---

如果有什么bug，或者更好的实现方式，请在评论区留言分享你的想法~~