我的生活，我的點點滴滴！！

可以根據一個模板切割圖片的節點--ClippingNode。這個類提供了一種不規則切割圖片的方式，在這種方式以前，我們可以使用紋理類

自帶的setTextureRect函式來切割矩形區域，而新特性中提供的ClippingNode最大的不同之處就是裁減將不僅僅侷限於矩形，可以根據

任何形狀進行裁減，而你要做的只是給一個“裁減模板”，首先來看這個類的常用函式（需要說明的是，這裡介紹的函式只是這個類獨

有的，這個類繼承自Node節點類，因此節點類有的函式也就不做介紹了）

下面來看看原始碼及其API:

/**
ClippingNode 是一個Node的子類，他使用"裁減模板"stencil(漏字模板，我喜歡這樣理解)

去遮擋他的內容(childs)。"裁減模板"stencil也是一個node結點，不會被draw。

怎麼產生效果了？裁剪是通過設定"裁減模板"stencil的alpha值來鏤空其中的一些區域。

作為節點，它就可以用作容器，承載其他節點和精靈。我把它叫底板。

如果想要對一個節點進行裁剪，那需要給出裁剪的部分，這個裁剪區域，我把它叫模版。

CCClipingNode裁剪節點在組成上=底板+模版，而在顯示上=底板-模版。

**/

class CC_DLL ClippingNode : public Node
{
public:
	//建立一個沒有stencil的裁剪node
    static ClippingNode* create();
    
	//建立一個帶有stencil的裁剪node，並且些stencil會被自動retain
    static ClippingNode* create(Node *stencil);

    /** The Node to use as a stencil to do the clipping.
     The stencil node will be retained.
     This default to nil.
     */
    Node* getStencil() const;
    void setStencil(Node *stencil);
    
	//底板內容被裁剪只有設定alpha的值小於stencil模板的值，那麼stencil區域就會裁剪掉，
	//所以如果我們設定clipper的alpha小於1，去裁剪底板。
    GLfloat getAlphaThreshold() const;
    void setAlphaThreshold(GLfloat alphaThreshold);
    
	/**
		這個用來設定顯示的部分：
		1、裁剪掉的部分
		2、剩餘的部分
		inverted預設是false，那就是顯示被裁剪掉的部分，如果設定成true，那就是顯示剩餘部分。
	**/
    bool isInverted() const;
    void setInverted(bool inverted);
	
};
 

我列出了部分我們極度需要的函式介面及其註釋。

簡單的描述一下，使用ClippingNode的流程：

1、建立”裁剪模板“stencil

2、建立裁剪結點ClippingNode(設定他兩的位置相同)

3、為裁剪結點ClippingNode設定stencil

4、設定裁剪結點ClippingNode中要放的內容(精靈)

上面的過程如果使用了setAlphaThreshold和setInverted這兩函式介面，就會產生不同的效果，這個按自己的需要自己去設定。上面的注

釋裡面也註明了設定這兩個引數後的效果cpp-test中的ClippingNodeTest例子講了大量的裁剪使用的方法及效果圖，後面文章有分析，這

裡實現一個類似於“濾鏡”顯示文字的ClippingNode例子。

例子1：使用精靈當stencil來裁剪LabelTTF

void HelloWorld::ClipFunc()
{
	Size s = Director::getInstance()->getWinSize();

	//建立裁剪node
	ClippingNode *clipper = ClippingNode::create();
	clipper->setAnchorPoint(Vec2(0.5,0.5));
	clipper->setPosition(Vec2(s.width * 0.5, s.height * 0.5));
	//不顯示底板
	//clipper->setInverted(true);
	//設定alpha值
	clipper->setAlphaThreshold(0.05);

	//建立一個四邊角形當content1
	DrawNode *sp = DrawNode::create();
	static Vec2 triangle[4];
	triangle[0] = Vec2(-120, -120);
	triangle[1] = Vec2(120, -120);
	triangle[2] = Vec2(120, 120);
	triangle[3] = Vec2(-120,120);
	Color4F mask(0,1,0,0.5);
	sp->drawPolygon(triangle, 4, mask, 0, Color4F(1,0,0,1));
	sp->setPosition(Vec2(50,50));
	//addChild
	clipper->addChild(sp);

	//在新增一段文字當content2
	LabelTTF *tf = LabelTTF::create("Testing long text", "Thonburi", 35);
	tf->setPosition(Vec2(50,50));
	//addChild
	clipper->addChild(tf);

	//用精靈當stencil
	Sprite *stencil = Sprite::create("bang.png");
	stencil->setPosition(Vec2(50,50));
	stencil->runAction(MoveBy::create(0.5, Vec2(60,0)));
	MoveBy *moveby = MoveBy::create(1, Vec2(-120,0));
	DelayTime *delay = DelayTime::create(0.5);
	stencil->runAction(delay);
	stencil->runAction(RepeatForever::create(Sequence::create(moveby, moveby->reverse(), NULL)));
	//設定模板
	clipper->setStencil(stencil);

	this->addChild(clipper);
}
 

