之前在使用 SVG 开发一个条形图的过程中，我们发现有一些地方不方便。比如我们每次绘制一个元素，都需要三步：创建元素，设置元素属性，最后再挂载元素。

// 创建元素
const rect = createSVGElement('rect');

// 设置属性
rect.setAttribute('x', 10);
rect.setAttribute('y', 10);
rect.setAttribute('fill', 'red');
rect.setAttribute('width', 50);
rect.setAttribute('height', 50);

// 挂载元素
g.appendChild('rect');

@前端进阶之旅: 代码已经复制到剪贴板

当画布中元素较少时，这种方式还可以忍受。但随着元素数量的增长，这会变得非常冗余和繁琐。所以我们需要开发一个非常简单和轻量级的渲染引擎（Renderer) ，用它简化我们绘图的流程。

通过上图可以发现：Sparrow 将选择 SVG 而不是 Canvas2D 来作为绘图技术，这是因为 Sparrow 对性能没有要求，同时 SVG 相对于 Canvas2D 更好测试一点（SVG 有 DOM 结构，可以直接检查 DOM 来进行调试）。

接下来我们先从什么是渲染引擎讲起以及可视化需要它的原因，然后实现一个简单的渲染引擎，最后会简单拓展一下开源社区一些优秀的渲染引擎。

# 什么是渲染引擎

渲染引擎这一概念在不同领域有着不同的含义。对于前端开发者来数，渲染引擎是 WebKit、Blink 这样的浏览器排版引擎（或者说是内核），它负责解析 HTML 和 CSS 文档，并决定了文档里的元素将以怎样的形式放置在页面中的什么位置（即排版）。

对于艺术和计算机动画工作者来说，渲染引擎是基础图形绘制库，一般具有以下特点：

能够绘制基本图形，如：点、直线、多边形、曲线等
支持图形内部填充、阴影效果等
支持纹理与贴图
抗锯齿以及亚像素优化
跨平台运行

更高阶的渲染引擎甚至支持粒子系统、光线追踪等效果。

在数据可视化与可视分析领域，尤其是前端可视化方向，我们所使用的渲染引擎更偏向后者，但又有所区别。受平台及场景制约，前端可视化渲染引擎在具备上述特点的同时，还需要具备高性能、轻量化的特性，以满足在低网络传输带宽、低绘制性能等极端场景下的图形渲染需求。此外，在面向分析的可视化领域，3D 视图可能会导致意料之外的错误感知与洞察，因此 2D 渲染引擎得到了更大规模的应用。

# 为什么需要渲染引擎

用户大可直接在浏览器提供的 Canvas2D, SVG 和 WebGL 中使用原生语法直接绘制想要的图形，那么为什么还需要渲染引擎呢？包括上面提到的，这里给出几点原因：

管理图元：使用渲染引擎能够更轻松的绘制并管理图形元素。
提供完善的动画与事件机制：原声语法绘制动画相对比较麻烦。
性能优化：渲染引擎基于底层渲染器的特性进行了大量优化工作，如脏矩阵渲染、分层渲染等，能够取得更好的渲染性能。使得开发者能够专注于视图的构建。
多个渲染器之间任意切换：如果有同时在这两种渲染器中进行绘制的需求，需要针对不同的渲染器进行单独开发，提高工作量的同时也难以保证其一致性。使用渲染引擎绘制时只需要指定所需的渲染器即可完成切换。

现在我们从概念上简单聊了一下渲染引擎，就像我们一直强调的：具体的实战能帮助我们更好的理解概念，所以接下来我们就来开发 Sparrow 需要的渲染引擎。

# 功能设计

每一次开发都伴随着功能设计，它是我们接下来开发时候依据的蓝图。

因为 Sparrow 的功能相对简单，所以我们渲染器的功能用不复杂，主要侧重于更加轻松地绘制并且管理图形元素，简化我们绘制图形的流程。它主要有两个功能：

绘制基本图形：支持 rect、circle、line、path、text、ring 这几种基本图形的绘制。
进行坐标系变换：支持 translate，scale，rotate 这三种变换，同时可以使用类似 Canvas2D 的 save 和 restore 去管理坐标系变换的状态。

具体期望的使用方法如下：

import { createRenderer } from 'renderer';

// 创建渲染器
const renderer = createRenderer(600, 400);

// 绘制基本图形
renderer.rect({
  x: 10,
  y: 10,
  width: 50,
  height: 50,
  fill: 'red',
});

// 坐标变换
renderer.save();
renderer.scale(2, 2);
renderer.rect({
  x: 10,
  y: 10,
  width: 50,
  height: 50
});
renderer.restore();

@前端进阶之旅: 代码已经复制到剪贴板

在开始将我们的功能设计落地之前，我们再来看看额外的一个和测试相关的约定。

# 测试约定

本项目是测试驱动的，所以会有测试代码，但是不会在文章里面介绍它们。 这主要是因为是因为篇幅有限，同时不是小册子的核心内容。当然每当我们新增一个功能的时候，会给出测试代码的仓库地址，大家完成相应的功能可以用提供的测试代码来验证功能是否正确。

