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

export default {
mounted() {
this.containerEl = document.getElementById('container');
this.bpmnModeler = new BpmnModeler({
additionalModules: [ customModule ] });
}

步骤4：为节点定义样式

新建一个customPalette.scss文件，在该文件同级放一张“cake.png”的图片，作为节点的背景图写入。背景图引入的话，貌似只支持.png格式，亲测：jpg报错

.bpmn-icon-cake {
 background-image: url('./cake.png');
}
.icon-custom {
 background-size: 65%;
 background-repeat: no-repeat;
 background-position: center center;
}

并且在main.js中引入，注意，一定要在main.js中全局引入，否则不生效。

import 'customPalette/customPalette.scss';

此时，我们便可以在左侧工具栏中看到自定义的“草莓蛋糕”节点了，但是此时拖动该节点，右侧只会产生一个“bpmn:Task”的节点，只有一个框框。

我们希望的是，拖动后画布中也显示自定义图标，所以我们进行下一步：自定义渲染

步骤5：画布渲染自定义节点

此时需要我们新建一个 CustomRenderer.js文件，作用：自定义 renderer。因为我们是在bpmn原有的元素“bpmn:Task”基础上进行修改，所以我们需要对将BaseRenderer进行继承。

import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'; // 引入默认的renderer
const HIGH_PRIORITY = 1500; // 最高优先级
export default class CustomRenderer extends BaseRenderer {
 // 继承BaseRenderer
 constructor(eventBus, bpmnRenderer) {
 super(eventBus, HIGH_PRIORITY);
 this.bpmnRenderer = bpmnRenderer;
 }
 canRender(element) {
 return !element.labelTarget;
 }
 drawShape(parentNode, element) {
 const shape = this.bpmnRenderer.drawShape(parentNode, element);
 return shape;
 }
 getShapePath(shape) {
 return this.bpmnRenderer.getShapePath(shape);
 }
}
CustomRenderer.$inject = ['eventBus', 'bpmnRenderer'];

此时， CustomRenderer.js文件大概结构完成了，注意：HIGH_PRIORITY变量和canRender不可以删掉，否则会有问题。重头戏是里面的drawShape函数。

步骤6：书写drawShape函数

我们在CustomRenderer.js同级建立一个util文件，记录自定义类型节点的一些属性。

import cake from './cake.png';
// 自定义元素的类型，此时我们只需要自定义一种节点，所以数组只有一个元素
const customElements = ['bpmn:Task'];
const customConfig = {
 // 自定义元素的配置
 cake: {
 url: cake,
 attr: {x: 0, y: 0, width: 50, height: 50}								 
 2/3   首页 上一页 1 2 3 下一页 尾页