源码解读之zrender(1)

简介

zrender(官方文档)是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式， 也是 echarts 的渲染器。

为什么要看源码

• 好奇zrender的事件系统是如何设计的
• 好奇zrender的渲染速度为什么这么快，大数据场景为什么不卡顿
• 业务需求，判断一个点是否在某某元素上，目前不知道如何实现
• 官方文档看起来更新不及时，很多的名词解释也不太懂
• 官方例子太少，有一些属性不会用

源码设计大体结构

还没开始看源码，网上比较流传的是这张图。大体分为三个模块：shape, animation, tool。其中我认为tool可以忽略不看，大部分是数学相关，shape就是基础图形的实现，比如rect, circle, line, polygon等，animation应该是动画相关。

这三个模块是怎么运动起来的呢？图中说明，整个系统采用了MVC架构，M是数据储存中心，V是视图，将信息显示给用户，C是控制器，处理用户输入的信息。控制器接受输入，视图和控制器共同构成了用户接口。当用户操作时，控制器负责控制用户输入，并向模型发送数据(CRUD)，处理完成后回调通知视图(call)，视图从模型数据读取信息®执行渲染。

参考文档：zrender 完全不指北