比如大家开发完成了 foo 这个函数，就可以增加以下的测试代码，然后运行：npx jest __tests__/hello.spec.js 看是否有问题。

// __tests__/hello.spec.js

import { foo } from '../src/foo';

describe('test foo', () => {
  it('should returns foo', () => {
    expect(hello()).toBe('foo');
  });
});

@前端进阶之旅: 代码已经复制到剪贴板

同时我们在写代码的过程中不会完全遵循 airbnb-base 的规范，所以需要修改 .eslintrc.js 如下，关闭一些规则的校验。

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
    jest: true,
  },
  extends: ['airbnb-base'],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
  rules: {
    // 关闭 eslint 的如下功能
    'import/prefer-default-export': 0,
    'no-use-before-define': 0,
    'no-shadow': 0,
    'no-restricted-syntax': 0,
    'no-return-assign': 0,
    'no-param-reassign': 0,
    'no-sequences': 0,
    'no-loop-func': 0,
    'no-nested-ternary': 0,
  },
};

@前端进阶之旅: 代码已经复制到剪贴板

不小心又说了这么多废话，接下来我们直接进入开发！

# 创建渲染引擎（createRenderer）

我们首先来实现 createRenderer 这个函数来返回我们的渲染器对象。它的所有功能都是通过这个对象对外暴露的。根据上面的功能设计，我们不难得到以下的代码。

// src/renderer/renderer.js

import { createContext } from './context';
import {
  line, circle, text, rect, path, ring,
} from './shape';
import {
  restore, save, scale, translate, rotate,
} from './transform';

export function createRenderer(width, height) {
  const context = createContext(width, height); // 创建上下文信息
  return {
    line: (options) => line(context, options),
    circle: (options) => circle(context, options),
    text: (options) => text(context, options),
    rect: (options) => rect(context, options),
    path: (options) => path(context, options),
    ring: (options) => ring(context, options), // 绘制圆环
    restore: () => restore(context),
    save: () => save(context),
    scale: (...args) => scale(context, ...args),
    rotate: (...args) => rotate(context, ...args),
    translate: (...args) => translate(context, ...args),
    node: () => context.node, // 下面会讲解
    group: () => context.group, // 下面会讲解
  };
}
// src/renderer/index.js

export { createRenderer } from './renderer';

@前端进阶之旅: 代码已经复制到剪贴板

通过上面的代码我们可以发现：在初始化一个渲染器的时候，首先会去创建一个上下文，然后再把它给其他函数使用。接下来我们先看看上下文的创建，之后再实现其他函数。

# 创建上下文（createContext）

对于渲染引擎来说，上下文（Context）主要用于保存一些绘制或者其他功能需要的全局的信息，比如挂载画布的容器，当前的填充颜色，边框粗细等。

对于 Sparrow 需要的渲染器来说，它需要的 Context 比较简单：

画布节点：这是一个 svg 节点，方便使用者将其挂载到 DOM 需要的位置。
挂载节点：这是一个 g 节点，是当前可以挂载新元素的节点。后面可以看到，我们可以通过更新它来到达管理坐标系变换的功能。

Context 的创建是由如下的 createContext(width, height) 这个函数实现的。

在这里复制测试代码到本地，通过 DEBUG_MODE=1 npx jest __tests__/renderer/renderer.spec.js 运行它们，如果能得到下面的效果，那么就没有什么问题了。

创建 Context 大概就是这样，接下来我们就看看如何基于这个 Context 去绘制基础图形。

# 绘制基本图形

像文章开头说的那样，在 SVG 环境下我们绘制一个基本图形需要三步：创建元素、设置属性和挂载元素。

因为绘制不同的图形只是在创建元素阶段指定不同的元素类型，所以我们把上面三步封装成一个通用的 shape 函数：

当我们完成了 shape 函数之后，那么绘制 line、rect，circle 等这些基本元素就非常容易了，只要给 shape 传入不同的元素的种类并且根据需要进行简单增强即可。

除了支持 SVG 本来就有的图形之外，我们还需要额外支持一个图形（后面 Dount 图表会使用）：圆环（Ring）。

我们将用三个圆去模拟一个圆环，它们的填充色都是透明的，其中两个圆的边框去模拟圆环的边框(上面的红色部分），用一个圆的边框去模拟圆环本身（上面蓝色部分）。实现细节如下：

同样复制这里的测试代码并且运行，如果运行测试代码能得到如下的效果，那么就也没有什么大问题了。

实现了绘制图形就这个功能，那么接下来我们就来完成坐标系变换这个功能。

# 什么是渲染引擎

# 为什么需要渲染引擎

# 功能设计

# 测试约定

# 创建渲染引擎（createRenderer）

# 创建上下文（createContext）

# 绘制基本图形

# 坐标系变换

实战 渲染引擎 Renderer|可视化专题

实战 渲染引擎 Renderer|可视化专题

实战渲染引擎 Renderer|可视化专题

实战渲染引擎 Renderer|可视化专题