zrender知识：使⽤zrender搭建流程图⼯具⾸先看下最终的效果图：
主要使⽤的技术是zrender.js和vue.js，zrender ⽤于实现流程图，vue搭建整体架构。
本篇⽂章主要⾯向对zrender有⼀定了解的同学。
本篇⽂章只讲解核⼼flowchart的实现⽅法。
⼀.分析
流程图主要包含节点node、联系edge以及组group三个部分。
功能主要有
添加节点
添加联系，分为节点与节点、节点与组、组与组之间的联系
添加组
删除功能
⼆.实现⽅式
1. 实现⼀个flowEditor类，⽤于管理节点、联系以及组。
主要⽅法包含：添加/删除节点，添加/删除组，添加/删除联系，处理事件等
2.实现⼀个Node类，⽤于创建节点
3.实现⼀个NodeGroup类,⽤于创建组
4.实现⼀个RelateLink类，⽤于创建联系
三.具体实现
1. 节点node类
vuejs流程图插件<1>创建⼀个基础Node类，管理公共的⽅法，⽐如创建锚点（锚点主要⽤于连接，即创建联系线时使⽤），获取锚点坐标，刷新等⽅法。
<2>通过
d({
type: '',
shape: {
x: 0,
y: 0,
width: 0,
height: 0
},
buildPath: function (ctx, shape) {
}
});
⽅法来拓展zrender基础图形，并在此基础上实现节点。
⽐如如下图形：
...
//拓展基础图形
var delay = d({
type: 'delay',
shape: {
x: 0,
y: 0,
width: 0,
height: 0
},
buildPath: function (ctx, shape) {
var x=shape.x;
var y=shape.y;
var width = shape.width;
var height = shape.height;
var r=height/2;
ctx.lineTo(x+width-r,y);
ctx.arc(x+width-r, y+r, r, -Math.PI/2, Math.PI/2 , false);
ctx.lineTo(x,y+height);
ctx.closePath();
return ;
}
});
/
/在基础图形上拓展⼀个节点
class Delay extends delay {
constructor(data) {
super(data);
this.data = data;
this.anchors = [];
}
createAnchors() {
this.anchors = [];
var g = new zrender.Group();
var box = g.getBoundingRect([this]);
var t = { x: box.x + box.width / 2, y: box.y, index: 1, node: this, direct: 'top' };
var r = { x: box.x + box.width, y: box.y + box.height / 2, index: 2, node: this, direct: 'right' };
var b = { x: box.x + box.width / 2, y: box.y + box.height, index: 3, node: this, direct: 'bottom' };
var l = { x: box.x, y: box.y + box.height / 2, index: 4, node: this, direct: 'left' };
this.anchors.push(t, r, b, l);
}
}
...
2.连线类
这⾥主要介绍直线连线⽅式的实现。
连线类主要包括以下属性
连接节点，分为fromNode和toNode)
连接锚点，分为fromAnch和toAnch，其和节点是成对出现的，即有fromNode必有fromAnch，有toNode必有toAnch。
连接坐标，分为fromPoint和toPoint
连线不⼀定连在节点上，所以其中节点和锚点不⼀定的存在，⽽坐标是⼀定存在的。
在zrender中可以使⽤
zrender.Line类来实现直线，主要是获取开始坐标（x1,y1）和结束坐标(x2,y2)
如果有节点，那么可以通过锚点来获取坐标，反之通过mousemove⽅法获取⿏标坐标即可。
3.组
使⽤zrender.Group类来实现组。
通过getBoundingRect()⽅法来获取包围盒box，即组内节点所占据的矩形范围。当拖动节点时，不断的获取box，并不断的更新显⽰范围即可。
三.最后
以上是实现的思想，这⾥仅做抛转引⽟，所有的源码可以在这⾥到 [github] [能⼒有限，勿笑?]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。