【数据流图】用JointJs实现数据流图（二）

一、流图如何绑定绘制的元素？

通过打印JointJs生成的属性可知，id是不允许被覆盖修改的，但是cid可以。所以通过绑定元素的cid，可实现后续的操作，如查找元素、更改元素属性等。

1. 绑定cid方式示例

let textEle = new joint.shapes.standard.TextBlock();
textEle.attributes.attrs.label = {text: '例子',
};
textEle.attr('label/text', '例子');
textEle.resize(10, 10);
textEle.position(0, 0);
// 绑定cid
textEle.cid = cid;
textEle.addTo(this.graph);

2. 根据cid查找画布上的元素

let findEleByCid(cid){// 获取所有元素let eleList = this.graph.getElements();// 返回cid匹配上的元素return eleList.find((ele) => ele.cid === cid);
}

3. 改变属性，以改变文本内容为例

// 将textEle这个文本框元素的内容改为123
textEle.attr('label/text', '123');

二、流图中绘制使用的JointJs的API及函数封装

1. 绘制文本框

使用API：shapes.standard.TextBlock
常用属性
- attributes.attrs.label.text：文本内容
- attributes.attrs.label.style：文本样式，与css保持一致
- attr(‘label/text’, text)：标签内容
- attr(‘body/stroke’, ‘none’)：文本框的外边框
- resize(width,height)：文本框尺寸
- position(x,y)：文本框位置
绘制文本框函数示例

 drawText(text, position, size, textStyle) {let textEle = new joint.shapes.standard.TextBlock();textEle.attributes.attrs.label = {text: text,style: textStyle};textEle.attr('label/text', text);textEle.attr('body/stroke', 'none');textEle.resize(size[0], size[1]);textEle.position(position[0], position[1]);textEle.addTo(this.graph);
}

2. 绘制图片

使用API：shapes.standard.Image
常用属性
- attr(‘image/xlinkHref’, imgSrc)：指定图片地址
- resize(width,height)：图片尺寸
- position(x,y)：图片位置
绘制图片函数示例

drawImg(imgSrc, position, size) {let ele = new joint.shapes.standard.Image();ele.attr('image/xlinkHref', imgSrc);ele.position(position[0], position[1]);ele.resize(size[0], size[1])ele.addTo(this.graph);
},

3. 绘制线条

使用API：shapes.standard.Link&dia.Link&dia.LinkView
常用属性
- attr(‘line/stroke’, ‘#FF620C’)：连线颜色
- attr(‘line/strokeWidth’, 1.5)：连线宽度
- .connector(‘curve’, {})：贝塞尔三次曲线

贝塞尔三次曲线计算较为复杂，若不指定，按官方默认的来绘制，会呈现s型曲线

绘制线条函数示例

// linkInfo：连线信息
// color：圆点颜色
// sourceDirection：连线起点位置
// targetDirection：连线终点位置
drawLink(linkInfo, color, sourceDirection, targetDirection) {let link = new joint.shapes.standard.Link(linkInfo);link.attr('line/stroke', '#FF620C');link.attr('line/strokeWidth', 1.5);link.attr({line: {targetMarker: {type: 'path','stroke-width': 1,fill: '#FF620C',d: 'M 8 -4 0 0 8 4 Z'}}});let paperLink = new joint.dia.Link(linkInfo);paperLink.attr({'.connection': { stroke: 'none' }});if (sourceDirection && targetDirection) {link.connector('curve', {sourceDirection: sourceDirection,targetDirection: targetDirection,distanceCoefficient: 0.4});paperLink.connector('curve', {sourceDirection: sourceDirection,targetDirection: targetDirection,distanceCoefficient: 0.4});} else {link.connector('curve', {distanceCoefficient: 0.4});paperLink.connector('curve', {distanceCoefficient: 0.4});}paperLink.addTo(this.graph);let vCircle = V('circle', {r: 5,fill: color});let paperLinkView = paperLink.findView(this.paper);paperLinkView.sendToken(vCircle, 4000);this.dataInterval = setInterval(() => {paperLinkView.sendToken(vCircle, 4000);}, 5000);link.addTo(this.graph);},

三、流图中绘制使用JointJs的方法总结

1. 触摸连线事件（link:mouseover）

this.paper.on('link:mouseover', (cell) => {// cell即为鼠标悬停的连线元素
});

2. 移出连线事件（link:mouseleave）

this.paper.on('link:mouseleave', () => {// cell即为鼠标离开的连线元素
});

3. 触摸元素事件（element:mouseover）

this.paper.on('element:mouseover', (cell) => {// cell即为鼠标悬停的元素
});

4. 移出元素事件（element:mouseleave）

this.paper.on('element:mouseleave', (cell) => {// cell即为鼠标移出的元素  
});

5. 鼠标点击元素事件（element:pointerclick）

this.paper.on('element:pointerclick', (cell) => {// cell即为鼠标点击的元素  
});

6. 获取所有画布上的元素（getElements）

// eleList即为画布上的元素
let eleList = this.graph.getElements();

7. 获取所有画布上的连线

// links即为画布上的连线
let links = this.graph.getLinks();

8. 移除画布上的元素（removeCells）

// cells为要移除的元素的数组
this.graph.removeCells(cells);

9. 画布自适应（paper.scale）

resizeCanvas() {let paperWidth = window.innerWidth;// 示例为1250，可自行更改if (paperWidth > 1250) {let scale = paperWidth / 1250;this.paper.scale(scale, scale);// this.$refs.canvas为vue获取canvas元素的方式if (this.$refs.canvas) {this.$refs.canvas.style.width = `${800 * scale}px`;this.$refs.canvas.style.height = `${520 * scale}px`;}}
}