bpmnjs+vue自定义修改图形默认颜色篇之BpmnRenderer | 您所在的位置:网站首页 › vuebpmnjs › bpmnjs+vue自定义修改图形默认颜色篇之BpmnRenderer |
前面说过,bpmnjs+vue项目中,可以使用this.modeling.setColor()方法设置图形线条颜色,但如果默认颜色使用它来设置,到后面流程在流转中想通过不同颜色区分不同工作状态的图形时,就会显得很繁杂,所以建议在Modeler初始化时设置参数的方式或者自定义bpmnRenderer模块代码的方式修改默认颜色 其中Modeler初始化传参的方法比较简单,而bpmnRenderer自定义方法和其他模块自定义一样,前面已经说过自定义Modeler的方法,还不会的同学可以点这里: bpmn-js如何自定义Modeler? 修改图形和线条默认颜色 方法一:直接在Modeler里对bpmnRenderer参数传值 let modeler = new CustomModeler({ bpmnRenderer:{ defaultStrokeColor:"#000",//线条 文字颜色 defaultFillColor:"#FFF"//图形填充颜色 } })方法二: 从node_modules依赖中找到定义图形颜色的js文件bpmn-js/lib/draw/BpmnRenderer.js,拷贝出来引用到自定义模块custom/index.js中去: import BpmnRenderer from '../customRender/bpmnRender/BpmnRenderer'; export default { __init__: [ "bpmnRenderer" ], bpmnRenderer: [ 'type', BpmnRenderer ] }找到BpmnRenderer.js文件的以下代码: var defaultFillColor = config && config.defaultFillColor, defaultStrokeColor = config && config.defaultStrokeColor;修改为: var defaultConfigs = { defaultFillColor:"#FFFFFF", defaultStrokeColor:"#3333333" }; config = Object.assign({},defaultConfigs, config); var defaultFillColor = config && config.defaultFillColor, defaultStrokeColor = config && config.defaultStrokeColor;这段代码就是设置所有图形默认颜色,包括图形背景默认颜色defaultFillColor、线条默认颜色defaultStrokeColor的值; 其实到这里,bpmnjs自定义图形默认颜色的修改就已经完成了,但是细心的同学可能会发现BpmnRenderer.js文件里面还有各类图形的部分默认属性也可以在这里修改,其实方法一bpmnRenderer的值传进来就是方法二的config,可以用它设置更多的属性,比如默认线条的粗细值strokeWidth等,传进来修改BpmnRenderer.js对应属性值即可;文件中还有画各类图形的方法drawCircle()、drawRect()、drawLine()等等,很惊喜吧,看得懂的同学可以多看看,今天就说到这里了,快去试试吧。 |
CopyRight 2018-2019 实验室设备网 版权所有 |