有個小需求，需要實現一個圓形的頭像。要ui設計直接給圓形的png當然可以，但這種解決方式總是不優雅。然後就在網上查了半天，最終找到了使用ClippingNode來實現的方法。

關於ClippingNode，有一篇十分詳細的文章，推薦一下：

作者寫得十分詳細，並且分析了兩個十分有用的例子。

這裡稍微總結一下，也熟悉一下其中原理。

一、原理

ClippingNode，有三個相關實體：模板(Stencil)、底板、Layer，其原理就是將模板做為遮罩，遮罩本身不渲染，透過遮罩對底板進行裁剪，最後將裁剪後的結果放在Layer層上。

簡單來說遮罩上有不同的形狀和透明區域（是否透明由setAlphaThreshold來指定，小於指定值的都算透明），根據形狀來將裁剪底板，裁剪後當做一個節點，可以和普通node一樣任意擺放。

當然，也可以根據透明區域去裁剪，由setInverted(true)來指定。

二、實現帶邊框圓形頭像

現在我們就可以來實現上面說到的功能了。其實有了上面的知識儲備，想要什麼形狀的頭像都可以了

1、為什麼要帶邊框

開始嘗試只使用ClippingNode來裁剪，確實可以將圖變成圓形，但是邊上的鋸齒嚴重，非常不好看，所以需要在外面再罩一個圓圈邊框，看上去會好很多。對比如下圖：

2、實現

實現是很簡單的，有了上面的知識儲備，就是用一張圖當模板，頭像圖片做底板，最後再蓋上一個邊框：

/*
 設定相關圖片，返回設定好後的精靈
 @param imgPath:頭像圖片路徑
 @param maskPath:模板圖片路徑
 @param circlePath:邊框路徑
 */
cocos2d::Sprite* CirSprite::setImg(const char* imgPath,const char* maskPath, const char* circlePath)
{
    auto clipNode = ClippingNode::create();
    auto mask = Sprite::create(maskPath);
    clipNode->setAlphaThreshold(0.0f);
    clipNode->setStencil(mask);
    auto img = Sprite::create(imgPath);
    //將頭像大小縮放為模板大小
    img->setScale(mask->getContentSize().width/img->getContentSize().width);
    clipNode->addChild(img);
    this->addChild(clipNode);

    auto circle = Sprite::create(circlePath);
    this->addChild(circle);
    return this;
}