在画布上绘制一个包含图像的文本框，并使用织物 js 在其上绘制一些图像答案

【问题标题】：Draw a textbox on canvas that contains an image and some drawing over it using fabric js在画布上绘制一个包含图像的文本框，并使用织物 js 在其上绘制一些图像
【发布时间】：2021-07-27 16:50:48
【问题描述】：

我正在尝试在画布上绘制一个文本框，其中包含图像和一些绘图。现在我正在尝试在它上面绘制一个文本框。当我尝试使用fabricJS初始化画布对象时，它首先使画布为空。喜欢..

var canvas = new fabric.Canvas('mycanvas')

在这段代码之后，它使画布为空。但是，如果我在画布初始化后一开始就初始化此代码，然后我尝试向该画布对象添加一个文本框，例如...

 var text = new fabric.Textbox('A Computer Science Portal', 
 {
    width: 450,
    height: 10,
    top: 100,
    left: 100,
 });
this.canvas.add(text);

然后文本框不可见。我认为它进入了图像的背景。我已经编写了很多用于在画布上绘图的代码，不想在所有现有的绘图和仅用 javascript 开发的图像之后在画布上绘制文本框。

【问题讨论】：

标签： javascript html5-canvas fabricjs

【解决方案1】：

在 Fabric 上，您有 bringToFront 使用它来将文本保持在顶部，这是一个示例：

var image;
var canvas = new fabric.Canvas('canvas');
var url = "http://swagger-net-test.azurewebsites.net/api/SvgImage?"

var text = new fabric.Textbox('TEST', { width: 90, height: 10, top: 30, left: 50 });
this.canvas.add(text);

function loadSVG(url) {
  fabric.loadSVGFromURL(url, function(objects, options) {
    if (image) canvas.remove(image);
    image = fabric.util.groupSVGElements(objects, options);
    image.name = 'sticker';
    canvas.add(image);
    image.scaleToHeight(100);
    image.center();
    image.setCoords();
    canvas.renderAll();
    canvas.bringToFront(text)
  });
}

loadSVG(url + "color=red")
setTimeout(function() {
  loadSVG(url + "color=blue")
}, 3000);

<canvas id="canvas" width="200" height="200"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>

【讨论】：