bpmn.js + vue + vuex的业务实现-自定义连线、箭头的颜色和虚线

前言

这一章节主要讲解的是关于bpmn.js如何自定义连线、箭头的颜色和实线改为虚线

设置连线颜色

原理

这里有必要简单补充一下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