javascript - 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>