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

最新推荐文章于 2024-08-14 09:31:14 发布

程序猿Owen

最新推荐文章于 2024-08-14 09:31:14 发布

阅读量1.1k

点赞数 14

分类专栏： bpmn-js 文章标签： vue.js 流程图 javascript 经验分享

本文链接：https://blog.csdn.net/m0_37239448/article/details/135029852

版权

bpmn-js 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

文章介绍了如何在bpmnjs+vue项目中通过Modeler初始化参数或自定义BpmnRenderer模块修改图形和线条的默认颜色，提供两种方法并详细解释了如何调整默认填充色和描边色，以及扩展至更多图形属性的修改。

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

前面说过，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()等等，很惊喜吧，看得懂的同学可以多看看，今天就说到这里了，快去试试吧。