前言
上一章节我们介绍了关于bpmn.js如何与自定义renderer给节点增加图片和底色改变, 要是不了解的小伙请移步
bpmn.js + vue + vuex的业务实现——节点增加图片和样式改变
这一章节主要讲解的是关于bpmn.js如何自定义连线、箭头的颜色和实线改为虚线
开源链接
gitee：gitee.com/zh-howe/bpm…
设置连线颜色
原理
这里有必要简单补充一下bpmn.js关于连线和箭头的实现原理
bpmn.js是用path标签实现连线，而箭头的标签是放在def标签里，
marker-end里的是url是用箭头的id实现运用箭头
这时候思路就很明白了，我们需要在def里创建包含path标签的marker标签自定义不同样式的箭头，哪条连线需要哪个箭头，marker-end里就写了哪个的id
方法
官方API
const modeling = this.modeler.get('modeling')
modeling.setColor(element, {
fill: 'blue',
stroke: 'red'
})
通过 css 自定义连线和箭头的颜色
NavigatedViewer、Viewer、Modeler三种模式都适用 配合自定义渲染加上不同的类名，能够达到每条线有不一样的颜色 或者遍历链路获取节点的颜色，与节点保持相同颜色
主要 通过 css 改变颜色
- 引入 css
.djs-connection {
path {
stroke: blue !important;
marker-end: url(#sequenceflow-arrow-normal) !important;
}
}
注意 #sequenceflow-arrow-normal 为箭头下面要创建的箭头的 id
- 创建自定义箭头并放在def里
//customRenderer.vue
import {
append as svgAppend,
attr as svgAttr,
create as svgCreate
} from 'tiny-svg'
import { query as domQuery } from 'min-dom';
this.bpmnModeler
.importXML(resourceXml)
.then(() => {
const marker = svgCreate('marker');
const markerActivities = svgCreate('marker');
svgAttr(marker, {
id: 'sequenceflow-arrow-normal',
viewBox: '0 0 20 20',
refX: '11',
refY: '10',
markerWidth: '10',
markerHeight: '10',
orient: 'auto',
});
svgAttr(markerActivities, {
id: 'sequenceflow-arrow-activities',
viewBox: '0 0 20 20',
refX: '11',
refY: '10',
markerWidth: '10',
markerHeight: '10',
orient: 'auto',
});
const path = svgCreate('path');
const pathActivities = svgCreate('path');
svgAttr(path, {
d: 'M 1 5 L 11 10 L 1 15 Z',
style:
' stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1; stroke: #cccccc;fill:#ccc;',
});
svgAttr(pathActivities, {
d: 'M 1 5 L 11 10 L 1 15 Z',
style:
' stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1; stroke: #fdb039;fill:#fdb039;',
});
const defs = domQuery('defs');
svgAppend(marker, path);
svgAppend(defs, marker);
svgAppend(markerActivities, pathActivities);
svgAppend(defs, markerActivities);
// 让图能自适应屏幕
const canvas = this.bpmnModeler.get('canvas');
canvas.zoom('fit-viewport', 'auto'); //画布自适应居中
canvas.zoom(0.8); //缩写至0.8倍
// 这里是成功之后的回调, 可以在这里做一系列事情
this.success();
})
.catch(err => {
if (err) {
console.error(err);
}
});
我这里需要两种不同颜色的线和箭头，所以创建了两种箭头，在css中的marker-end分别赋予不同的id，这样就能与后端交互，实现特定的线用特定的颜色，那么问题来了，我们拿到后端返回的数据后该怎么实现交互呢？
虚线
虚线可以用stroke-dasharray来实现
.djs-connection {
path {
stroke: blue !important;
stroke-dasharray: 8 !important; //间隔多少像素绘制一次 虚线
marker-end: url(#sequenceflow-arrow-normal) !important;
}
}
完整文件目录展示
- custom 文件用于编写自定义renderer
- utils用于存储图片及文字数据
- customRenderer.vue是用于渲染流程图
