ZRender 强大的二维绘图引擎

Question

ZRender 强大的二维绘图引擎，一个轻量级的 Canvas 类库，使用 MVC 封装，数据驱动，提供类 Dom 事件模型，让 Canvas 绘图大不同。

Architecture

MVC 核心封装实现图形仓库、视图渲染和交互控制：

• Stroage(M) : shape数据CURD管理
• Painter(V) : canvas 元素生命周期管理，视图渲染，绘画，更新控制
• Handler(C) : 事件交互处理，实现完整dom事件模拟封装
• shape : 图形实体，分而治之的图形策略，可定义扩展
• tool : 绘画扩展相关实用方法，工具及脚手架

特色

简单

无需 Canvas 基础，精简的接口方法，符合 AMD 标准，易学易用。

require(
  ['zrender/zrender'],
  function(zrender) {
    // just init to get a zrender Instance
    var zr = zrender.init(document.getElementById('main'));
    // zr can be used now!
    ...
  }
);

数据驱动

利用 zrender 绘图，你只需做的是定义图形数据，剩下的事情就交给 zrender，只要在你定义图形数据时设置 draggable 属性为 true，图形拖拽就已经可用了。

zr.addShape({
  shape : 'circle',
  style : {
    x : 100, 
    y : 100, 
    r : 50, 
    color : 'rgba(220, 20, 60, 0.8)'
  }
});
zr.render();

完整的事件封装

用你再熟悉不过的 dom 事件模型去操作 canvas 里的图形元素是件很cool的事情，你不仅可以响应 zrender 全局事件，你甚至可以为在特定shape上添加特定事件，后续发生的一切都会按你想的那样去运行。

zr.addShape({
shape : 'circle',
style : {...},
  // 图形元素上绑定事件
  onmouseover : function(params) {concole.log('catch you!')}
});

// 全局事件
zr.on('click', function(params) {alert('Hello, zrender!')});

高效的分层刷新

正如 css 中 zlevel 的作用一样，你可以定义把不同的 shape 分别放在不同的层中，这不仅实现了视觉上的上下覆盖， 更重要的是当图形元素发生变化后的refresh将局限在发生了变化的图形层中，这在你利用 zrender 做各种动画效果时将十分有用， 性能自然也更加出色。

zr.addShape(shapeA);  // shapeA.zlevel = 0; (default) 
zr.addShape(shapeB);  // shapeB.zlevel = 1;
zr.render();

zr.modShape(shapeB.id, {color:'red'}); 
// Don't worry! Is merge!

zr.refresh();  
// Just the level 1 canvas has been refresh~

丰富的图形选项

当前内置多种图形元素（圆形、椭圆、圆环、扇形、矩形、多边形、直线、曲线、心形、水滴、路径、文字、图片等），统一且丰富的图形属性充分满足你的个性化需求。

var myShape = {
  shape : 'circle',   // sector | ring | rectangle | ...
  zlevel : 1,
  style : {
    ... // color | strokeColor | text | textFont | ... 
  },
  draggable : true
};

强大的动画支持

提供 promise 式的动画接口和常用缓动函数，轻松实现各种动画需求。

var circle = {
  shape : 'circle',
  id : zr.newShapeId(),
  style : {
    x : 0,
    y : 0,
    r : 50
  }
};
zr.addShape(circle);
zr.animate(circle.id)
  .when(1000, {
    position : [100, 100]
  })
  .when(2000, {
    rotation : [Math.PI*2, 0, 0]
  })
  .start();

易于扩展

分而治之的图形定义策略允许你扩展自己独有的图形元素，你既可以完整实现三个接口方法（brush、drift、isCover）， 也可以通过 base 派生后仅实现你所关心的图形细节。

function MyShape() { ... }

var shape = require('zrender/shape');
shape.define('myShape', new MyShape());   // define your shape

zr.addShape({                 // and use it!
  shape : 'myShape',
  ...
});

开始使用 ZRender

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

下载 ZRender

ZRender 项目在 GitHub 上的地址是：https://github.com/ecomfe/zrender。也可以使用 npm install zrender 下载。

在 dist 目录下找到 zrender.js 和 zrender.min.js，前者是开发版，后者是发布版。

引入 ZRender

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

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

初始化 ZRender

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

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

创建出的这个实例对应文档中 zrender 实例部分的方法和属性。

在场景中添加元素

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 将保持不变。
});

请参考文档了解更多。

相关资料

• ZRender 下载：https://github.com/ecomfe/zrender
• ZRender 官网：http://ecomfe.github.io/zrender/
• ZRender 中文文档：https://www.wenjiangs.com/docs/zrender