一、流图如何绑定绘制的元素？
通过打印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`;
}
}
}
