zrender.js 是一个轻量级的二维绘图引擎-BFW插件库

zrender.js 是一个轻量级的二维绘图引擎

ZRender.js 是一个轻量级的二维绘图引擎，可为 Apache ECharts 提供 2d 绘制。它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts2的渲染器。

使用方式：

第一步引入zrender.js

第二步准备dom

 <div id="container" style="width: 800px; height: 800px;"></div>

第三步初始化

var zr = zrender.init(document.getElementById('container'));

常用绘制图形

zrender.Rect 绘制矩形

zrender.Circle 绘制圆形

zrender.Polyline 绘制线条

还支持Droplet、Heart等20多种形状的绘制

完整示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" ,maximum-scale=1.0,minimum-scale=1.0>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zrender.js"></script>

</head>

<body>

    <div id="container" style="width: 800px; height: 800px;"></div>

    <script>
        //初始化dom对象
        const zrder = zrender.init(document.getElementById('container'));

        //开始绘制

        //绘制矩形
        //实例化矩形对象
        const rect = new zrender.Rect({
            shape: {
                x: 0,
                y: 0,
                height: 50,
                width: 50
            },
            style: {
                fill: 'yellow',
                lineWidth: 2
            }
        })
        //添加矩形对象到zrder上面
        zrder.add(rect)

        //绘制线段
        const line = new zrender.Polyline({
            shape: {
                points: [
                    [80, 80],
                    [190, 120],
                    [300, 200]
                ]
            },
            style: {
                stroke: 'red',
                lineWidth: 2,
            }
        })
        zrder.add(line)

        //更改属性，先创建一个矩形
        const rect2 = new zrender.Rect({
            shape: {
                x: 60,
                y: 100,
                height: 50,
                width: 50
            },
            style: {
                fill: 'blue',
                lineWidth: 2
            }
        })
        zrder.add(rect2)
        //修改颜色从蓝色变为绿色
        rect2.attr('style', {
            fill: 'green'
        });

        //绘制圆形
        var circle = new zrender.Circle({
            shape: {
                cx: 150,
                cy: 50,
                r: 40
            },
            style: {
                fill: 'none',
                stroke: '#F00'
            }
        });
        zrder.add(circle);

        //绘制心
        var heart = new zrender.Heart({
            shape: {
                cx: 350,
                cy: 200,
                width: 40,
                height: 50,
            },
            style: {
                fill: 'red',
                stroke: '#F00'
            }
        });
        zrder.add(heart);

        //绘制水滴
        var droplet = new zrender.Droplet({
            shape: {
                cx: 150,
                cy: 250,
                width: 10,
                height: 30,
            },
            style: {
                fill: 'none',
                stroke: 'brown'
            }
        });
        zrder.add(droplet);

    </script>
</body>

</html>

zrender.js 是一个轻量级的二维绘图引擎

网友评论0

vconsole.js

ntc.js

classie.js

jquery.wheelOfFortune.js

guagua.js

qrcode.js

tracking-min.js

Scratch.js

crossroads.js

jscapture.js