【新手分享】ClippingNode的使用

Cocos2d-x JavaScript
#1 

【图片裁剪】
就是将一张图片，在给定的位置，按照给定的形状（模版），把图片中的某部分给裁掉(使其“透明”，可直接看到该图片的下一层)
var HelloWorldLayer = cc.Layer.extend({
    ctor:function () {
        this._super();
        var size = cc.winSize;
        var bg = cc.LayerColor.create(cc.color(255,255,255));
        this.addChild(bg);

        //var stencil = this.getStencilByPic()//获取模版
        var stencil = this.getStencilByShape();
        var clipper = new cc.ClippingNode(stencil);
        clipper.setInverted(true);//true:用模版形状来剪图; false:用底板形状来剪图
        //clipper.setAlphaThreshold(0);//设置绘制底板的Alpha值为0
        this.addChild(clipper);

        var content = new cc.Sprite("res/HelloWorld.png");
        content.setScale(0.5);
        clipper.addChild(content);
        clipper.setPosition(size.width/2, size.height/2);
        return true;
    },
    getStencilByPic:function(){
        //以一张正方形的图片的形状作为模版
        var pic = new cc.Sprite("res/CloseNormal.png");
        return pic;
    },
    getStencilByShape:function(){
        //以四个点确定的形状作为模版。至少要三个点才能确定形状
        var stencil = new cc.DrawNode();
        var rectangle = 
            cc.p(0, 0),
            cc.p(50, 0),
            cc.p(50, 50),
            cc.p(0, 50)
        ];
        var color = cc.color(0,78,165,255);//蓝紫色
        stencil.drawPoly(rectangle, color, 50, color);//这个颜色设置就是个摆设，没效果，我也不知道为什么
        return stencil;
    }
});
var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});
#2

第一次发帖，求罩，搞了一下午，终于弄出效果来了，tests 中的例子，看的真是头疼，不够简单明了，来这里搜索又搜索不到，最后终于在开发者文档中找到了。开发者文档中，对概念的描述，我难以理解，我以我的理解方式来理解的

#3

手动过来给个赞

#4

你这个打成安卓的包，使用clipingnode会出错吗？

#5

太好了，正好遇到这个问题。lz给力！