Fabric.js 带有变量的动态文本答案

【问题标题】：Fabric.js dynamic text with variableFabric.js 带有变量的动态文本
【发布时间】：2018-01-19 14:26:47
【问题描述】：

我想在图像上添加一些文字。这很好用，但我也希望文本动态来自 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 });

我进入控制台， Uncaught TypeError: this.text.split is not a function fabric.min.js:7

我可以以其他方式动态添加文本吗？

【问题讨论】：

您的代码运行良好。如果你想动态添加文本，你可以在 api 的帮助下完成。
你是对的，代码在字符串中运行良好。不知道为什么它一开始就不起作用。坦克你！

标签： javascript text html5-canvas fabricjs

【解决方案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。

【讨论】：