【ZRender 渲染引擎 - 贰】 | Vue 框架集成与绘制其他图元

theme: cyanosis

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 8 天，点击查看活动详情

1. Vue 中使用 ZRender

上一篇中，我们通过最原始的方式体验了一下 ZRender 的使用。接下来，为了更方便管理绘制测试效果，使用 Vue 框架集成 ZRender 库。看完本篇应该能体会出这个管理的必要性，我们要完成如下的绘制样例展示效果：

如下，通过 vue cli 创建一个 zrender-player 的项目，这里组件使用类的形式： class-component

```sh ----> vue -V
@vue/cli 5.0.8

----> vue create zrender-player ```

然后通过通过 npm 安装 zrender :

sh ----> npm install zrender

如下所示，定义一个 PaperBox 组件来展示绘制的单体，其中组件的布局结构和样式基于【上一篇】实现，定义 PaperBox 继承自 Vue，作为独立的组件使用。定义 ZRenderType 类型的 render2d 私有成员，在 mounted 回调中初始化。

``` ---->[PaperBox.vue]----

```

2. 遇到问题 -> 分析问题 -> 解决问题

在集成的过程中，没想到这么快就不得不瞄 ZRender 的源码。出现了一个问题：

Renderer 'undefined' is not imported. Please import it first.

遇到问题，不要怕，分析问题是一项很重要的能力，自主解决问题 是累积经验的重要途径之一。错误出现时，往往都会伴随一些蛛丝马迹，如下所示，其中有错误时的栈信息：

点击栈信息，可以看到错误发生的位置：是在 ZRender 对象初始化时，可以在源码稍上一些点断掉调试一下：

重点是这段逻辑，核心对象是 painterCtors 和 rendererType，其中 rendererType 是个字符串，在设置为项中为空时，使用 canvas 。 painterCtors 是一个对象，通过 rendererType 可以获取个东西，如果获取不到会出问题。

所以现在的显示是 painterCtors 对象，在 19 行中对象声明的场合，默认是的空对象。通过观察可以看到它目前仍是一个空对象，也就是说，没有为 painterCtors 添加内容是这个错误的根源：

然后追踪 painterCtors 的赋值情况，可以看到在 registerPainter 中会为 painterCtors 根据 name 设置 Ctor 对象。也就是说需要使用 registerPainter 方法来注册绘制器，理论上来说 ZRender 应该会默认注册一个绘制器，但目前来看，实际上没有。

所以想要解决这个问题，最简单的方式是手动注册一下，如下在 mian.ts 中注册一下。

``` ---->[main.ts]---- import { createApp } from 'vue' import App from './App.vue' import CanvasPainter from "zrender/lib/canvas/Painter"; // 引入 Canvas 绘制器 import * as zrender from "zrender"; // 引入 zrender 绘制器

zrender.registerPainter('canvas', CanvasPainter); // 注册绘制器 createApp(App).mount('#app') ```

这样再调试时，就可以看到 painterCtors 对象在存在键值对，在网页中也可以正常显示绘制的内容。另外如果需要绘制 svg 的话，也可以注册一下 SVGPainter 。

另外，在 zrender 的 all.ts 中可以看到注册的逻辑，但是实际好像不起作用。网上对 zrender 在 Vue 中的集成文章都比较简单，没有出现这个问题，可能是 Vue3 或者是 TS 引起的。至于具体的原因，我们也不怎么清楚，希望懂行的可以解释一下。好在这个小问题可以解决。

3. 封装绘制单体

如下所示，现在的目标是让绘制的单体可以依次排列展示，也就是说根据 数组数据 遍历显示 单体组件 PaperBox 。所以实现需要定义数据的组织方式，从展示的形式上来看，主要需要两个数据：标题 与 图元列表，通过 ExModel 类对数据进行组织管理：

``` import * as zrender from "zrender";

export class ExModel { label: string; elements: zrender.Element[];

constructor(label: string, elements: zrender.Element[]) {this.label = label;this.elements = elements;
}

} ```

也就是说，ExModel 数据就是对绘制样例的封装，就代表一个数据，决定一个单体的表现。如下，使用 PaperBox 组件的处理对 ExModel 对象进行渲染出现。

``` ---->[PaperBox]----

```

其中 Html 布局将之前的死数据通过 ExModel 对象进行呈现设置。其实从本质上来看，这和 Flutter 中的组件封装的思想并没有什么区别，都是通过 数据 来驱动 视图。

<template> <div class="wrapper"> <div :id=model.label class="box"></div> <span class="label">{{model.label}}</span> </div> </template>

4. 数据的供应

单体组件封装完毕后，接下来需要考虑数据的来源问题，这里的数据自然是我们自己创造的。如下，通过一个文件来统一收录数据, 其中每个 exModels 数组中的元素觉得一个样例的展示：

``` ---->[examples/exData.ts]---- import polylineExs from './polyline'; import lineExs from './line'; import circleExs from './circle'; import rectExs from './rect'; import ellipsExs from './ellipse'; import { ExModel } from './ExModel';

const exModels = [ new ExModel('折线: Polyline',polylineExs), new ExModel('直线: Line',lineExs), new ExModel('圆形: CirCle',circleExs), new ExModel('矩形: Rect',rectExs), new ExModel('椭圆: Ellipse',ellipsExs), ];

export default exModels; ```

