【Cocos2d-x】节点裁剪 ClippingNode

概述有时候我们需要一张圆形的图片，可是美术提供的是一个矩形的资源图片，怎么办？让美术再做一张圆形的？即使这样能暂时解决问题，无疑增加了开销，何况有时候你可能需要显示一张图片里的不同部分，不可能每种情况都让美术都做一次修改吧，这时候 cocos2d-x 里提供的节点裁剪技术就派上用场了。 节点裁剪 原理 cocos2d-x 提供 CCClippingNode 类的可以用来对节点进行裁剪，可以根据一个模板

有时候我们需要一张圆形的图片，可是美术提供的是一个矩形的资源图片，怎么办？让美术再做一张圆形的？即使这样能暂时解决问题，无疑增加了开销，何况有时候你可能需要显示一张图片里的不同部分，不可能每种情况都让美术都做一次修改吧，这时候 cocos2d-x 里提供的节点裁剪技术就派上用场了。

节点裁剪 原理

cocos2d-x 提供 CcclipPingNode 类的可以用来对节点进行裁剪，可以根据一个模板切割节点图片，生成任何形状（取决于模板）的节点显示。

CcclipPingNode 是 CCNode 的子类，可以放入到其他 CCNode、cclayer、CCScene中。

节点裁剪是利用模板遮罩来完成对Node区域裁剪的技术，看下图：

图中的模板和底板一起构成了CcclipperNode，但是在底板上，只有模板在底板上的投影部分是可见的（或者取反，除投影以外的地方可见），底板上投影之外的地方都是不可见的（或者说是透明的），这样将CcclipperNode放到Layer中后，你看到的就是Layer中间位置有底板的部分图像，没错这部分图像就是对底板进行节点裁剪的结果。

通过下面一个例子来加深理解，图1是模板图片，图2是底板图片，这里Layer是黑色（没有任何内容），使用模板对底板进行裁剪后的结果（也就是CcclipperNode）放到Layer中，看到的效果如图3。

图 1 模板

图 2 底板

图 3 从上往下看

使用节点裁剪（CcclipperNode类）

CcclipperNode 的使用一般步骤：

创建模板和底板 创建裁剪节点（设置属性） 裁剪节点设置模板并添加底板 将裁减节点添加到其他节点中使用

下面代码实现了上面图3的裁剪效果：

                              @H_502_49@                                                              bool Scene0::init(){ if (!CCScene::init()) return false; CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize(); CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin(); CCSprite *stencil = CCSprite::create("stencil.png"); CCSprite *content = CCSprite::create("content.png"); CcclipPingNode *clipper = CcclipPingNode::create(); // 设置模板 clipper->setStencil(stencil); // 默认为false. 该值为false时，以模板中不透明区域作为模板；该值为true时，以模板中透明区域作为模板 clipper->setInverted(false);  // 默认为0.0，表示模板透明区域的Alpha阈值，其值越小模板中透明区域越小，不透明区域就越大  clipper->setAlphaThreshold(0.4f);  clipper->addChild(content); addChild(clipper); // 设置模板位置（改变该值，会改变裁剪出来的内容） stencil->setposition(ccp(0, 0));  // 设置底板位置（改变该值，会改变裁剪出来的内容）  content->setposition(ccp(0, 0));  // 设置裁剪后的节点位置（改变该位置，裁剪出来的内容不会变化） clipper->setAnchorPoint(ccp(0.5f, 0.5f));  clipper->setposition(ccp(visibleSize.wIDth/4 + origin.x, visibleSize.height/2 + origin.y));  return true;}

改变上面代码的部分参数，看看是什么效果：

反转模板，即以模板中透明部分作为模板

        clipper->setInverted(true);

将模板向右偏移 50， 底板和Layer保持不变

        stencil->setposition(ccp(50, 0));

将底板向右偏移 100， 模板和Layer保持不变（接着上一步）

        content->setposition(ccp(100, 0));

将裁剪节点向右偏移 200，模板、底板和Layer保持不变（接着上一步）

        clipper->setposition(ccp(visibleSize.wIDth/4 + origin.x + 200, visibleSize.height/2 + origin.y));

移动裁剪节点不会改变裁剪的内容，而是底板和模板整体的移动。

上面代码基于 cocos2d-x 2.x， 对于 3.x 原理和代码一样，只需要将类的CC前缀去掉就OK了。

参考：
cocos2d-x 官方文档 —— ClippingNode的使用

总结

以上是内存溢出为你收集整理的【Cocos2d-x】节点裁剪 ClippingNode全部内容，希望文章能够帮你解决【Cocos2d-x】节点裁剪 ClippingNode所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。