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