带变量的Fabric.js动态文本

Question

我想在图像上添加一些文字。这工作正常，但我也希望文本动态从一个MySQL数据库。

现在我需要一个变量插入到对象中。

var myVariable = "text"; 

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

我不明白这一点的解决：

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

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

     theNumber = "2"; 

//或

theNumber = 2; 


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


     text.set({ text: theNumber2 }); 

我在控制台中看到， 遗漏的类型错误：this.text.split不一个函数fabric.min.js：7

我可以以另一种方式动态添加文本吗？

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>

使用这样theNumber.toString()，因为你设置数量，使其为字符串，然后将其设置为fabric.Text。