bpmn.js自定义Renderer，使用自定义task样式的同时添加上文字框text-一一网

前言

最近因为公司业务的需要，会使用到bpmn.js，所以在网络上找相关文档来琢磨，还有很多坑都要自己去找。
首先在这里推荐一些掘金作者很好用的文章，避免踩坑。

作者：LinDaiDai_霖呆呆

作品：全网最详bpmn.js教材目录：
juejin.cn/post/684490…

作者：MiyueFE

作品：bpmn.js中文文档（一）：
juejin.cn/post/690079…

bpmn.js中文文档（二）：
juejin.cn/post/692530…

自定义Renderer中的task节点并添加text

在此之前，先看完LinDaiDai_霖呆呆的juejin.cn/post/684490… 的自定义Renderer篇章，因为我是参考此篇章写的代码，最后添加上自己的task样式，但伴随的问题就是输入task的文字不见了，作者是使用添加Label的方式加上内容，这方法没有问题，适合一些特定场合。

但是主管不满意这个方案，我又经过几天的摸索，总结出bpmn有关text.js源代码的方法，在这里提供一个可以使用自定义task的样式，又同时添加上源代码中的text文本框。

参考LinDaiDai_霖呆呆的自定义Renderer篇章，直接上代码：

    //CustomRender.js
    //引入源代码的Text.js,这里面的方法就是创建text显示框
    import Text from 'diagram-js/lib/util/Text'

    //这里的drawShape就是BaseRenderer.js的渲染方法
    drawShape = function(parentNode, element) {
        const type = element.type 
            if (customElements.includes(type)) { 
                //这里的if语句是判断是否是自定义节点，具体方法实现参考上面提到的文章
                const { url, attr,sendType } = customConfig[type]
                const customIcon = svgCreate('image', {
                    ...attr,
                    href: url,
                })
                element['width'] = attr.width 
                element['height'] = attr.height
                svgAppend(parentNode, customIcon)
                
                if (hasLabelElements.includes(type) && element.businessObject.name) {
                    //这里的if语句是判断是否有name属性的同时还是需要加text的自定义节点
                    var defaultStyle = {
                        fontSize: 12,
                        lineHeight: 1.2
                      }
                    //这里自定义Style，源代码里需要用到fontSize和lineHeight
                      var defaultSize = {
                        width: 100,
                        height: 80
                      }
                    //这里是自定义显示框大小，与task图片大小一致就行
                   
                    var customText =new Text({
                        size:defaultSize,
                        style: defaultStyle,
                        align: 'center-middle'
                      })
                   //创建实例后，除了传入刚刚定义的两个属性
                   //最重要的是添加上align: 'center-middle'才能保持文字居中
                    var text=customText.createText(element.businessObject.name,element)
                   //源代码的createText方法需要传入（'显示的文字','元素节点'）

                    svgAppend(parentNode, text)
                   //最后追加到父节点中就完成了
                }
                return parentNode
        }
    }
复制代码