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

最新文章

  1. 网页万能排版布局插件,web视图定位布局创意技术演示页
  2. SpringFramework的简介
  3. ios中的addChildViewController 和 android中的fragment
  4. kafka使用
  5. 用Qt写软件系列一:QCacheViewer(浏览器缓存查看器)
  6. Plus One Linked List
  7. Lazarus IDE的几个小技术
  8. Memcached常用命令及使用说明(转)
  9. Android - Ant自动编译打包android项目 -- 1(转)
  10. SQL 根据时间和打印状态抽取记录
  11. MEF初体验之十:部件重组
  12. Servlet Filter 中init和destroy问题
  13. LeetCode174-Dungeon Game-数组,动态规划
  14. 安装vue-cli时-4058报错的解决方法
  15. ftp 两台服务器传输文件 apache
  16. webpack使用四
  17. AngularJS参数绑定 --AngularJS
  18. Axure 实现批量的勾选和反选
  19. bzoj1600
  20. Ubuntu 18.04 搜狗输入法无法切换到英文输入

热门文章

  1. 阿里云mysql远程登录报ERROR 2027(HY000)
  2. PostgreSQL+PostGIS安装以及使用
  3. PHP进阶-网络编程基础概念
  4. MiniHook研究
  5. kafka后台启动的命令
  6. Mongodb的下载和安装
  7. javascript语法(一) 极客时间
  8. 运行Maven工程中修改tomcat端口
  9. npm 安装包报错 rollbackFailedOptional
  10. 运行python文件时出错SyntaxError: Non-UTF-8 code starting with '\xb5' in file, but no encoding declared;