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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="example-container" style="width:400px;height:400px"></div>
<script type="text/javascript" src="zrender.js"></script>
<script>window.onload = function() {var container = document.getElementsByClassName('example-container')[0];var zr = zrender.init(container);zr.add(new zrender.Rect({shape: {width: 100,height: 100},style: {fill: "#6cb3e9"},position:[150,150],zlevel: -1}));zr.add(new zrender.Rect({shape: {width: 40,height: 40},style: {fill: "#ffd366"},position:[200,200]}));zr.add(new zrender.Rect({shape: {width: 200,height: 200},style: {fill: "#ff9c7a"},position:[100,100],zlevel: -2}));}
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="example-container" style="width:400px;height:400px"></div>
<script type="text/javascript" src="zrender.js"></script>
<script>window.onload = function() {var container = document.getElementsByClassName('example-container')[0];var zr = zrender.init(container);var w = zr.getWidth();var h = zr.getHeight();var elementStyle = {stroke: '#ccc',fill: 'white'};var group = new zrender.Group();for (var i = 0; i < 10; ++i) {var r = 50 * Math.random() + 20;var circle = new zrender.Circle({shape: {cx: 0,cy: 0,r: r},position: [(w * 0.6 - r * 2) * Math.random() + r + w * 0.2,(h * 0.6 - r * 2) * Math.random() + r + h * 0.2],style: elementStyle,name:'cir'+i  //设置名称});group.add(circle);}zr.add(group);//通过名称找到元素var myCir=group.childOfName('cir8');myCir.animateTo({style:{fill:'#6cb3e9'}})}
</script>
</body>
</html>

zrender zlevel层叠控制和Group使用笔记相关推荐

《TCP/IP详解卷1：协议》第6章 ICMP：Internet控制报文协议-读书笔记
章节回顾: <TCP/IP详解卷1:协议>第1章概述-读书笔记 <TCP/IP详解卷1:协议>第2章链路层-读书笔记 <TCP/IP详解卷1:协议>第3章 IP ...
机电传动控制第二周学习笔记
机电传动控制第二周学习笔记经过第二周的学习,我了解了电机的发展历史.从奥斯特发现电生磁的现象,到法拉第电磁回转实验,再到后来的电机一步步的发展至今.它充满了巧合,但是它又必然一步步向更完美走去.电机 ...
机电传动控制第一周学习笔记
机电传动控制第一周学习笔记: 1 这一周主要讲述了概论和机电传动控制系统动力学基础两个章节内容. 2 绪论中说明了<机电传动控制>课程主要内容为下图所示: 3机电传动控制系统动力学基础章节 ...
【STM32】ESP8266 WiFi模块实时上报温湿度及控制LED灯项目笔记
ESP8266 WiFi模块实时上报温湿度及控制LED灯项目笔记一.ESP8266模块 1.模块介绍 2.AT指令介绍 2.硬件连接二.串口转发及调试 1.串口转发流程 2.串口转发程序实现 ST ...
树莓派用c语言pwm控制电机,树莓派学习笔记之PWM控制直流电机转速
树莓派控制PWM控制电机转速一.硬件树莓派 12V直流电机 L298N电机驱动器 220V转12V变压器二.连线树莓派与L298N需要共地 L298N驱动模块树莓派接线三.树莓派pytho ...
飞思卡尔微控制与MSCAN ----自学笔记
概述飞思卡尔半导体是全球最大的半导体公司之一. 飞思卡尔是车用半导体微控制器(MCU)领域排名第一的供应商. 飞思卡尔在业内提供最高质量的Flash存储器. 飞思卡尔的微控制器按CPU字长分为8位. ...
意念控制四旋翼学习笔记
第一部分:模块原始数据拿到模块,在网上查了一圈,发现基本没什么有用的资料,很多都是一些相关但是没有实际价值的东西.许多论文都是再谈怎么去做,而没有实实在在的去完成这么一个过程. 废话不多说,直接步入 ...
电机控制电流环设计笔记
参考: b站:豪底狄:<PID调节器>第一部分:电流环设计 InstaSPIN-FOC™ 和 InstaSPIN-MOTION™用户指南阅读TI的文档,把陈博的视频又看了一遍,自己整理抄 ...
机电传动控制_简要复习笔记
目录第一章绪论 1.什么是机电传动?机电传动的目的是什么? 2.机电系统经历了哪几个阶段?控制系统经历了哪几个阶段? 第二章机电传动系统动力学基础 1.单轴拖动系统的运动方程式是什么? ...

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

zrender zlevel层叠控制和Group使用笔记相关推荐

最新文章

热门文章