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返回对象的边界矩形（左，顶部，宽度，高度）的坐标

然后，

如果满足您的需求，请尝试以下可运行的示例：

＆＃13;

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);
  });
});

＆＃13;

canvas {
  border: 1px dashed #333;
}

＆＃13;

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

＆＃13;

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

1 个答案: