bpmn-添加自定义图元

最新推荐文章于 2025-04-10 11:37:40 发布

唐家小居居

最新推荐文章于 2025-04-10 11:37:40 发布

阅读量2.2k

点赞数 1

文章标签： bpmn 业务流程测试前端

本文链接：https://blog.youkuaiyun.com/qq_29603991/article/details/121278111

版权

本文档介绍了如何在BPMN流程设计器中添加自定义图元图标。内容包括从iconfont选取SVG图标，修改draw/pathMap.js添加SVG路径，调整shapeRenderer.js中的图元样式，以及替换工具栏palette和ContextPad的图标。此外，还解决了拖拽时图标不显示的问题，确保图元始终有填充颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：项目组在进行流程设计器的开发中，定义了很多具有业务意义的自定义标签，在原有的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格式小图标；

<svg t="1636642346800" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://ww

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

唐家小居居

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Bpmn-js自定义Palette元素

胖蔡叨叨叨

02-07

762

接下来我们就开始自定义一个Palette小工具，可以帮助我们业务快速识别需要的组件是哪个，当前组件使用已有类型shape图片绘制。

bpmn-process-designer基础上进行自定义样式（工具、元素、菜单）

weixin_46037781的博客

07-29

3450

处理思路可以看到工具区就是基本样式，所以在此基础上加一个class就ok了找到自定义工具，red是我们自己添加的可以用于左边工具区palette和下拉菜单popup-menu在index.scss添加colorred!important;}//gatewaydisplaynone!important;}效果通过使用自定义渲染我们可以看到初始样式的设置//设置初始样式配置（stroke线条、fill填充内部、label就是图形内部那个文本）constconfig={...

参与评论您还未登录，请先登录后发表或查看评论

Vue+bpmn.js自定义流程图之palette（二）

imapig_的博客

01-19

3592

bpmn.js自定义样式之palette

BPMN这点事-BPMN扩展元素（上）

要思考

09-06

8522

10.3.3 扩展元素什么是BPMN扩展元素？我们为什么要从BPMN元素中界定出一个扩展元素的子集？BPMN扩展元素是我们平时使用频率不高的BPMN元素，这些元素更多的面向开发人员而不是业务人员，它们强调流程执行的细节，例如对事件子流程和事务性子流程的定义和对更多具有具体执行

Flowable7.x学习笔记（三）bpmn-js汉化&自定义样式

最新发布

持续学习ing

04-10

476

bpmn-js汉化&自定义样式

自定义bpmn.js左侧工具栏palette样式

风如也的博客

02-21

9922

自定义bpmn.js的样式前期准备我在之前的 vue-bpmn 项目的 git 仓库下新创建了一个分支 custom，用来存放自定义样式的内容 自定义左侧工具栏palette样式

最详bpmn.js教材-自定义palette篇

qq_34160815的博客

05-17

3500

bpmn 自定义palette

bpmn.js自定义各项，palette contextPad elementFactory modeling renderer rules

许珊珊同学的专栏

05-27

3140

从bpmn仓库给出的example看 https://github.com/bpmn-io/bpmn-js-examples 我们要实现自定义可以有两种方式，【继承】 bpmn-js，并修改原型上的方法，达到兼容自定义的相关【重新实现】也就是把bpmn做的事情，在本地再做一遍，当然你可以各种“借鉴”里面的function，并达到你的要求比如 customModeler/index.js 👈👈👈 import CustomContextPadProvider from './CustomContex

Activiti_流程定义语言（BPMN）

乔治小兄弟

12-01

1163

1、什么是BPMN 业务流程建模与标注（Business Process Model and Notation，BPMN) ，描述流程的基本符号，包括这些图元如何组合成一个业务流程图（Business Process Diagram） Eclispse画出流程,有两个文件bpmn文件和png文件,其中bpmn文件又可以叫做流程定义文件,它需要遵循BPMN语言规范.png:就是一个单纯的图片,...

BPMN2.0 中英文挂图

03-22

