bpmn-js API

微服务 专栏收录该内容
13 篇文章 0 订阅

bpmn-js介绍:
https://github.com/bpmn-io

1.导入流程图

    var bpmnModeler = new BpmnJS({
      container: '#canvas',
      keyboard: {
        bindTo: window
      }
    });
       bpmnModeler.importXML(bpmnXML, function (err) {
        if (err) {
          return console.error('could not import BPMN 2.0 diagram', err);
        }
        var canvas = bpmnModeler.get('canvas');
        canvas.zoom('fit-viewport');
      });

2.导出流程图XML

    bpmnModeler.saveXML({ format: true }, function (err, xml) {
        if (err) {
          return console.error('could not save BPMN 2.0 diagram', err);
        }
        xmldata = xml;
      });

3.读取节点属性

ar eventBus = bpmnModeler.get('eventBus');
eventBus.on('element.click', function(evt) { 
  $('#hidNode').val(evt.element.id);
  $('#hidNodeType').val(evt.element.type);
  $('#hidNodeName').val(evt.element.businessObject.name);
 })

4.更新节点名称

var modeling = bpmnModeler.get('modeling');
      var shape = bpmnModeler.get('elementRegistry').get(nodeId);
      modeling.updateProperties(shape, { name: "新名称" });

5.改变节点颜色

  var elementToColor = bpmnModeler.get('elementRegistry').get('StartEvent_1'); 
  var modeling = bpmnModeler.get('modeling');
  modeling.setColor([elementToColor], { 
    stroke: 'green',
    fill: 'rgba(0, 80, 0, 0.4)'
  });

待整理……

  • 1
    点赞
  • 2
    评论
  • 6
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值