変数付きのFabric.js動的テキスト

Question

画像上にテキストが必要です。これは正常に動作しますが、私はまた、テキストがmysql dbから動的に来ることを望みます。

私は変数をオブジェクトに挿入する必要があります。私はそれがでは解決されません

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 }); 

私は、コンソールに 捕捉されない例外TypeErrorを得る：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に設定した文字列としてそれを作ります。