echarts源码打包_Echarts源码阅读指南

前言

由于echarts是基于zrender进行实现的，所以要解读echarts源码，首先要对zrender有大致的了解，在这篇文章中，我将对zrender的整体结构进行大致的解读。

介绍

zrender是canvas的一个类库，也就是说zrender是基于canvas实现的，canvas API可以参考：W3CSchool Canvas 参考手册

在后续的解读中，我们会介绍zrender使用canvas api 的位置及用途。

目录介绍

文件夹：

animation 动画有关；

contain 包含判断；

container Group.js 元素组的概念；

core 核心代码，包含一些工具(util.js)、事件(event.js)、唯一ID(guid.js)、矩阵运算有关(matrix.js)等；

dom HandleProxy.js dom事件有关；

graphic 图形有关，shape文件夹下就是各个图形的js文件；

mixin 混入模式要混入的函数;

tool 工具函数，包括颜色工具(color.js)，path工具(path.js)和转换工具(transformPath.js);

全局的文件：

config.js 配置文件

Element.js 元素文件作为zrender最基本的元素

Handle.js C层，控制层

Layer.js 图层管理

Painter.js V层，视图层

Storage.js M层，数据管理层

zrender.js 入口

zrender整体架构

zrender采用了MVC封装，M为Model数据层，V为View视图层，C为Controller控制层：

Storage(M)：Storage为zrender中的Model层，它主要进行图形数据的增删改查(CRUD)操作；

Painter(V)：Painter为zrender中的View层，它主要对canvas元素的生命周期进行管理，渲染视图以及控制更新等。定义了addHover、setBackgroundColor等方法；

Handler(C)：Handler为zrender中的Controller层，它主要实现事件交互处理，实现完整dom事件的模拟封装。

图形

处于graphic文件夹下，zrender定义了一系列图形，供外界调用，包括圆形、矩形、心形、扇形、多边形、折线等，echarts通过调用zrender定义好的图形，可以很便捷地完成图表渲染。

Displayable

Displayable.js为Path、Text等的基类，继承自Element，定义了setStyle、useStyle等方法，

Text

文本，继承自Displayable，调用了helper/text.js中的renderText方法进行绘制。主要代码如下：

export function renderText(hostEl, ctx, text, style, rect, prevEl) {

style.rich

? renderRichText(hostEl, ctx, text, style, rect, prevEl)

: renderPlainText(hostEl, ctx, text, style, rect, prevEl);

}

文本分为富文本以及普通文本进行分别渲染，它们均通过调用canvas的ctx.fillText或ctx.strokeText 等api进行文本渲染，具体实现可以查看helper/text.js文件。

Style

图形的样式文件，定义了基本的样式属性，以及样式set、clone以及判断等方法。

Path

path为图形的基类，继承自Displayable，定义了buildPath、getBoundingRect、setShape等方法，其包含this._style属性即为Style对象实例。

Shape

shape文件下存放着zrender定义的图形文件，扩展自Path。

Circle

圆形，通过调用Path.extend方法进行扩展，重写了buildPath方法，buildPath调用了canvas api：ctx.arc进行圆形的绘制，主要实现代码如下：

buildPath: function (ctx, shape, inBundle) {

if (inBundle) {

ctx.moveTo(shape.cx + shape.r, shape.cy);

}

ctx.arc(shape.cx, shape.cy, shape.r, 0, Math.PI * 2, true);

}

Arc

弧形，通过调用Path.extend方法进行扩展，重写了buildPath方法，buildPath调用了canvas api：ctx.arc进行弧形的绘制，主要实现代码如下：

buildPath: function (ctx, shape) {

var x = shape.cx;

var y = shape.cy;

var r = Math.max(shape.r, 0);

var startAngle = shape.startAngle;

var endAngle = shape.endAngle;

var clockwise = shape.clockwise;

var unitX = Math.cos(startAngle);

var unitY = Math.sin(startAngle);

ctx.moveTo(unitX * r + x, unitY * r + y);

ctx.arc(x, y, r, startAngle, endAngle, !clockwise);

}

