bpmn开发笔记

颜色改变

官方提供demo

 var viewer = new BpmnJS({
      container: '#diagram'
    });

    async function showDiagram(diagramXML) {

      await viewer.importXML(diagramXML); ///极其重要 需要同步加载 否则剩下的获取不到属性

      var overlays = viewer.get('overlays'),
          canvas = viewer.get('canvas'),
          elementRegistry = viewer.get('elementRegistry'),
          modeling = viewer.get('modeling');

      // Option 1: Color via Overlay
      var shape = elementRegistry.get('CalmCustomerTask');

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

      overlays.add('CalmCustomerTask', {
        position: {
          top: 0,
          left: 0
        },
        html: $overlayHtml
      });

      // Option 2: Color via BPMN 2.0 Extension
      var elementToColor = elementRegistry.get('SelectAPizzaTask');

      modeling.setColor([ elementToColor ], {
        stroke: 'green',
        fill: 'rgb(152, 203, 152)'
      });

      // Option 3: Color via Marker + CSS Styling
      canvas.addMarker('OrderReceivedEvent', 'highlight');

    }

主要选用第二个方案

同步异步写法学习