Cocos2dx BlendFunc以及用其来实现裁切出不同形状的精灵

1、概念 
“混合”是指两种颜色的叠加方式。在新图片将要渲染画到屏幕上的时候，将用在新图片中的红、绿、蓝和透明度信息，与屏幕上已经存在的图片颜色信息相融合。 
说的具体一点，就是把某一像素位置上原来的颜色和将要画上去的颜色，通过某种方式混在一起，从而实现特殊的效果。 
新图片颜色被称作“源颜色”，而屏幕上已存在的图片颜色则被称作“目标颜色”。 
OpenGL会把源颜色和目标颜色各自取出，并乘以一个系数（源颜色乘以的系数称为“源因子”，目标颜色乘以的系数称为“目标因子”），然后相加，这样就得到了新的颜色。

2、计算公式 
假设：颜色信息的四个分量（红，绿，蓝，透明度）

（1）“源颜色” ：（Rs, Gs, Bs, As）

（2）“目标颜色”：（Rd, Gd, Bd, Ad）

（3）“源因子” ：（Sr, Sg, Sb, Sa）

（4）“目标因子”：（Dr, Dg, Db, Da）

那么混合产生的新颜色可以表示为：

（Rs*Sr + Rd*Dr , Gs*Sg + Gd*Dg , Bs*Sb + Bd*Db , As*Sa + Ad*Da）

如果颜色的某一分量超过了1.0，则它会被自动截取为1.0，不需要考虑越界的问题。

3、混合因子

GL_ZERO 全部不用 （0 , 0 , 0 , 0） 
GL_ONE 全部使用 （1 , 1 , 1 , 1） 
GL_SRC_COLOR 使用源颜色 （Rs , Gs , Bs , As） 
GL_DST_COLOR 使用目标颜色 （Rd , Gd , Bd , Ad） 
GL_ONE_MINUS_SRC_COLOR 减去源颜色 （1-Rs , 1-Gs , 1-Bs , 1-As） 
GL_ONE_MINUS_DST_COLOR 减去目标颜色 （1-Rd , 1-Gd , 1-Bd , 1-Ad） 
GL_SRC_ALPHA 使用源颜色的透明度 （As , As , As , As） 
GL_DST_ALPHA 使用目标颜色的透明度 （Ad , Ad , Ad , Ad） 
GL_ONE_MINUS_SRC_ALPHA 减去源颜色的透明度 （1-As , 1-As , 1-As , 1-As） 
GL_ONE_MINUS_DST_ALPHA 减去目标颜色的透明度 （1-Ad , 1-Ad , 1-Ad , 1-Ad）

4、使用方法 
Sprite精灵类中有一个设置混合方式的函数setBlendFunc(BlendFunc)，另外混合方式的属性值是以BlendFunc结构体作为数据的，定义方式为：{ ‘源因子’ , ‘目标因子’ }。

混合方式可用于精灵纹理图片颜色信息的混合与叠加。

方法一：通过ClippingNode去创建

local stencil = cc.Sprite:create("common/Z_user_mark.png");
	local clipper =cc.ClippingNode:create();
	clipper:setStencil(stencil);--设置裁剪模板 --3
	clipper:setInverted(false);--设置底板可见
	clipper:setAlphaThreshold(0) ----设置绘制底板的Alpha值为0
	self:addChild(clipper);

	local content = cc.Sprite:create("common/headpicture_2.png");--被裁剪的内容
	clipper:addChild(content);--5

	clipper:setPosition(80,200)

5、举例

//目标图片，已存在于屏幕上 
Sprite* sp1 = Sprite::create("red.jpg"); 
sp1->setPosition(mysize/3); 
this->addChild(sp1); 

//源图片，新图片 
Sprite* sp2 = Sprite::create("green.jpg"); 
sp2->setPosition(mysize/3.0*2.0); 
this->addChild(sp2); 

//混合方式，新图片渲染时的混合方式 { 源因子 , 目标因子 } 
BlendFunc cbl = { GL_SRC_ALPHA , GL_ONE }; 
sp2->setBlendFunc(cbl);

效果图如下 
（1）{ GL_SRC_ALPHA , GL_ONE }

（2）{ GL_ONE , GL_ZERO } 

（3）{ GL_ZERO, GL_ONE } 

（4）{ GL_ONE, GL_ONE } 

（5）{ GL_SRC_ALPHA , GL_ONE } 
跟上图一样，是因为“源颜色”的透明度为 1。

以上内容参考 http://shahdza.blog.51cto.com/2410787/1547633

6、裁切圆形 
首先要准备一张白色的圆形图片作为遮罩，circle.png 

Size visibleSize = Director::getInstance()->getVisibleSize();

auto circle = Sprite::create("circle.png");
circle->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));

auto sprite = Sprite::create("HelloWorld.png");
sprite->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));

//目标图片即要裁切的图片，和作为遮罩的图片的大小要一样
sprite->setScaleX(circle->getContentSize().width / sprite->getContentSize().width);
sprite->setScaleY(circle->getContentSize().height / sprite->getContentSize().height);

//设置遮罩图片的混合属性
BlendFunc cirBlend = { GL_ONE, GL_ZERO };
circle->setBlendFunc(cirBlend);

//设置目标图片的混合属性
BlendFunc sprBlend = { GL_DST_ALPHA, GL_ZERO };
sprite->setBlendFunc(sprBlend );

addChild(circle);
addChild(sprite);

效果如下： 
      

如此类推，可以通过这种方法得到各种不同形状的精灵，当然也可以通过ClippingNode去创建。