CreatorPrimer | 从zIndex开始
1. 引言
从Cocos2d-x/lua/js过来的老鸟们肯定发现了,在CocosCreator属性检查器中Node节点竟然没有zIndex属性。
可就因为这一点,UI节点的遮挡关系控制不便,经常让策划、测试、甚至老板经常找程序员麻烦。不知道大家有没想过要用编辑器去控制zIndex呢,请思考一下?我发现自己是用了CocosCreator快一年才去想到这个问题的。
2. zIndex的编辑器实现
那怎么去做呢,请看下面代码:
/**
*SetZIndex.js 控制组件
**/
cc.Class({extends: cc.Component,//编辑器属性定义properties: {zIndex: 0},onLoad () {this.node.zIndex = this.zIndex;}
});
代码非常简单,将这个组件脚本挂载到任意节点上,通过zIndex属性就能控制节点的zIndex了。
但上面的代码还是有点小问题,不知道你看出来没有?
3. 问题
上面的代码有两个小问题,不仔细还不易被发现:
zIndex:0 这样的属性定义zIndex是一个浮点数类型,你可以在编辑器设置0.1这样的值。运行在浏览器或H5环境没什么问题,但跑在原生环境zIndex对应的是cocos2d-x中的Node::setLocalZOrder(int localZOrder)函数,它的参数类型是整型。
这个组件只在onLoad时设置了节点的zIndex,如果运行过程中,给这个组件的zIndex属性赋值没有任何作用,并且在编辑器中,你设置zIndex也看不到节点层级的变化。
4. 改进
知道问题了就好办了,看下面代码:
/**
*SetZIndex.js 控制组件
**/
cc.Class({extends: cc.Component,//编辑器属性定义properties: {zIndex: {type: cc.Integer, //使用整型定义default: 0,//使用notify函数监听属性变化notify(oldValue) {//减少无效赋值if (oldValue === this.zIndex) {return;}this.node.zIndex = this.zIndex;}}},onLoad () {this.node.zIndex = this.zIndex;}
});
使用一个对象来定义zIndex属性,同时监听zIndex的修改,问题解决。
5. 小结
SetZIndex组件它不依赖任何其它组件和节点,可以挂载任意节点,它是一个通用的组件。不要小看了这个组件的设计,它蕴涵了CocosCreator的组件编程模式和思想。
你有使用类似SetZIndex组件的模式编写可复用的组件代码?欢迎留言交流。
关注「奎特尔星球」微信公众号,我们一起成长。
CreatorPrimer | 从zIndex开始相关推荐
- CreatorPrimer|从zIndex开始
1. 引言 从Cocos2d-x/lua/js过来的老鸟们肯定发现了,在CocosCreator属性检查器中Node节点竟然没有zIndex属性. 可就因为这一点,UI节点的遮挡关系控制不便,经常让策 ...
- css z-index 的使用
z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面. 注意: 1 元素可拥有负的 z-index 属性值. 2 Z-index 仅能在定位元素上奏效(例如 ...
- CSS之定位(元素的层级z-index)
元素的层级z-index: <!DOCTYPE html> <html><head><meta charset="UTF-8">&l ...
- css:z-index
针对position: absolute; 解决position:relative;z-index固定定位层级显示问题 转载于:https://blog.51cto.com/13507333/2352 ...
- excel html modify,在Excel 2010中修改Series对象上的Z-index(Modify Z-index on Series object in Excel 2010)...
在Excel 2010中修改Series对象上的Z-index(Modify Z-index on Series object in Excel 2010) 我正在使用excel 2010. 我有一个 ...
- z-index 用法
现在来说说关于z-index的用法,刚刚在写看页面的时候遇见这样的CSS代码,z-index : 2; 当时还不知道是干嘛用的,也不知道有什么作用,上网查了资料才知道. 几个例子吧,当你在需要把页面中 ...
- 你不知道的z-index
关于z-inde w3c描述 (z-index ) 每个元素都具有三维空间位置,除了水平和垂直位置外,还能在 "Z轴" 上层层相叠.排列.元素在 "Z轴" ...
- 2015.7.13 第五课 课程重点(z-index、overflow、浏览器兼容性)
1.z-index=数字 z轴的值,当几个div重叠时,z-index数字越大的,越在上面 2.overflow:hidden(超过部分隐藏)/auto(超过时出现滚动框)/scroll(一直有滚动条 ...
- 关于z-index介绍
兄弟级关系之间存在定位才能用z-index,并且z-index的值越大,图层的位置越上层. 父子级关系用z-index,父元素和子元素之间还是可以作比较的!!!只是需要我们把子元素的z-index值设 ...
最新文章
- Javascript与正则表达式个人总结与收录--高级篇
- EL表达式介绍(1)
- 探秘Tomcat——一个简易的Servlet容器
- 生产环境可以用吗_小型熔喷布设备可以生产出好的熔喷布吗?
- jQuery动画的显示与隐藏效果!
- python字符串title函数_python字符串内建函数-capitalize、title、upper
- Python中float(‘inf‘)代表什么意思?
- Visual C++2010的使用
- 【动态规划】完全背包问题
- 2019春季学期第十一周作业
- 对软件工程实践课程的预定目标
- JSONArray.fromObject(list) list转json报错
- Mimics17.0安装教程
- 差分 离散化 (线段树优化lazy标记)2018ICPC SouthEastern Fishermen
- 用米粒填充国际棋盘python
- C语言——类型限定词
- 全球顶级的14位程序员大神!
- Word2vec与LDA的聚类区别
- 计算机应用基础教程ppt 洪歧,计算机应用基础案例教程(清华)
- 大趋势:科技赋能产业