zrender zlevel层叠控制和Group使用笔记-變量-匯編語言學習筆記

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

2023-09-18 阅读 20 评论 0

摘要：在使用zrender的过程中发现的，如果想要设置不同层次的元素，可以通过设置zlevel。如果不设置的话默认zlevel为0。设置zlevel为-1，则它会在zlevel0的下面一层，设置的整数越大，则它会在越上层的位置。每一个不同的zlevel将产生一个独立的can

在使用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>

原文链接：https://hbdhgg.com/2/74445.html

发表评论: