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

Posted 2023-03-25

【中文标题】Fabric.js 带有变量的动态文本

【英文标题】：Fabric.js dynamic text with variable

【发布时间】：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 的帮助下完成。

你是对的，代码在字符串中运行良好。不知道为什么它一开始就不起作用。坦克你！

【参考方案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"  ></canvas>

像这样使用theNumber.toString()，因为你要设置一个数字，所以把它做成字符串然后设置成fabric.Text。