Question

加载页面时，我在画布上设置了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
}));

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

Answer 1

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

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

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

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

准备好文档后，Fabric TextBox z-index不正确

1 个答案: