【Cocos2d-x】节点裁剪 ClippingNode

有时候我们需要一张圆形的图片，可是美术提供的是一个矩形的资源图片，怎么办？让美术再做一张圆形的？即使这样能暂时解决问题，无疑增加了开销，何况有时候你可能需要显示一张图片里的不同部分，不可能每种情况都让美术都做一次修改吧，这时候 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的裁剪效果：

 
 

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 
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;}

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

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