Fabric JS如何在图像上添加文本

Question

我需要在img对象上添加文本我的代码

$("#c2").click(function(){
fabric.Image.fromURL('/some/link/free_circle_2.png', function(img){
    img.setWidth(50);
    img.setHeight(50);
    canvas.add(img);

  });
});

添加图像后，我需要添加以该图像为中心的数字。 我知道我需要更改canvas.add(img); 到canvas.sendToBack(img); 但是如何添加文本以保持图像的位置

Answer 1

要根据图片的位置保持文本的位置，应使用Group ，如下所示：

var group = new fabric.Group([img, text], {
          left: 150,
          top: 100,

        });

然后将文本放置在图像的中间，因为文本相对于组的位置，您应该执行以下操作：

text.set("top", (img.getBoundingRect().height / 2) - (text.width / 2));
text.set("left", (img.getBoundingRect().width / 2) - (text.height / 2));

getBoundingRect返回对象边界矩形的坐标（左，上，宽，高）

然后，

如果需要，请尝试以下可运行的示例：

 var canvas = new fabric.Canvas('c'); $("#c2").click(function() { fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/2/25/Herma_of_Plato_-_0049MC.jpg', function(img) { img.setWidth(100); img.setHeight(100); var text = new fabric.Text("01", { fontFamily: 'Comic Sans', fontSize: 20 }); text.set("top", (img.getBoundingRectHeight() / 2) - (text.width / 2)); text.set("left", (img.getBoundingRectWidth() / 2) - (text.height / 2)); var group = new fabric.Group([img, text], { left: 100, top: 25, }); canvas.add(group); }); }); 

 canvas { border: 1px dashed #333; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id='c' width=300 height=150 '></canvas> <br> <button id='c2'>ok</button>