7. **扩展与定制**：BPMN2.0支持自定义扩展，可以通过用户任务（User Task）添加特定的操作，或者通过脚本任务（Script Task）和业务规则任务（Business Rule Task）引入逻辑判断和业务规则。 8. **执行模型**：...

Bpmn.js自定义文件说明

weixin_43359503的博客

02-21

9669

Bpmn.js自定义文件说明由于工作需要（其实不是很需要），在公司项目的基础上开源了一个基于 bpmn-js + Vue 2.x + ElementUI 的一个流程编辑器 Bpmn Process Designer, 预览地址 MiyueFE blog, 欢迎 fork 和 star。前言在使用 bpmn-js 绘制流程图时，可能会存在需要开发者自己定义属性或者元素的情况，为了保证符合官方定义，对官方文档进行了汉化说明。以下说明基于个人理解，可能与真实作用有出入，希望大家指出不正确或者意义不明的地

vue项目中使用bpmn-自定义platter的示例代码

11-20

内容概述本系列“vue项目中使用bpmn-xxxx”分为七篇，均为自己使用过程中用到的实例，手工原创，目前陆续更新中。主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。如果转载或通过爬虫直接爬的，格式特别丑，请来原创看：我是作者原文前情提要经过前四篇的学习，我们能够实现bpmn基本绘图、预览、为节点加事件加颜色等效果，这一篇我们来说，如何自定义左侧工具栏（platter），首先看一下自定义前后效果图对比：我们本次要实现的目标：基于左侧platter原有元素类型，创建出一个新的自定义节点。暂且叫它“草莓蛋糕”节点，

bpmn-vue-custom:v基于vue编写的一些自定义bpmn.js案例

03-08

bpmn-vue基本项目描述此项目为以下教材中的教材案例。 :fire: :fire: :fire: :fire: :fire: :fire: :fire: :fire: :fire: :fire: :fire: :fire: 项目截图：如何使用将项目克隆至本地： git clone git@github.com:LinDaiDai/bpmn-vue-custom.git 安装依赖： npm install 本地启动项目： npm run serve 打包发布至生成环境： npm run build

BPMN - 自定义任务节点名称

weixin_40918145的博客

01-05

3081

背景：流程跟踪查看的时候，需要看到当前节点具体的处理人是谁，效果如图。

Vue+bpmn.js自定义流程图（一）

imapig_的博客

01-13

4837

bpmn.js自定义流程图样式

bpmn右侧添加自定义属性，并添加方法

cainiaoyiige的博客

08-05

2774

5、最终我们可以通过handleButtonClick（）方法来实现自己定义的一些业务操作。1、首先在右侧创建节点，这地方可以参考官网提供的例子。4、最后我们获取这个节点的信息，并给这个节点添加监听方法。2、在创建模板时，引入自己所创建节点信息。

bpmn-js自定义Palette、ContextPad、节点样式及属性

qugeshenmominzi的博客

06-13

2882

1.使用 paletteProvider 同名参数覆盖默认 paletteProvider 构造函数2.使用PaletteProvider配置自定义Palette});group: "任务",title: "输出标签",action: {},});"palette","create",3.向additionalModules中添加自定义扩展});4.效果图// 渲染外层边框//修改外层边框样式// 自定义节点x:11,

bpmnjs+vue之自定义palette、paletteProvider 左侧工具栏，更换容器

m0_37239448的博客

12-14

1959

其中，是自定义左侧工具栏各个工具初始化的名称、图标、class等等，这个模块建议直接去依赖下复制过来修改，import {assign/***/'palette','create',return {action: {x: 0,y: 0,});hints: {});

bpmn-js系列之Palette

广漂程序猿DevinRock

03-12

1297

为了编辑方便，我想在palette上添加一个shape该如何操作呢？这里我们需要自定义Palette，自定义Palette有两种方式可以选择，第一种就是基于默认的Palette来修改，第二种就是完全写个新的Palette来替代默认的Palette，第一种只能在默认的Palette上添加shape，而不能修改或删除，比较鸡肋我们就直接放弃了，来看下完全自定义Palette该如何实现以下代码基于我们之前搭建好的代码框架，具体可看文章『最好用的流程编辑器bpmn-js系列之基本使用』1.在components。