为了方便独立管理，这里将每个样例放在一个文件在，比如下面是 polyline 的图元对象：

``` ---->[examples/polyline.ts]---- import * as zrender from "zrender";

const polylineEx1 = new zrender.Polyline({ shape: { points: [ [0, 50], [10, 60,], [20, 40,], [30, 80,], [40, 20,], [50, 50,], [60, 40,], [100, 40,], ] }, style: { stroke: 'red', lineWidth: 1, fill: 'none', }, })

const polylineExs = [polylineEx1]

export default polylineExs; ```

5. 展示组件

这样数据和单体都准备完毕，接下来遍历渲染即可，如下定义 ZrenderPage 组件，通过 v-for 指令遍历 exModels 的数据渲染 PaperBox 组件，即可完成显示：

```

这样，如果需在界面上添加一个图元的样例，只需要在 exModels 中添加数据即可。比如现在想在界面中添加圆弧的样例。

只要在 exModels 中添加一个元素即可：

``` import * as zrender from "zrender";

const arcEx1 = new zrender.Arc({ shape: { cx: 50, cy: 50, r: 40, startAngle: 0, endAngle: 135 * Math.PI / 180, }, style: { stroke: 'red', lineWidth: 1, fill: 'none', }, })

const arcExs = [arcEx1]

export default arcExs; ```

这样就可以将上一篇中绘制的图元同屏展示，也方便接下来的绘制测试。所以 Vue 通过组件化实现 数据 和 界面 的映射关系，对于批量同类视图的显示是很有益的。如果使用原始的 html 结构进行布局，一个个写出来将非常繁琐，而且难以维护。

5. 扇形区、多边形、正多边形、星形

扇形区、多边形、正多边形、星形 分别通过 Sector、Polygon、Isogon、Star 进行绘制。简单看下效果，这里就不细说属性了，想具体了解的可以参考官方文档：zrender-doc。官网的文档没有配图，这里就当给文档配图了：

扇形区: Sector

扇形区域对于统计图中的 饼图 是非常重要的，它可以绘制内外半径间的部分圆环区域。上图中红色区域是 sectorEx1 ，黄色区域是 sectorEx2 :

``` const sectorEx1 = new zrender.Sector({ shape: { cx: 50, cy: 50, r: 40, r0: 30, startAngle: 0, endAngle: 135 * Math.PI / 180, }, style: { stroke: 'red', lineWidth: 1, fill: 'none', }, })

const sectorEx2 = new zrender.Sector({ shape: { cx: 50, cy: 50, r: 40, r0: 30, startAngle: -90 * Math.PI / 180, endAngle: -165 * Math.PI / 180, clockwise: false }, style: { stroke: 'blue', lineWidth: 1, fill: 'yellow', }, }) ```

多边形: Polygon

多边形就是一个会自动封闭首尾的折线，也是指定 shape 中的点集进行连线：

const polygonEx1 = new zrender.Polygon({ shape: { points: [ [0, 50], [10, 60,], [20, 40,], [30, 80,], [40, 20,], [50, 50,], [60, 40,], [100, 40,], ] }, style: { stroke: 'red', lineWidth: 1, fill: 'none', }, })

正多边形： Isogon

const isogonEx1 = new zrender.Isogon({ shape: { x: 50, y: 50, r: 40, n: 8 }, style: { stroke: 'red', lineWidth: 1, fill: 'none', }, })

星形: Star

const starEx1 = new zrender.Star({ shape: { cx: 50, cy: 50, r: 40, n: 7, r0: 20, }, style: { stroke: 'red', lineWidth: 1, fill: 'none', }, })

6. 水滴、心形、玫瑰线、旋轮线、圆环

下面来看五个没啥大用的形状，水滴、心形、玫瑰线、旋轮线、圆环 分别通过 Droplet、Heart、Rose、Trochoid、Ring 进行绘制。

水滴: Droplet

const dropletEx1 = new zrender.Droplet({ shape: { cx: 50 , cy: 65, width: 25, height: 60, }, style: { stroke: 'red', lineWidth: 1, fill: 'none', }, })

心形: Heart

const heartEx1 = new zrender.Heart({ shape: { cx: 50 , cy: 30, width: 35, height: 60, }, style: { stroke: 'red', lineWidth: 1, fill: 'none', }, })

玫瑰线: Rose

``` const roseEx1 = new zrender.Rose({ shape: { cx: 50, cy: 50, r: [50], k: 2, n: 15 }, style: { stroke: 'red', lineWidth: 1, fill: 'none', }, })

```

玫瑰线: Trochoid
其中 location 为 out 表示 外旋轮 ，图中红线所示； in 表示 内旋轮，图中蓝线所示。

``` const trochoidEx1 = new zrender.Trochoid({ shape: { cx: 50, cy: 50, r: 40, r0: 5, d:6 , location: 'out' }, style: { stroke: 'red', lineWidth: 1, fill: 'none', }, })

const trochoidEx2 = new zrender.Trochoid({ shape: { cx: 50, cy: 50, r: 40, r0: 5, d:6 , location: 'in' }, style: { stroke: 'blue', lineWidth: 1, fill: 'none', }, }) ```