Question

我目前正在使用bpmn-js查看器库在我的网站上显示BPMN 2.0图表。当我想向显示的图表中添加颜色时，会出现问题。我检查了这个bpmn-js colors示例并实现了以下代码：

<script>
  var bpmnViewer;
  function openDiagram(bpmnXML, height) {
    bpmnViewer = new BpmnJS({
    container: '#canvas',
    height: height
    });
    bpmnViewer.importXML(bpmnXML, function (err) {
      if (err) {
        return console.error('could not import BPMN 2.0 diagram', err);
      }
      var canvas = bpmnViewer.get('canvas');
      var overlays = bpmnViewer.get('overlays');
      var elementRegistry = bpmnViewer.get('elementRegistry');
      var modeling = bpmnViewer.get('modeling');
      var elementToColor = elementRegistry.get('_6-127');
      modeling.setColor(elementToColor, {
        stroke: 'green',
        fill: 'rgba(0, 80, 0, 0.4)'
       });
      ...
    });
  }
</script>

使用 bpmn-viewer.development.js lib（v2.5.0）时，颜色不起作用，但是使用 bpmn-modeler.development.js lib时，颜色不起作用（v2.5.1）一切正常。但是，通过使用建模器库，我们还可以在显示的图表上获得编辑器选项（我不想这样做）。

那么，这是向图表添加颜色的最佳方法，我只是想查看它，而不想要任何编辑选项？

我是否需要向查看器库中添加一些js代码（以启用颜色功能）或修改建模器库（以禁用编辑选项）以及如何做一个或另一个？

Answer 1

在这里很难定义“最佳”方式。假设“最佳”意味着尽可能少的依赖项和模块，并且要尽可能灵活，那么最佳选择将是colors example of the bpmn-js-examples存储库中的方法3：

bpmnViewer.importXML(bpmnXML, function (err) {
  if (err) {
    return console.error('could not import BPMN 2.0 diagram', err);
  }
  var canvas = bpmnViewer.get('canvas');
  canvas.addMarker('UserTask_XYZ', 'highlight');
});

其中高亮是已定义的CSS类：

.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
  fill: green !important; /* color elements as green */
}

优势：

您实际上只需要canvas模块。查看器也需要这样做，因此不需要其他模块。
您的样式与js代码分开。如果要更改“主题”，则只需更改/调整CSS，而JS代码保持不变。（请尽量避免在JS代码中使用样式！）
您还可以结合使用canvas.removeMarker(id, classname)和canvas.addMarker来创建一些交互式样式。

缺点：

因为要设置svg元素的样式，所以必须使用不同的CSS属性。如果您不熟悉svg样式设置，则可能需要一些时间才能将其与常规的CSS属性混淆。

向bpmn-js查看器添加颜色

1 个答案: