Cocos2d-x：裁剪节点圆角矩形（将节点处理成圆角）

核心：

1、首先需要使用上节提到的ClippingNode进行裁剪；

2、绘制圆角矩形模版；

3、用模版去裁剪；

定义静态方法：

    ClippingNode* drawRoundRect(Node *newNode, float radius, unsigned int segments);

具体实现：

/*
 * @brief        画圆角矩形模版，并裁剪节点
 * @param        origin            矩形开始点
 * @param        destination        矩形结束点
 * @param        radius            圆角半径
 * @param        segments        圆角等份数，等份越多，圆角越平滑
 * @attention
 */
ClippingNode* MapLayer::drawRoundRect(Node* newNode, float radius, unsigned int segments){
    Point origin = newNode->getPosition();
    Point destination = Point(newNode->getPosition().x + newNode->getContentSize().width, newNode->getPosition().y + newNode->getContentSize().height);
    
    ClippingNode* pClip = ClippingNode::create();
    
    pClip->setInverted(false);//设置是否反向，将决定画出来的圆是透明的还是黑色的
    pClip->setAnchorPoint(Point(0, 0));
    
    //算出1/4圆
    const float coef = 0.5f * (float)M_PI / segments;
    Point * vertices = new Point[segments + 1];
    Point * thisVertices = vertices;
    for (unsigned int i = 0; i <= segments; ++i, ++thisVertices)
    {
        float rads = (segments - i)*coef;
        thisVertices->x = (int)(radius * sinf(rads));
        thisVertices->y = (int)(radius * cosf(rads));
    }
    //
    Point tagCenter;
    float minX = MIN(origin.x, destination.x);
    float maxX = MAX(origin.x, destination.x);
    float minY = MIN(origin.y, destination.y);
    float maxY = MAX(origin.y, destination.y);
    
    unsigned int dwPolygonPtMax = (segments + 1) * 4;
    Point * pPolygonPtArr = new Point[dwPolygonPtMax];
    Point * thisPolygonPt = pPolygonPtArr;
    int aa = 0;
    //左上角
    tagCenter.x = minX + radius;
    tagCenter.y = maxY - radius;
    thisVertices = vertices;
    for (unsigned int i = 0; i <= segments; ++i, ++thisPolygonPt, ++thisVertices)
    {
        thisPolygonPt->x = tagCenter.x - thisVertices->x;
        thisPolygonPt->y = tagCenter.y + thisVertices->y;
        // log("%f , %f", thisPolygonPt->x, thisPolygonPt->y);
        ++aa;
    }
    //右上角
    tagCenter.x = maxX - radius;
    tagCenter.y = maxY - radius;
    thisVertices = vertices + segments;
    for (unsigned int i = 0; i <= segments; ++i, ++thisPolygonPt, --thisVertices)
    {
        thisPolygonPt->x = tagCenter.x + thisVertices->x;
        thisPolygonPt->y = tagCenter.y + thisVertices->y;
        // log("%f , %f", thisPolygonPt->x, thisPolygonPt->y);
        ++aa;
    }
    //右下角
    tagCenter.x = maxX - radius;
    tagCenter.y = minY + radius;
    thisVertices = vertices;
    for (unsigned int i = 0; i <= segments; ++i, ++thisPolygonPt, ++thisVertices)
    {
        thisPolygonPt->x = tagCenter.x + thisVertices->x;
        thisPolygonPt->y = tagCenter.y - thisVertices->y;
        // log("%f , %f", thisPolygonPt->x, thisPolygonPt->y);
        ++aa;
    }
    //左下角
    tagCenter.x = minX + radius;
    tagCenter.y = minY + radius;
    thisVertices = vertices + segments;
    for (unsigned int i = 0; i <= segments; ++i, ++thisPolygonPt, --thisVertices)
    {
        thisPolygonPt->x = tagCenter.x - thisVertices->x;
        thisPolygonPt->y = tagCenter.y - thisVertices->y;
        // log("%f , %f", thisPolygonPt->x, thisPolygonPt->y);
        ++aa;
    }
    
    //设置参数
    static Color4F red(1, 0, 0, 1);//顶点颜色设置为红色，参数是R,G,B,透明度
    
    //注意不要将pStencil addChild
    DrawNode *pStencil = DrawNode::create();
    pStencil->drawPolygon(pPolygonPtArr, dwPolygonPtMax, red, 0, red);//绘制这个多边形
    
    pStencil->setPosition(Point(0, 0));
    
    pClip->setStencil(pStencil);
    
    pClip->addChild(newNode, 1);
    pClip->setContentSize(newNode->getContentSize());
    
    CC_SAFE_DELETE_ARRAY(vertices);
    CC_SAFE_DELETE_ARRAY(pPolygonPtArr);
    
    return pClip;
}

其中，实现了圆角矩形模板、并根据模板才用ClippingNode对newNode节点进行裁剪。

调用：

 // 裁剪圆角
    auto newCardNode = CSLoader::createNode("node_layer.csb");
    
    // 裁剪圆角
    auto newNode = this->drawRoundRect(newCardNode, 16, 200);
    newNode->setPosition(cardNode->getPosition());
    newNode->setScale(0.85);
    rootNode->addChild(newNode, 4);//4
    oldNode->setVisible(false);

将裁剪后的Node加入到我们自己的根节点rootNode，替换原来的oldNode，并将oldNode设置为InVisible。这样我们就得到了裁剪后的圆角矩形。