bpmn-添加自定义图元

背景：项目组在进行流程设计器的开发中，定义了很多具有业务意义的自定义标签，在原有的bpmn2.0的字体图标库（https://cdn.staticaly.com/gh/bpmn-io/bpmn-font/master/dist/demo.html）中并不能找到与之契合的图标，所以考虑自定义图元图标来描述我们自己定义的图元标签。

目标：我们总共需要修改三处地方，1.工具栏palette，2.图元shape，3.ContextPad

实现：

一、替换渲染在画布中的图元shape
1.在iconfont（iconfont-阿里巴巴矢量图标库）中选择适合的svg格式小图标；

2.draw/pathMap.js中添加java的svg图标中path的d值；pathMap.js中定义了所有svg路径path

3.draw/shapeRenderer.js中替换pathMap.getScaledPath中的填充图标，即pathMap中定义的常量，调整图标的样式填充fill和stroke，适当运用transform缩小至合适大小；

二、替换自定义工具栏palette和快键键ContextPad
1.合并任务图元和小图标，生成svg图标（SVG 在线编辑器 | 菜鸟工具）

2.生成对应的字体图标库
（IcoMoon App - Icon Font, SVG, PDF & PNG Generator）

3.引入对应的字体图标库，到bpmn-font/font目录

4.替换对应的图标引用样式，主要替换PaletteProvider.js和ContextPadProvider.js

三、处理拖拽时图标不显示的问题
通过样式查找发现，在图元进行拖拽时，存在.djs-dragger * {fill: none !important;}的样式，如果我们的小图标不是一个中空的图标，会使得我们的小图标填充色没有的时候将会是透明状态。这时候我们只需要在图元渲染时，添加对应的class类，将其进行特殊处理，让他始终保持一种填充颜色，即解决问题。

参考文档：全网最详bpmn.js教材-自定义contextPad篇 - 简书

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！