Heart

心形❤️，通过调用Path.extend方法进行扩展，重写了buildPath方法，buildPath调用了canvas api：ctx.bezierCurveTo进行弧形的绘制，主要实现代码如下：

buildPath: function (ctx, shape) {

var x = shape.cx;

var y = shape.cy;

var a = shape.width;

var b = shape.height;

ctx.moveTo(x, y);

ctx.bezierCurveTo(

x + a / 2, y - b * 2 / 3,

x + a * 2, y + b / 3,

x, y + b

);

ctx.bezierCurveTo(

x - a * 2, y + b / 3,

x - a / 2, y - b * 2 / 3,

x, y

);

}

bezierCurveTo(控制点1x坐标, 控制点1y坐标, 控制点2x坐标, 控制点2y坐标, 结束点x坐标, 结束点y坐标)

三次被塞尔曲线绘制：

P0为开始点，P1为控制点1，P2为控制点2，P3为结束点

取 P0P1 中点M

取 P1P2 中点M’

取 MM’ 中点P

则 P 为曲线的必经点

具体绘制图如下：

同理，我们可以绘制出左半边心形：

Droplet

水滴形状

echarts源码打包_Echarts源码阅读指南相关推荐

jdk源码分析书籍 pdf_如何阅读源码？
点击上方"IT牧场",选择"设为星标" 技术干货每日送达! 阅读源码是每个优秀开发工程师的必经之路,那么这篇文章就来讲解下为什么要阅读源码以及如何阅读源码. 首 ...
萝卜源码前后端源码+打包APP的教程
简介: 今天分享一个萝卜源码前后端源码+打包APP的教程我相信很多人都有源码但是不会配置复杂的AS工具导致一直没有打包好属于自己的APP 所以,今天我来了萝卜前端APPJava源码先把源码发出 ...
萝卜源码前后端源码附打包APP的教程
简介: 今天分享一个萝卜源码前后端源码+打包APP的教程我相信很多人都有源码但是不会配置复杂的AS工具导致一直没有打包好属于自己的APP 所以,今天我来了前端是蓝色的,后端是自适应手机的版后端, ...
java经典源码阅读_公开！阿里甩出“源码阅读指南”，原来源码才是最经典的学习范例...
我们为啥要阅读源码? 为什么面试要问源码?为什么我们Java程序员要去看源码?相信大多数程序员看到源码第一感觉都是:枯燥无味,费力不讨好!要不是为了"涨薪"我才不去看这个鬼东西!但 ...
2016年最经典的高仿系列源码打包下载4.84G
│ JAVAapk.com文件列表生成.bat │ 例子大全说明.txt │ 本例子永久更新地址~.url │ 目录列表2015.11.04更新.txt ...
[附源码]JAVA毕业设计书香校园阅读平台（系统+LW）
[附源码]JAVA毕业设计书香校园阅读平台(系统+LW) 项目运行环境项配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe ...
最新彩虹易支付全解版疑似hack易支付整站源码打包
介绍: 今天给大家带来的是好多人都想要的易支付源码这次的源码百分之九十九解码,监测无后门可正常运营! 易支付大家都知道是一个很赚钱的活,前阵子h**k易支付不干了的消息相信有的人听说过,不幸的是我余 ...
O2OA二次开发（一）前后端源码打包部署命令
O2OA二次开发(一)前后端源码打包部署命令 o2oa源代码全部build一次要花费很长时间,有时候我们只是修改了前端代码或者只是修改了后端代码,没必要进行全部重新编译打包. 全部打包命令执行以下命 ...
PHP安卓苹果APP在线封装打包制作源码 H5手机网站转APP 免签封装绿标
简介: PHP安卓苹果APP在线封装打包制作源码 H5手机网站转APP 免签封装绿标更新记录: 1.解决ios无法下载的问题 2.优化打包流程修复原先各种问题 3.可自行上传安卓证书 4.可自行上 ...

echarts源码打包_Echarts源码阅读指南

echarts源码打包_Echarts源码阅读指南相关推荐

最新文章

热门文章