Question

我正在尝试使用fabric.js来创建人们用来设计手机外壳和东西的其中一个网络应用程序，但是当我添加图像并在画布中添加文本时，我遇到了ITEXT和图像的问题它并没有显示

这是图片的代码

fabric.Image.fromURL(e.target.result, function (oImg) {
                    canvas.clear();
                    canvas.add(oImg);
                });

这里是IText的代码

    $('#add').click(function () {
        canvas.add(new fabric.IText('Tap and Type', {
            left: 50,
            top: 100,
            fontFamily: 'Tangerine arial black',
            fill: '#000',
            fontSize: 20,
            paintFirst: 'stroke',
            selectionBackgroundColor: 'rgba(255,255,255,0.8)',
        }));
        canvas.renderAll(); 
    })

任何尝试的坦克

Answer 1

很奇怪，默认情况下，最新添加的对象位于绘制对象堆栈的顶部。无论如何，如果您只需要一个图像作为背景，您可能想要使用

fabric.Image.fromURL(e.target.result, (img) => {
      canvas.clear();
      canvas.setBackgroundImage(img, () => { 
// handle promise resolution here if you want to });
});

如果你不想要 - 也许是几张图片，也许是别的东西 - 你也可以使用

fabric.Image.fromURL(e.target.result, (img) => {
      canvas.clear();
      canvas.add(img);
      canvas.sendToBack(img);
});

强制您的图像定位在绘制对象堆栈的底部。

Answer 2

好吧，经过几个小时的代码攻击，我发现了如何做到这一点，

var canvas = new fabric.Canvas('tcanvas', {
        hoverCursor: 'pointer',
        preserveObjectStacking: true, ////this prevents it from rearranging on the z axis 
        selection: true,
    });

这不足以将它与图像在背景中的图像保持在文本之后添加图像所以你使用

fabric.Image.fromURL(e.target.result, (img) => {
  canvas.clear();
  canvas.add(img);
  canvas.sendToBack(img);

}）;

多数民众赞成你们所有人

Fabric.js移动它后覆盖文本的图像

2 个答案: