cocos2dx中ClippingNode實現帶邊框圓形頭像
阿新 • • 發佈:2019-02-04
有個小需求,需要實現一個圓形的頭像。要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; }