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

 

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

1         //图层定位,以屏幕中心偏移 2         var offsetX = 0; 3         var offsetY = 0; 4         //图层大小 5         var clipWidth = 600; 6         var clipHeight =400; 7         //圆角半径 8         var radius =25; 9         //圆角层实现代码10         var size = cc.winSize;11         var stencil = new cc.DrawNode();12         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));13         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));14         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));15         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));16         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));17         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));18         var clippingPanel = new cc.ClippingNode();19         clippingPanel.stencil = stencil;20         //层颜色21         var layer = new cc.LayerColor(cc.color(255,0,0),clipWidth,clipHeight);22         layer.x = (size.width-clipWidth)/2+offsetX;23         layer.y = (size.height-clipHeight)/2+offsetY;24         //层透明度25         layer.opacity = 200;26         clippingPanel.addChild(layer);27         this.addChild(clippingPanel);

 

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

描述:界面示例

图片:layer.png