ECharts渲染引擎ZRender

之前讲过 《Canvas 2D图形操作：fabricjs/konvajs/pixijs对比总结》

ZRender 是二维绘图引擎，是轻量级的 Canvas 类库，它提供 Canvas、SVG、VML 等多种渲染方式，它可以用于绘制各种图形，包括线条、矩形、圆形、多边形等。echarts的渲染器就是ZRender。

ZRender 封装了前端 canvas 的绘制逻辑，通过上层的接口去操作底层的绘制功能。从而屏蔽不同环境的差异性，提供统一的访问方式，并提供更高级的图形元素的绘制功能，方便使用者的调度，这都是封装的特点。

https://github.com/ecomfe/zrender

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事件的模拟封装。

目录介绍

文件夹：

• 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）;

• vml IE中的画笔，vml解释

全局的文件：

• config.js 配置文件

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

• Handle.js C层，控制层

• Layer.js 图层管理

• Painter.js V层，视图层

• Storage.js M层，数据管理层

• zrender.js 入口

图形

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

ZRender  中分别通过 Line、Rect、Circle 绘制直线、矩形、圆形、多边形

const render = zrender.init(document.getElementById('paper'));
const stokeStyle = {
  stroke: 'red',
  lineWidth: 1,
  fill: null,
};

line = new zrender.Line({
  shape: {
    x1: 0,
    y1: 0,
    x2: 100,
    y2: 100,
  },
  style: stokeStyle,
});
const rrect = new zrender.Rect({
  shape: {
    x: 25,
    y: 25,
    r: [5, 10, 5, 10],
    width: 50,
    height: 50,
  },
  style: stokeStyle,
});
const circle = new zrender.Circle({
  shape: {
    cx: 50,
    cy: 50,
    r: 50,
  },
  style: stokeStyle,
});
const polyline = new zrender.Polyline({
  shape: {
    points: [
      [0, 50],
      [10, 60],
      [20, 40],
      [30, 80],
      [40, 20],
      [50, 50],
      [60, 40],
      [100, 40],
    ],
  },
  style: stokeStyle,
});
render.add(polyline);

圆弧、椭圆、贝塞尔曲线分别由 Arc、Ellipse、BezierCurve 绘制。

参考文章：

echarts源码解读《一》：zrender源码概要分析 http://qiuruolin.cn/2019/05/20/echarts-1/

转载本站文章《ECharts渲染引擎ZRender》,
请注明出处：https://www.zhoulujun.cn/html/webfront/visualization/charts/9237.html