源码解读之zrender(1)

简介

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

为什么要看源码

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

源码设计大体结构

image.png

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

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

参考文档:zrender 完全不指北

猜你喜欢

转载自blog.csdn.net/jexxx/article/details/128842947