在bmpnjs中动态添加svg

Question

我正在使用Bpmn-JS查看器库来显示BPMN 2.0，我只需要查看器(我不需要编辑器)。我有一个XML要绘制。

我想在任务中动态添加带有编号的气球(我从与每个任务相关的API中获取编号)

如何动态绘制这些气球？我可以用图书馆来做吗？

示例：

​

​

Answer 1

我可以使用overlay

viewer = new BpmnViewer();
viewer.attachTo('#container');
viewer.importXML(...)

我可以通过id添加与任务相关联的覆盖

const number = 4;
overlays = this.viewer.get('overlays');
overlays.add('taskId', {
   position: {
      top:0,
      right:0
   },
   html: `<div class='circle'>${number}</div>`
});