vue里使用bpmn绘制流程图（二）

最新推荐文章于 2024-08-09 07:00:33 发布

haoyanyu_

最新推荐文章于 2024-08-09 07:00:33 发布

阅读量4.4k

点赞数 2

分类专栏： js

本文链接：https://blog.csdn.net/haoyanyu_/article/details/100705347

版权

本文介绍如何在Vue项目中使用BPMN库实现流程图的自定义，包括不同节点的颜色区分和文字label的位置调整。通过修改BpmnRenderer.js等源码，实现了节点颜色的定制，并详细说明了双击进入编辑状态及编辑后label位置的控制方法。

摘要由CSDN通过智能技术生成

上回记录到在页面上生成并编辑流程图；
但是实际使用中，往往需要进行自定义；
下面就根据实际需求来一步一步实现自定义。

不同的节点用不同的颜色区分

插件提供的接口方法官方demo： https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors

this.viewer.importXML(diagramXml, err => {
   
	if (err) {
   
		throw (err)
	}
	var overlays = this.viewer.get('overlays'),
		canvas = this.viewer.get('canvas'),
		elementRegistry = this.viewer.get('elementRegistry'),
		modeling = this.viewer.get('modeling');
	
	this.viewer.get('canvas').zoom('fit-viewport')

	var elementToColor = elementRegistry.get('ServiceTask_appPushDelegate_0wulpvm');

	modeling.setColor([ elementToColor], {
   
		stroke: 'green',
		fill: 'rgba(0, 80, 0, 0.4)'
	});
})