2-ClippingNode

简介
cocos的源码里是这么介绍的

/** ClippingNode is a subclass of Node.
 * It draws its content (children) clipped using a stencil.
 * The stencil is an other Node that will not be drawn.
 * The clipping is done using the alpha part of the stencil (adjusted with an alphaThreshold).
 */

• ClippingNode是Node的子类。
• 它通过一个模板节点去裁剪添加到它的子节点。
• 模板节点不会被渲染出来。
• 是通过Alpha通道来实现裁剪的。什么是Alpha通道？

再补充一下自己的使用心得

• 模板可以是美术同事给的一张图，也可以是自己用代码写的一个DrawNode。
• Alpha通道在我看来就是像素透明度。不同于图片透明度。像素透明度指一个像素是否有效，是否对那张图片做了贡献。假如是个透明的像素，那它对图片的贡献就是0。
• setInverted(true或者false)裁剪成模板里面还是外面。

代码如下，毕竟talk is cheap

//第一种方法：通过图片去裁剪
//这张图的路径cocos2d-x-3.17/tests/cpp-tests/Resources/Images/hole_effect.png
auto stencil = Sprite::create("res/hole_effect.png");
auto clip = ClippingNode::create(stencil);
clip->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
clip->setAlphaThreshold(0.05);
clip->setInverted(true);
this->addChild(clip);
//这张图的路径cocos2d-x-3.17/tests/cpp-tests/Resources/Images/MagentaSquare.png
auto content = Sprite::create("res/MagentaSquare.png");
clip->addChild(content);

//第二种方法：通过绘图节点去裁剪，这种方法不需要setAlphaThreshold
auto stencil = DrawNode::create();
const int cnt = 720;//用多少个点来画一个圆
int r = 10;//圆的半径
Vec2 arr[cnt];//组成圆的每个点的横纵坐标
for (int i = 0; i < cnt; I++)
{
    arr[i].x = r * cos( (360.0f/cnt) * i * (M_PI/180) );
    arr[i].y = r * sin( (360.0f/cnt) * i * (M_PI/180) );
}//不要写成360/cnt，脸一黑
stencil->drawPolygon(arr, cnt, Color4F::BLUE, 0, Color4F::ORANGE);
auto clip = ClippingNode::create(stencil);
clip->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
clip->setInverted(true);
this->addChild(clip);
auto content = Sprite::create("res/MagentaSquare.png");
clip->addChild(content);

//第三种方法：失败了
/*DrawNode还有drawDot()和drawCircle()两个方法。我原以为会是一种比drawPolygon()更简单的办法。
但实际试了一下，直接画出来的图形是圆的，但是作为裁剪节点的模版去裁剪的话，是方的。😂*/
auto stencil = DrawNode::create();
stencil->drawDot(Vec2(0, 0), 10, Color4F::BLUE);
auto clip = ClippingNode::create(stencil);
clip->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
clip->setInverted(true);
this->addChild(clip);
auto content = Sprite::create("res/MagentaSquare.png");
clip->addChild(content);