首页 > Vue >

bpmnjs+vue自定义修改图形默认颜色篇之BpmnRenderer

时间: 作者:admin 浏览:

前面说过,bpmnjs+vue项目中,可以使用this.modeling.setColor()方法设置图形线条颜色,但如果默认颜色使用它来设置,到后面流程在流转中想通过不同颜色区分不同工作状态的图形时,就会显得很繁杂,所以还是建议通过Modeler参数设置或者自定义bpmnRenderer模块的方式修改默认颜色

其中Modeler传参的方法比较简单,自定义bpmnRenderer做法和其他模块自定义一样,前面已经说了自定义了Modeler的方法,还不会的同学可以点这里:

bpmnjs如何自定义Modeler?vue+bpmnjs

下面给出这两种设置方法:

修改图形和线条默认颜色

方法一:直接在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()等等,很惊喜吧,看得懂的同学可以多看看,今天就说到这里了,快去试试吧。

引导:

关于bpmnjs+vue的更多篇章,小编已经全部整理在这里:
bpmnjs+vue中文文档API常见方法使用总结

前端新手交流群
欢迎加入web前端新手交流qq群:
734802480(已满)、 794324979

更多文章

栏目文章


Copyright © 2014-2022 seozhijia.net 版权所有-粤ICP备13087626号-4