Noeud de texte mixte/complexe inc FontAwsome pour les boutons et les étiquettes

Question

J'avais besoin de faire des boutons et des étiquettes avec un mélange d'Arial et de Fontawsome. La toile de HTML 5 est relativement brute en termes de mélange de polices, et bien que Konvajs ait la forme d'étiquette de commodité qu'elle ne s'adapte pas à des formes autres qu'un seul noeud de texte, autant que je peux voir. Jetez un oeil à mon extrait de réponse pour voir ce que je voulais, et comment je l'ai résolu.

Answer 1

Voici ma solution. Le seul truc est le centrage du texte pour lequel nous devons utiliser la méthode shape.getWidth() et stocker la largeur totale et la largeur de chaque élément pour le positionnement final.

Semble fonctionner.

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>