使用bpmn-js 配置颜色

本篇文章介绍如何使用bpmn-js给图例配置颜色。该示例展示了如何向BPMN图添加颜色的多种不同方法。

通过层叠设置颜色

这种方式比较简单，直接通过设置图片的CSS层叠样式就可实现。

.highlight-overlay {
  background-color: green; /* color elements as green */
  opacity: 0.4;
  pointer-events: none; /* no pointer events, allows clicking through onto the element */
}

将具有给定类的高亮显示覆盖附着到某些元素：

await viewer.importXML(diagramXML);

var overlays = viewer.get('overlays');
var elementRegistry = viewer.get('elementRegistry');

var shape = elementRegistry.get('UserTask_1');

var $overlayHtml =
  $('<div class="highlight-overlay">')
    .css({
      width: shape.width,
      height: shape.height
    });

overlays.add('UserTask_1', {
  position: {