首页 > 代码库 > cocos2d-x JS 纯代码实现人物头像裁剪
cocos2d-x JS 纯代码实现人物头像裁剪
有时候为了方便会直接用颜色层和过渡层来显示一些信息,但层只有方角没有圆角不太美观,于是我用剪切节点实现了一个圆角层.方便以后使用.
当然，如果使用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
图片:layer.png
cocos2d-x JS 纯代码实现人物头像裁剪
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。