bpmn.js - 自定义连线和箭头的颜色

发布于 2020-09-29 插件  Bpmn 

官方提供了 4 中方法

官方 demo

我这里推荐两种

一、官方 API

const modeling = this.modeler.get('modeling')
modeling.setColor(element, {
  fill: 'blue',
  stroke: 'red',
})

二、通过 css 自定义连线和箭头的颜色

NavigatedViewer、Viewer、Modeler三种模式都适用
配合自定义渲染加上不同的类名，能够达到每条线有不一样的颜色
或者遍历链路获取节点的颜色，与节点保持相同颜色

---

思路

主要 通过 css 改变颜色

1. 引入 css

.djs-connection {
  path {
    stroke: blue !important;
    marker-end: url(#sequenceflow-arrow-normal) !important;
  }
}

注意 #sequenceflow-arrow-normal 为箭头下面要创建的箭头的 id

2. 创建自定义箭头

import {
  append as svgAppend,
  attr as svgAttr,
  create as svgCreate,
} from 'tiny-svg'

bpmnModeler.importXML(xml).then(() => {
  const marker = svgCreate('marker')

  svgAttr(marker, {
    id: '#sequenceflow-arrow-normal',
    viewBox: '0 0 20 20',
    refX: '11',
    refY: '10',
    markerWidth: '10',
    markerHeight: '10',
    orient: 'auto',
  })

  const path = 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; ',
  })

  const defs = domQuery('defs')
  svgAppend(marker, path)
  svgAppend(defs, marker)
})

最后

在线预览