zrender zlevel层叠控制和Group使用笔记

       在使用zrender的过程中发现的,如果想要设置不同层次的元素,可以通过设置zlevel。如果不设置的话默认zlevel为0。

设置zlevel为-1,则它会在zlevel0的下面一层,设置的整数越大,则它会在越上层的位置。每一个不同的zlevel将产生一个独立的canvas,相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层,canvas对象增多会消耗更多的内存和性能,并不建议设置过多的zlevel。

      下面的例子放置了三个正方形,分别设置其zlevel为-1,0,-2。可以看到不管其添加顺序如何,整数越大的层都会在越上层,实际上生成了三个canvas。




    
    Title



zrender zlevel层叠控制和Group使用笔记_第1张图片


zrender.Group使用起来很方便,其API基本上包含了需要常用的一些功能,这里讲一下childOfName方法,返回特定名字的子元素。可以通过name查找到对应元素,可以省去自己遍历查找对应元素的麻烦,下面是使用childOfName的一个示例。

zrender zlevel层叠控制和Group使用笔记_第2张图片




    
    Title




你可能感兴趣的:(JavaScript,ZRender)