Text dynamique Fabric.js avec variable

Question

Je veux du texte sur une image. Cela fonctionne bien, mais je veux aussi que le texte provienne dynamiquement d'un db mysql.

Maintenant, j'ai besoin d'une variable à insérer dans l'objet.

var myVariable = "text"; 

var text = new fabric.Text(myVariable, { 
       fontFamily: 'Comic Sans', 
       fontSize: 20 
      }); 

Je ne suis pas solutionné par:

fabric.Image.fromURL('picture.png', function(img) { 

     img.setWidth(100); 
     img.setHeight(50); 

     theNumber = "2"; 

// ou

theNumber = 2; 


     var text = new fabric.Text(theNumber2, { 
      fontFamily: 'Comic Sans', 
      fontSize: 20 
     }); 


     text.set({ text: theNumber2 }); 

je reçois dans la console, Uncaught TypeError: this.text.split n'est pas une fonction fabric.min.js: 7

Puis-je ajouter dynamiquement le texte d'une autre manière?

Answer 1

var canvas = new fabric.Canvas('c'); 
 
var theNumber = 2; 
 
var text = new fabric.Text(theNumber.toString(), { 
 
    fontFamily: 'Comic Sans', 
 
    fontSize: 20, 
 
    left:50, 
 
    top:50 
 
}); 
 

 
canvas.add(text); 
 

 
//image with text(Number) 
 

 
fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png', function(img) { 
 

 
    img.setWidth(100); 
 
    img.setHeight(100); 
 

 
    var text = new fabric.Text(theNumber.toString(), { 
 
     fontFamily: 'Comic Sans', 
 
     fontSize: 20, 
 
     fill:'white', 
 
     left:img.width/2, 
 
     top:img.height/2, 
 
     originX:'center', 
 
     originY:'center', 
 
    }); 
 
    var group = new fabric.Group([img, text]); 
 
    canvas.add(group); 
 
    canvas.centerObject(group); 
 
    group.setCoords(); 
 
    }); 
 
//text.set({ text: theNumber2 });

canvas { 
 
    border: 2px dotted blue; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.js"></script> 
 
<canvas id="c" width="400" height="400"></canvas>

Utilisez comme ça theNumber.toString(), parce que vous définissez un nombre, font comme chaîne rétablissez alors fabric.Text.