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

最新推荐文章于 2024-10-11 17:38:58 发布

ccessl

最新推荐文章于 2024-10-11 17:38:58 发布

阅读量5.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript ZRender 文章标签： zrender zlevel zrender.Group

本文链接：https://blog.youkuaiyun.com/cc_fys/article/details/79014615

JavaScript 同时被 2 个专栏收录

30 篇文章

订阅专栏

ZRender

3 篇文章

订阅专栏

本文介绍ZRender中通过zlevel属性实现不同层级元素的显示控制，以及使用Group类的childOfName方法来查找指定名称的子元素，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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