1. Vue 中使用 ZRender
上一篇中，我们通过最原始的方式体验了一下 ZRender 的使用。接下来，为了更方便管理绘制测试效果，使用 Vue 框架集成 ZRender 库。看完本篇应该能体会出这个管理的必要性，我们要完成如下的绘制样例展示效果：
如下，通过 vue cli 创建一个 zrender-player 的项目，这里组件使用类的形式 ： class-component
----> vue -V
@vue/cli 5.0.8
----> vue create zrender-player然后通过通过 npm 安装 zrender :
----> npm install zrender如下所示，定义一个 PaperBox 组件来展示绘制的单体，其中组件的布局结构和样式基于 【上一篇】 实现，定义 PaperBox 继承自 Vue，作为独立的组件使用。定义 ZRenderType 类型的 render2d 私有成员，在 mounted 回调中初始化。
---->[PaperBox.vue]----
<template>
<div class="wrapper">
<div :id= label class="box"></div>
<span class="label">{{label}}</span>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { ZRenderType } from "zrender";
import * as zrender from "zrender";
@Options({
props: {
leabel: String
}
})
export default class PaperBox extends Vue {
leabel!: string
private render2d? :ZRenderType;
mounted(){
this.render2d = zrender.init(document.getElementById(this.label))
}
</script>
<style scoped lang="scss">
//同上篇
</style>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]----
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { ZRenderType } from "zrender";
import * as zrender from "zrender";
import { ExModel } from '../examples/ExModel';
@Options({
props: {
model: ExModel,
}
})
export default class PaperBox extends Vue {
model!: ExModel
private render2d?: ZRenderType;
mounted() {
this.render2d = zrender.init(document.getElementById(this.model.label))
for (let i = 0; i < this.model.elements.length; i ) {
this.render2d.add(this.model.elements[i])
}
}
}
</script>其中 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 组件，即可完成显示：
<template>
<div class="container">
<PaperBox
v-for=" item ,i in models"
:key=i
:model=item
PaperBox />
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import exModels from '../examples/exData'
import { ExModel } from '../examples/ExModel';
import PaperBox from '../components/PaperBox.vue'
@Options({
props: {
leabel: String
},
components: {
PaperBox,
},
})
export default class ZrenderPage extends Vue {
leabel!: string
models: ExModel[] = exModels;
}
</script>
<style scoped lang="scss">
.container {
display: flex;
justify-items: center;
justify-items: center;
gap: 20px;
}
</style>这样，如果需在界面上添加一个图元的样例，只需要在 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',
},
})代码语言：javascript复制正多边形： Isogon
const isogonEx1 = new zrender.Isogon({
shape: {
x: 50,
y: 50,
r: 40,
n: 8
},
style: {
stroke: 'red',
lineWidth: 1,
fill: 'none',
},
})代码语言：javascript复制星形: 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 进行绘制。
代码语言：javascript复制水滴: Droplet
const dropletEx1 = new zrender.Droplet({
shape: {
cx: 50 ,
cy: 65,
width: 25,
height: 60,
},
style: {
stroke: 'red',
lineWidth: 1,
fill: 'none',
},
})代码语言：javascript复制心形: Heart
const heartEx1 = new zrender.Heart({
shape: {
cx: 50 ,
cy: 30,
width: 35,
height: 60,
},
style: {
stroke: 'red',
lineWidth: 1,
fill: 'none',
},
})代码语言：javascript复制玫瑰线: Rose
const roseEx1 = new zrender.Rose({
shape: {
cx: 50,
cy: 50,
r: [50],
k: 2,
n: 15
},
style: {
stroke: 'red',
lineWidth: 1,
fill: 'none',
},
})代码语言：javascript复制玫瑰线: 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',
},
})代码语言：javascript复制圆环: Ring
const ringEx1 = new zrender.Ring({
shape: {
cx: 50,
cy: 50,
r: 40,
r0: 30,
},
style: {
stroke: 'red',
lineWidth: 1,
fill: 'none',
},
})到这里，ZRender 中的 18 的基本图元的绘制了解完毕，而且通过 Vue 框架搭建了一个方便测试的环境。另外还有路径 Path 的绘制这里暂时不介绍，将在后期单独说明。那本文就到这里，谢谢观看 ~
@张风捷特烈 2022.10.21 未允禁转我的 公众号: 编程之王我的 github 主页: toly1994328
