Button 用于按钮和标记的混合/复杂文本节点

我需要用Arial和Fontawsome混合制作按钮和标签。HTML5画布在任何字体混合方面都相对粗糙，尽管Konvajs有方便的标签形状，但据我所见，除了单个文本节点之外，它不适应其他形状。看看我的答案片段，看看我想要什么，以及我是如何解决的。

这是我的解决方案。唯一的技巧是文本居中，我们必须使用shape.getWidth（）方法并存储每个元素的总宽度和宽度，以便最终定位

似乎有效

var s1=new Konva.Stage（{container:'container1'，宽度：200，高度：200}）；
var layer1=新的Konva.Layer（{draggable:false}）；
var bg1=new Konva.Rect（{宽度：200，高度：200，填充：'gold'，}）
第1层。添加（bg1）；
s1.增加（第1层）；
函数MakeComplexText（opts）{
var yOffset=6；
var txtEle=[]；
var-maxW=0；
var g=新的Konva.Group（{x:opts.pos.x，y:opts.pos.y}）；
g、 添加（新Konva.Rect（{width:opts.pos.w，height:opts.pos.h，fill:opts.bgClr，stroke:opts.lineClr，strokeWidth:1，cornerRadius:opts.cornerRadius}）；
如果（opts.symbolLeft！=“”）{
var t1=new Konva.Text（{name:'symText1'，y:yOffset+1，宽度：15，文本：opts.symboleft，fontfalime:'fontsawesome'，fontSize:11，fill:opts.textClr，align:'left'}）；
push（{obj:t1，w:t1.getWidth（）}）；
maxW=maxW+t1.getWidth（）；
g、 添加（t1）；
}
var t=new Konva.Text（{name:'btnText'，y:yOffset，height:opts.pos.h，Text:opts.Text，fontfamine:'Arial'，fontSize:11，fontStyle:'Bold'，fill:opts.textClr，align:'center'}）
push（{obj:t，w:t.getWidth（）}）；
maxW=maxW+t.getWidth（）；
g、 加（t）；
如果（opts.symbolRight！=“”）{
var t2=new Konva.Text（{name:'symText2'，y:yOffset+1，宽度：15，Text:opts.symbolRight，fontflash:'fontsawesome'，fontSize:11，fill:opts.textClr，align:'right'}）；
push（{obj:t2，w:t2.getWidth（）}）；
maxW=maxW+t2.getWidth（）；
g、 添加（t2）；
}
var xPos=（opts.pos.w-maxW）/2；
对于（变量i=0；i

---

嘿，唐纳德先生-你能解释一下为什么你对这个问题投了反对票吗？如果你不知道的话，回答你自己的问题是完全正确的，当我忘了的时候，这是一种再次找到解决方案的方法。