Mixed/complex text node inc用于按钮和标记的FontAwsome

Question

我需要制作具有Arial和Fontawsome混合的按钮和标签。就任何字体混合而言，HTML 5画布相对粗糙，尽管Konvajs具有方便的标签形状，但它并不适用除单个文本节点以外的形状，据我所知。看看我的答案片断，看看我想要什么，以及我如何解决它。

Answer 1

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

似乎工作。

var s1 = new Konva.Stage({container: 'container1', width: 200, height: 200}); 
 
var layer1 = new Konva.Layer({draggable: false}); 
 
var bg1 = new Konva.Rect({width: 200, height: 200, fill: 'gold', }) 
 
layer1.add(bg1); 
 
s1.add(layer1); 
 

 

 
     function MakeComplexText(opts){ 
 
      var yOffset = 6; 
 
      var txtEle = []; 
 
      var maxW = 0; 
 
      var g = new Konva.Group({x: opts.pos.x, y: opts.pos.y}); 
 
      g.add(new Konva.Rect({width: opts.pos.w, height: opts.pos.h, fill: opts.bgClr, stroke: opts.lineClr, strokeWidth: 1, cornerRadius: opts.cornerRadius})); 
 

 
      if (opts.symbolLeft != ""){ 
 
       var t1 = new Konva.Text({name: 'symText1', y: yOffset + 1, width: 15, text: opts.symbolLeft, fontFamily: 'FontAwesome', fontSize: 11, fill: opts.textClr, align: 'left'}); 
 
       txtEle.push({obj: t1, w: t1.getWidth()}); 
 
       maxW = maxW + t1.getWidth(); 
 
       g.add(t1); 
 
      } 
 

 
      var t = new Konva.Text({name: 'btnText', y: yOffset, height: opts.pos.h, text: opts.text, fontFamily: 'Arial', fontSize: 11, fontStyle: "Bold", fill: opts.textClr, align: 'center'}) 
 
      txtEle.push({obj: t, w: t.getWidth()}); 
 
      maxW = maxW + t.getWidth(); 
 
      g.add(t); 
 

 
      if (opts.symbolRight != ""){ 
 
       var t2 = new Konva.Text({name: 'symText2', y: yOffset + 1, width: 15, text: opts.symbolRight, fontFamily: 'FontAwesome', fontSize: 11, fill: opts.textClr, align: 'right'}); 
 
       txtEle.push({obj: t2, w: t2.getWidth()}); 
 
       maxW = maxW + t2.getWidth(); 
 
       g.add(t2); 
 
      } 
 
      
 
      var xPos = (opts.pos.w - maxW)/2; 
 
      for (var i = 0; i < txtEle.length; i = i + 1){ 
 
       txtEle[i].obj.x(xPos); 
 
       xPos = xPos + txtEle[i].w; 
 
      } 
 

 
      opts.parent.add(g); 
 
      return g; 
 
     } 
 

 

 
     // move button icon right only 
 
     var btnModeMoveR = MakeComplexText(
 
      {parent: layer1, pos: {x:5, y:7, w: 75, h: 24}, text: "Move", textClr: "#666666", bgClr: "#cccccc", lineClr: "#666666", symbolLeft: "", symbolRight: "\uf047", cornerRadius: 0} 
 
     ); 
 

 
     // move button with icons left & right 
 
     var btnModeMoveL = MakeComplexText(
 
      {parent: layer1, pos: {x:5, y:37, w: 75, h: 24}, text: "Move", textClr: "#666666", bgClr: "#cccccc", lineClr: "#666666", symbolLeft: "\uf047", symbolRight: "\uf047", cornerRadius: 0} 
 
     ); 
 

 
     // Reresh button icon left 
 
     var btnModeMoveL = MakeComplexText(
 
      {parent: layer1, pos: {x:5, y:67, w: 75, h: 24}, text: "Refresh", textClr: "#666666", bgClr: "#cccccc", lineClr: "#666666", symbolLeft: "", symbolRight: "\uf021", cornerRadius: 0} 
 
     ); 
 

 

 
     // to make a tooltip we combine a label and complex text in a group. 
 

 
     var g = new Konva.Group({ x: 5, y: 97}); 
 

 
     var tooltip = new Konva.Label({x: 0, y: 0, width: 100}); 
 
     tooltip.add(new Konva.Tag({ 
 
     fill: "#cccccc", 
 
     pointerDirection: 'right', 
 
     pointerWidth: 10, 
 
     pointerHeight: 10, 
 
     lineJoin: 'round', 
 
     width: 80, 
 
     height: 24 
 
     })); 
 
     g.add(tooltip); 
 
     // edit button 
 
     var btnEdit = MakeComplexText(
 
      {parent: g, pos: {x:0, y:0, w: 75, h: 24}, text: "Edit", textClr: "#666666", bgClr: "#cccccc", lineClr: "transparent", symbolLeft: "", symbolRight: "\uf14b", cornerRadius: 0} 
 
     ); 
 
    layer1.add(g) 
 

 
// btnEdit.moveTo(layer1); 
 

 

 

 
s1.draw()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script> 
 

 
<div id='container1' style="display: inline-block; width: 400px, height: 400px; background-color: silver; overflow: hidden;"></div>