vue项目中使用bpmn-番外篇(留言问题总结)

“vue项目中使用bpmn-xxxx”系列的七篇文章在上周已经更新完成,发表后,有小伙伴在使用时提出了一些文章中没有讲到的问题,此篇作为番外篇,将大家提出的共性问题解答一下,欢迎大家支持原创:我是作者原文

问题汇总

问题1: 来自@精灵铭心,第三篇“自定义platter”中,自定义节点拖拽到画布中,节点的标题显示不出来

原因:自定义的节点,本质是一张图片填充了节点的位置,双击节点可以看到设置的标题。但是失去焦点后文字就看不到了。因为此时设置的标题被图片覆盖了。

解决办法:为该节点的标题换个位置,换到节点的上方或下方

在customPalette/CustomRenderer.js中,修改drawShape函数,之前该函数只是绘制节点,现在绘制节点后,让它再帮咱们在指定位置绘制一个文本。

drawShape(parentNode, element) { const type = element.type; // 获取到类型 if (customElements.includes(type)) { const {url, attr} = customConfig['cake']; const customIcon = svgCreate('image', {...attr, href: url}); element['width'] = attr.width; element['height'] = attr.height; svgAppend(parentNode, customIcon); // 下方为更改节点名称位置 if (element.businessObject.name) { const text = svgCreate('text', { x: attr.x, y: attr.y -20, //位置可以随意调,我理解此时的attr.y 是此时元素的左上角纵坐标 }); text.innerHTML = element.businessObject.name; svgAppend(parentNode, text); } // 结束 return customIcon; } const shape = this.bpmnRenderer.drawShape(parentNode, element); return shape; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgzggp.html