例子2：使用DrawNode當stencil來裁剪精靈

void HelloWorld::ClipFunc()
{
	//自畫一個形狀來錄stencil
    DrawNode *stencil = DrawNode::create();
    static Point triangle[3];
    triangle[0] = Point(-100, -100);
    triangle[1] = Point(100, -100);
    triangle[2] = Point(0, 100);
    Color4F mask(0,1,0,1);
    stencil->drawPolygon(triangle, 3, mask, 2, Color4F(1,0,0,1));
    stencil->setPosition(Point(50,50));

    //裁剪node
    ClippingNode *clipper = ClippingNode::create();
    clipper->setAnchorPoint(Point(0.5,0.5));
    clipper->setPosition(Point(s.width * 0.5, s.height * 0.5));
    clipper->setAlphaThreshold(0.05);
    //clipper->setInverted(true);
    clipper->setStencil(stencil);
    this->addChild(clipper);

    //加普通物件進裁剪node，讓stencil去裁剪
    Sprite *sp = Sprite::create("bang.png");
    sp->setPosition(Point(50,50));
    sp->runAction(MoveBy::create(0.5, Point(60,0)));
    MoveBy *moveby = MoveBy::create(1, Point(-120,0));
    DelayTime *delay = DelayTime::create(0.5);
    sp->runAction(delay);
    sp->runAction(RepeatForever::create(Sequence::create(moveby, moveby->reverse(), NULL)));
    clipper->addChild(sp);

    //加普通物件進裁剪node，讓stencil去裁剪
    LabelTTF *tf = LabelTTF::create("Testing long text", "Thonburi", 35);
    tf->setPosition(Point(50,50));
    clipper->addChild(tf);
}

效果圖：

可以發現使用不同的stencil產生的效果決然不同，使用Shape(也就是自己DrawNode的形狀時),不要設定alpha的值，要不然就什麼也不顯示的。

有人留言說使用DrawNode當stencil時，形狀為圓形時，實際效果是正方形，原因估計是使用了DrawNode中的drawDot來畫的圓形吧？

DrawNode在3.x後不直接提供畫空心圓的介面了，那麼我們想要一個空心圓怎麼辦，可以使用多邊形逼近，但是鋸齒很明顯，沒研究怎麼去消除。

下面是使用空心圓作stencil來ClippingNode的效果圖，一切正常：

/*使用DrawNode畫圓當stencil*/
void HelloWorld::ClipFunc()
{
	auto s = Director::getInstance()->getWinSize();

	//自畫一個形狀來錄stencil
	DrawNode *stencil = DrawNode::create();
	stencil->setAnchorPoint(Point(0.5,0.5));
	//多邊形定點個數;
	Vec2 points[720];
	//圓心，相對座標;
	Vec2 center(0,0);
	//半徑;
	float R = 30;
	/**普及下求圓座標的方法
	* 已經半徑r、圓心座標(cX,cY)、圓心偏移角度a，求出其相應偏移角度的座標(X1,Y1);
	* X1 = cX + cos(a*3.14/180)*r;
	* Y1 = cY + sin(a*3.14/180)*r;
	*/
	// 畫空心圓->使用多邊形畫,分成720等分;
	// 鋸齒蠻明顯，不知道怎麼消除鋸齒;
	for( int i=0; i < 720; i++)
	{
		float x = center.x + cos(0.5*i*3.14/180) * R;
		float y = center.y + sin(0.5*i*3.14/180) * R;
		points[i] = Vec2(x,y);
		log("%f,%f", x, y);
	}
	//畫多邊形;
	stencil->drawPolygon(points, sizeof(points)/sizeof(points[0]), Color4F(0,1,0,0), 1, Color4F(1,0,0,1));
	stencil->setPosition(Point(50,50));

	//裁剪node
	ClippingNode *clipper = ClippingNode::create();
	clipper->setAnchorPoint(Point(0.5,0.5));
	clipper->setPosition(Point(s.width * 0.5, s.height * 0.5));
	//clipper->setAlphaThreshold(0.05);
	//clipper->setInverted(true);
	clipper->setStencil(stencil);
	this->addChild(clipper);

	//加普通物件進裁剪node，讓stencil去裁剪
	Sprite *sp = Sprite::create("grossini.png");
	//sp->setScale(4);
	sp->setPosition(Point(50,50));
	sp->runAction(MoveBy::create(0.5, Point(60,0)));
	MoveBy *moveby = MoveBy::create(1, Point(-120,0));
	DelayTime *delay = DelayTime::create(0.5);
	sp->runAction(delay);
	sp->runAction(RepeatForever::create(Sequence::create(moveby, moveby->reverse(), NULL)));
	clipper->addChild(sp);

	//加普通物件進裁剪node，讓stencil去裁剪
	/*LabelTTF *tf = LabelTTF::create("Testing long text", "Thonburi", 35);
	tf->setPosition(Point(50,50));
	clipper->addChild(tf);*/
}