Fabric.js dynamischer Text mit Variable

Question

Ich möchte etwas Text auf einem Bild. Das funktioniert gut, aber ich möchte auch, dass der Text dynamisch aus einer MySQL-Datenbank kommt.

Jetzt brauche ich eine Variable in das Objekt einzufügen.

var myVariable = "text"; 

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

ich es gelöst werden nicht:

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

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

     theNumber = "2"; 

// oder

theNumber = 2; 


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


     text.set({ text: theNumber2 }); 

ich in der Konsole, Uncaught Typeerror: ist this.text.split nicht eine Funktion fabric.min.js: 7

Kann ich den Text auf andere Weise dynamisch hinzufügen?

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>

Verwenden ähnliche theNumber.toString(), weil Sie eine Reihe setzen, es als String machen dann setzen Sie ihn auf fabric.Text.