文档准备就绪时，Fabric TextBox z-index 不正确答案

【问题标题】：Fabric TextBox z-index not proper when document ready文档准备就绪时，Fabric TextBox z-index 不正确
【发布时间】：2019-01-25 02:53:19
【问题描述】：

页面加载时我在画布上设置了 2 个图像，并在其后添加了一个织物文本框。

添加了文本框，但位于图像的后面。但是当我在单击按钮时添加相同的文本框，它添加在画布上的每个对象之上。

下面是我的代码

fabric.Object.prototype.transparentCorners = true;
fabric.Object.prototype.padding = 5;
var canvas = this.__canvas = new fabric.Canvas('canvas',{preserveObjectStacking: false});
canvas.controlsAboveOverlay = true;
canvas.setHeight(600);
canvas.setWidth(424);

//Code for adding first image
var cnt=0;
var imgObj = new Image();
imgObj.src = "blank.png";
var imgmain=imgObj.onload = function () {
var image = new fabric.Image(imgObj);
image.set({
    id:'changeimg',
    angle: 0,
    height:100,
    width:100,
    align: 'mid', //added
    originX: 'center', //added
    originY: 'center', //added
});
canvas.centerObject(image);
if(cnt==0){
    canvas.add(image);
}
}

//Code for adding second image
var temp_path=$("#hdnTemplate").val();
var imgObj1 = new Image();
imgObj1.src = temp_path;        
var imgmain=imgObj1.onload = function () {
var image1 = new fabric.Image(imgObj1);
image1.set({
    id:'backgroundimg',
    angle: 0,
    width:canvas.getWidth(),
    height:canvas.getHeight(),
    evented:false,
    selectable:false,
    /*scaleX:1,
    scaleY:1,*/
});
 canvas.add(image1);
}

//Code for adding textbox
var text1=canvas.add(new fabric.Textbox('New Text', { 
    left: 50,
    top: 50,
    fontFamily: 'comic sans ms',
    fill: '#FF0000',
    fontSize: 25
}));

在按钮单击时在画布上添加文本框的相同代码将文本框添加到所有图层上方

【问题讨论】：

onload 是异步方法

标签： html5-canvas fabricjs

【解决方案1】：

图像加载需要时间并且是异步的。

您的代码将文本框添加为第一个对象并加载 2 张图片。

加载完成后，您的代码会将图像添加到画布中。

如果您无法控制图像何时完成加载，您可以使用空图像创建 2 个图像对象，并在 onload 事件中使用“setElement”或“setSrc”刷新您的对象

【讨论】：