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。

Fabric.js带变量的动态文本

1 个答案: