帶變量的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。