ClippingNode

http://www.mamicode.com/info-detail-247772.html

http://cn.cocos2d-x.org/tutorial/show?id=1662必看  文字遮罩 、 图片遮罩

裁切节点

模板：作为裁剪区域参考的节点

底板：需要被裁减的节点，即ClippingNode

模板的区域大小将在底板中被抠除，先创建ClippingNode，然后讲需要被裁减的元素添加作为其子节点，这样，就可以裁剪其全部子节点了

stencil  /'stensɪl/   模版

Swallow  /'swɒləʊ/ 吞没

EventListenerTouchOneByOne 表示的是单点触摸；而EventListenerTouchAllAtOnce 表示的就是多点触摸

private :
    Size size;
    Node * node; // 模板节点

    ClippingNode* clipNode;// 被裁剪节点

.cpp中

    size = Director :: getInstance ()-> getWinSize ();
    auto bg = Sprite :: create ( "HelloWorld.png" );
    bg-> setPosition ( size / 2 );
    addChild (bg);
    auto target = Sprite :: create ( "target.jpg" );
    target-> setPosition ( size / 2 );
   
    node = Node :: create ();
    // 创建一个没有模板的裁剪节点
    clipNode = ClippingNode :: create ();
    // 设置模板
    clipNode -> setStencil ( node );
   
    // 或者创建一个带有模板的裁剪节点
    //clipNode = ClippingNode::create(node);
   
    // 设置底板可见
    clipNode -> setInverted ( true );

    // 设置绘制模板的 alpha 值为 0 

//我们在裁剪图片的时候 一般图片都是带有透明区域的，如果不设置透明值，那么裁剪的区域都是图片的原本的大小，即一块矩形区域，如果图片内容是不规则，那么是无法显示出来形状的

    clipNode -> setAlphaThreshold ( 0 );
    addChild ( clipNode );
    clipNode -> addChild (target);
   
   
    auto listener = EventListenerTouchOneByOne :: create ();
    listener-> onTouchBegan = [ this ]( Touch *t, Event *e){
       
       
        Point pos = t-> getLocation ();
        // 每次点击屏幕，在点击处添加射击效果图片，该图片也需要被打穿
        auto holdBg = Sprite :: create ( "hole_effect.png" );
        holdBg-> setPosition (pos);
        clipNode -> addChild (holdBg);
       
        // 将弹孔添加到模板上，造成底板裁剪洞口形状
        auto hold = Sprite :: create ( "hole_stencil.png" );
        hold-> setPosition (pos);
        node -> addChild (hold);
       
        return false ;
    };
   
    Director :: getInstance ()-> getEventDispatcher ()-> addEventListenerWithSceneGraphPriority (listener, this );