前言
想要自定义Renderer中的task节点并添加text
在此之前，先看完LinDaiDai_霖呆呆的自定义Renderer篇章
因为我是参考此篇章写的代码，添加上自己的task图片样式，但伴随的问题就是输入task的文字不见了，作者是使用添加Label的方式加上内容，这方法没有问题，适合一些特定场合，效果如下图所示：
但是不适用于公司业务，又经过几天的摸索，找出bpmn有关text.js源代码的方法，
在这里提供一个可以使用自定义task的图片背景样式，又同时添加上bpmn源代码中的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
}
}
加入以上代码就可以创建出text显示框，效果跟原生节点一样：
想看创建text的源代码可以到node_modules/diagram-js/lib/util/Text.js查看
//然后你会发现文字需要左对齐却办不到，这时候通过align属性还可以设置文字对齐方式
//align属性设置为'left-middle'，就是偏左对齐，居中显示
var customText = new Text({
size: defaultSize,
style: defaultStyle,
align: 'left-middle',
padding: defaultPadding
})
最近因为公司业务的需要，会使用到bpmn.js，
在网络上找相关文档来琢磨，还有很多坑都要自己去找。
首先在这里推荐一些掘金作者很好用的文章，避免踩坑。
作者：LinDaiDai_霖呆呆
作品：全网最详bpmn.js教材目录： juejin.cn/post/684490…
作者：MiyueFE
作品：bpmn.js中文文档（一）： juejin.cn/post/690079…
bpmn.js中文文档（二）： juejin.cn/post/692530…
