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

Posted 2020-09-16

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

 

当然，如果使用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