cocos2d-x JS 纯代码实现人物头像裁剪
2017-05-06 01:53
471 查看
有时候为了方便会直接用颜色层和过渡层来显示一些信息,但层只有方角没有圆角不太美观,于是我用剪切节点实现了一个圆角层.方便以后使用.
当然,如果使用Cosos Studio 操作会更好一些,省去了坐标裁剪计算等问题,可以一步到位
这段代码可以直接拷贝,放入刚创建的游戏app.js中以演示.
描述:界面示例
图片:layer.png
当然,如果使用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
相关文章推荐
- 超实用的Andoird圆形头像设置 —— 实现相机、相册选择并裁剪尽在一行代码之间(兼容Android6.0/7.0)
- 【代码】JCrop头像剪辑预览+后端实现
- JS仿flash上传头像效果实现代码
- cocos2d-x系列笔记(9.1)---浅谈cocos2d-x使用函数指针实现委托(上)---通过c#代码理解委托
- 使用Flash结合PHP实现头像的无刷新上传与裁剪
- php实现视频拍照上传头像功能实例代码
- 两行代码实现随机头像
- 【Cocosd2d实例教程四】Cocos2d实现人物原地走动
- cocos2d中镜头随着人物走实现方法
- 自己写代码实现android的图片裁剪。
- jquery随机展示头像的实现代码
- JS仿flash上传头像效果实现代码
- 上传头像进行裁剪——jQuery + HttpHandler 实现图片裁剪(适用于论坛, SNS)【转】
- javascript 随机展示头像实现代码
- cocos2d-x for xna实现人物不同方向行走
- 结合jquery插件实现头像裁剪
- 基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
- 【代码】JCrop头像剪辑预览+后端实现
- cocos2d-x中实现区域裁剪
- jquery随机展示头像的实现代码