自定义 Renderer

在 [自定义 Palette] (https://github.com/PL-FE/bpmn-doc/blob/main/doc/customPalette.md)的基础上继续修改

案例代码在这里取：

customRenderer

开始

由于画布中的图形为 SVG，不像 Palette 是使用 HTML，所以需要学习 SVG 的基础知识

并且需要用到 BPMN 提供的一个 SVG 库 tiny-svg

1. 创建相关文件

建立自定义渲染的相关文件，结构如下

| -- renderer|-- CustomRenderer.js|-- index.js

这里比较方便直接去官方的 Demo 中取代码
bpmn-js-example-custom-rendering

---

2. 引用

引入刚刚创建的文件

import customRenderer from './renderer'

export default {// ...init() {this.bpmnModeler = new BpmnModeler({additionalModules: [customRenderer]})// ...}
}

你会发现自定义渲染已经成功了

当然，我们需要的不仅如此

我们仔细看 CustomRenderer.js 的 drawShape() 方法，这个是渲染的核心方法， 返回一个 shape，即一个 SVG

drawShape (parentNode, element) {const shape = this.bpmnRenderer.drawShape(parentNode, element);if (is(element, 'bpmn:Task')) { // 当元素类型是 bpmn:Task 时const rect = drawRect(parentNode, 100, 80, TASK_BORDER_RADIUS, '#52B415'); // 创建一个带绿色边框的矩形prependTo(rect, parentNode);svgRemove(shape);return shape;}// 其他不属于 bpmn:Task 的元素，如开始事件// 也创建一个 红色小矩形const rect = drawRect(parentNode, 30, 20, TASK_BORDER_RADIUS, '#cc0000');// 放置于左上角svgAttr(rect, {transform: 'translate(-20, -10)'});return shape;
}

3. 修改 paletteEntries

我们主要对 drawShape 这个方法进行修改，期望能统一在一个文件中同时配置工具栏和自定义渲染

在 paletteEntries.js 增加一个 drawShape 功能，也就是将创建 SVG 的工作交给 paletteEntries.js 实现

paletteEntries.js

export default {'create.start-event': createAction('bpmn:StartEvent','event','bpmn-icon-start-event-none','Create StartEvent'),'create.task': createAction('bpmn:Task','activity','bpmn-icon-task-custom', // 🙋‍♂️ 使用图片后，记得修改成自己的类名'Create Task',require('../img/task.png'),drawShape)
}function createAction(type, group, className, title, imageUrl = '', drawShape) {function createListener(event, autoActivate, elementFactory, create) {var shape = elementFactory.createShape({ type })create.start(event, shape)}const config = {type, // 📌 渲染的时候需要判断group: group,className: className,title: title,drawShape: drawShape, // 📌action: {dragstart: createListener,click: createListener}}if (imageUrl) {assign(config, {imageUrl})}if (drawShape) {assign(config, {drawShape})}return config
}// 这里将 CustomRenderer.js 渲染的方法搬到 paletteEntries
function drawShape(parentNode, element, bpmnRenderer) {const shape = bpmnRenderer.drawShape(parentNode, element)if (is(element, 'bpmn:Task')) {const height = 80const width = 100// 真实元素的宽高element.width = widthelement.height = height// 显示元素的宽高与真实的宽高需要一致const rect = drawRect(parentNode,width,height,TASK_BORDER_RADIUS,'#52B415')prependTo(rect, parentNode)svgRemove(shape)return shape}const rect = drawRect(parentNode, 30, 20, TASK_BORDER_RADIUS, '#cc0000')svgAttr(rect, {transform: 'translate(-20, -10)'})return shape
}

4. 修改 CustomRenderer

注入需要的数据

CustomRenderer.$inject = ['eventBus', 'bpmnRenderer', 'config.paletteEntries']constructor(eventBus, bpmnRenderer, paletteEntries) {//  ...this.paletteEntries = paletteEntries;}drawShape (parentNode, element) {const paletteEntries = this.paletteEntries// 通过 type 找到对应的配置const shape = find(paletteEntries, (entry) => {return is(element, entry.type)})// 如果传入自定义方法，则回调该方法if (shape && shape.drawShape instanceof Function) {return shape.drawShape(parentNode, element, this.bpmnRenderer)}// 否则调用默认渲染的方法return this.bpmnRenderer.drawShape(parentNode, element)
}

最后

自定义渲染已经完成，更多的是思考如何绘制 SVG ,给每个不同的元素不同的 drawShape

下面开始如何 自定义 contextPad

相关

可能对你有帮助的官方资源：

• bpmn-js-example-custom-rendering
• bpmn-js-example-custom-elements

---

目录：

• 基础使用
• 了解 BPMN 内部
• 自定义 Palette
• 自定义 Palette => 指定 Palette 容器
• 自定义 Renderer
• 自定义 contextPad
• 自定义连线和箭头的颜色
• 自定义规则
• 自定义 properties-panel
• 右上角小地图
• 总结常用 API 🚩
• 为 Viewer 添加一些功能
• bpmn-camunda DEMO