cocos2d-x JS 纯代码实现人物头像裁剪

有时候为了方便会直接用颜色层和过渡层来显示一些信息,但层只有方角没有圆角不太美观,于是我用剪切节点实现了一个圆角层.方便以后使用.

 

当然，如果使用Cosos Studio 操作会更好一些，省去了坐标裁剪计算等问题，可以一步到位

        //图层定位,以屏幕中心偏移
        var offsetX = 0;
        var offsetY = 0;
        //图层大小
        var clipWidth = 600;
        var clipHeight =400;
        //圆角半径
        var radius =25;
        //圆角层实现代码
        var size = cc.winSize;
        var stencil = new cc.DrawNode();
        stencil.drawRect(cc.p((size.width-clipWidth)/2+offsetX,(size.height-clipHeight)/2+offsetY+radius),cc.p(size.width/2+clipWidth/2+offsetX,size.height/2+clipHeight/2+offsetY-radius),cc.color(0,0,0),1,cc.color(0,0,0));
        stencil.drawRect(cc.p((size.width-clipWidth)/2+offsetX+radius,(size.height-clipHeight)/2+offsetY),cc.p(size.width/2+clipWidth/2+offsetX-radius,size.height/2+clipHeight/2+offsetY),cc.color(0,0,0),1,cc.color(0,0,0));
        stencil.drawCircle(cc.p(size.width/2-clipWidth/2+offsetX+radius,size.height/2-clipHeight/2+offsetY+radius),radius/3,0,100,false,radius,cc.color(0,0,0));
        stencil.drawCircle(cc.p(size.width/2+clipWidth/2+offsetX-radius,size.height/2-clipHeight/2+offsetY+radius),radius/3,0,100,false,radius,cc.color(0,0,0));
        stencil.drawCircle(cc.p(size.width/2+clipWidth/2+offsetX-radius,size.height/2+clipHeight/2+offsetY-radius),radius/3,0,100,false,radius,cc.color(0,0,0));
        stencil.drawCircle(cc.p(size.width/2-clipWidth/2+offsetX+radius,size.height/2+clipHeight/2+offsetY-radius),radius/3,0,100,false,radius,cc.color(0,0,0));
        var clippingPanel = new cc.ClippingNode();
        clippingPanel.stencil = stencil;
        //层颜色
        var layer = new cc.LayerColor(cc.color(255,0,0),clipWidth,clipHeight);
        layer.x = (size.width-clipWidth)/2+offsetX;
        layer.y = (size.height-clipHeight)/2+offsetY;
        //层透明度
        layer.opacity = 200;
        clippingPanel.addChild(layer);
        this.addChild(clippingPanel);

这段代码可以直接拷贝,放入刚创建的游戏app.js中以演示.

描述:界面示例
图片:layer.png