cocos2dx 3.X 利用clippingNode把圖片裁剪成圓形

ClippingNode簡介

先簡單了解一下clippingNode類的使用。顧名思義，首先它是一個node，可以做為其他sprite，node的容器，而且是一個可以裁剪的node。如何裁剪，如何定義一套裁剪的規則出來。這里可以使用一張圖片，根據圖片的分辨率或者有效像素進行裁剪，或者自己畫出來一個裁剪區域，根據這個區域進行裁剪。那這個圖片或者畫出來的區域，就是模板，clippingNode根據模板進行圖片的裁剪。

主要方法：

 static ClippingNode* create(Node *stencil);//create函數中傳入一個模板，可以是一個sprite，也可以是一個drawNode（自定義的圖形）

GLfloat getAlphaThreshold() const;  

void setAlphaThreshold(GLfloat alphaThreshold); 

這個方法比較重要。設置alpha的值，跟圖片的透明度有關，默認是1，就是圖片中所有像素點都顯示出來。包括透明區域。一般想不顯示透明區域，則設置為0.05。
下面講的裁剪圖片的方法，也可以使用一個圓形的圖片，中間鏤空。那么就需要設置setAlphaThreshold，如果不設置的話，裁剪出來的圖片就是正方形的，是圖片的實際大小。

bool isInverted() const;  
void setInverted(bool inverted);//顯示裁剪的部分，還是被裁剪的部分

CirCularNode 圓形圖片類

寫這個類有兩種方法。一種是，讓美術給切一個圓形的圖片，中間鏤空，以這個圓形圖片做為clippingNode的模板去裁剪，但必須要設置setAlphaThreshold(0.05)。

另一種方法就是下面代碼所示，就不麻煩美術了，能省幾KB就省幾KB吧。我們自己畫個圓形出來。只寫了一個接口，需要的可以擴展，依照注釋 看一下吧。

頭文件

#ifndef __CirCularNode__
#define __CirCularNode__

#include <stdio.h>
#include "cocos2d.h"
#include "extensions/cocos-ext.h"

class CirCularNode:public cocos2d::ClippingNode
{
public:
    CirCularNode();
    virtual ~CirCularNode();
    /**
     *  創建一個圓形clippingNode
     *
     *  @param radius 創建的圓形半徑
     *
     *  @return 返回一個剪切node
     */
    static CirCularNode* create(float radius);
    
    /**
     *  創建一個圓形的clippingNode
     *
     *  @param radius 創建的圓形半徑
     *  @param sprite 需要切呈圓形的精靈
     *
     *  @return 返回一個剪切node
     */
    static CirCularNode* create(float radius, cocos2d::Node* pNode);
    
    virtual bool init(float radius);
    
    CC_PROPERTY(cocos2d::Node*, m_clipNode, ClipNode);
};
#endif 

具體實現

#include "CirCularNode.h"
USING_NS_CC;

CirCularNode::CirCularNode()
    :m_clipNode(nullptr)
{
    
}

CirCularNode::~CirCularNode()
{
    CC_SAFE_RELEASE_NULL(m_clipNode);
}

CirCularNode* CirCularNode::create(float radius)
{
    auto pClipNode = new CirCularNode();
    if (pClipNode && pClipNode->init(radius))
    {
        pClipNode->autorelease();
    }
    else
    {
        delete pClipNode;
        pClipNode = nullptr;
    }
    return pClipNode;
}

bool CirCularNode::init(float radius)
{
    if (!ClippingNode::init())
    {
        CCLOG("CirCularNode parent init failed!");
        return false;
    }
    
    //使用drawNode畫圓形
    auto circleNode = DrawNode::create();

    //頂點坐標個數，在需要畫大圓的時候，這個值就要相應變大一點
    const int maxTrangle = 360;

    //頂點數組
    Vec2 circleVec2[maxTrangle];
    //計算圓上面的各個點的坐標
    for (int i = 0; i < maxTrangle; i ++)
    {
        float x = cosf( i * (M_PI/180.f)) * radius;
        float y = sinf( i * (M_PI/180.f)) * radius;
        circleVec2[i] = Vec2(x, y);
    }

    //顏色
    auto circleColor = Color4F(0, 1, 0, 1);
    circleNode->drawPolygon(circleVec2, maxTrangle, circleColor, 1, circleColor);

    //設置clippingNode的模板類
    setStencil(circleNode);
    return true;
}

CirCularNode* CirCularNode::create(float radius, Node* pNode)
{
    auto clipNode = CirCularNode::create(radius);
    if (clipNode)
    {
        clipNode->setClipNode(pNode);
    }

    return clipNode;
}

void CirCularNode::setClipNode(Node* pNode)
{
    CC_SAFE_RELEASE_NULL(m_clipNode);
    m_clipNode = pNode;
    CC_SAFE_RETAIN(m_clipNode);
    
    addChild(pNode);
}

Node* CirCularNode::getClipNode()
{
    return m_clipNode;
}