介绍

ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

Github

https://github.com/ecomfe/zrender

安装使用

npm install zrender

在使用 ZRender 前，需要在 HTML 中加载对应 JavaScript 文件：

<script src="./dist/zrender.js"></script>

• 初始化 ZRender

在使用 ZRender 前需要初始化实例，具体方式是传入一个 DOM 容器：

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

• 在场景中添加元素

ZRender 提供了将近 20 种图形类型，可以在文档 zrender.Displayable 下找到。如果想创建其他图形，也可以通过 zrender.Path.extend 进行扩展。

以创建一个圆为例：

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

创建了一个圆心在 [150, 50] 位置，半径为 40 像素的圆，并将其添加到画布中。

• 修改图形元素属性

通过 a = new zrender.XXX 方法创建了图形元素之后，可以用 a.shape 等形式获取到创建时输入的属性，但是如果需要对其进行修改，应该使用 a.attr(key, value) 的形式修改，否则不会触发图形的重绘。例子：

var circle = new zrender.Circle({
    shape: {
        cx: 150,
        cy: 50,
        r: 40
    }
});
zr.add(circle);

console.log(circle.shape.r); // 40
circle.attr('shape', {
    r: 50 // 只更新 r。cx、cy 将保持不变。
});

实例代码

<div class="example-container"></div>

<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 circle = new zrender.Circle({
        shape: {
            cx: w / 2,
            cy: h / 2,
            r: 50
        },
        style: {
            fill: '#FF6EBE'
        },
        draggable: true
    });

    var heart = new zrender.Heart({
        shape: {
            cx: w / 2 + 20,
            cy: h / 2 - 40,
            width: 60,
            height: 80
        },
        draggable: true
    });

    circle.setClipPath(heart);
    zr.add(circle);

    var borderA = new zrender.Circle({
        shape: {
            cx: w / 2,
            cy: h / 2,
            r: 50
        },
        style: {
            fill: 'transparent',
            stroke: '#5ACFFF'
        }
    });
    zr.add(borderA);

    var borderB = new zrender.Heart({
        shape: {
            cx: w / 2 + 20,
            cy: h / 2 - 40,
            width: 60,
            height: 80
        },
        style: {
            fill: 'transparent',
            stroke: '#5ACFFF'
        }
    });

    zr.add(borderB);
}
</script>

• 效果

其它示例

截图不清晰可参考官方案例