我正在接收从服务器到fabricjs的对象，并通过函数createSvgFromUrl初始化它们。对象的属性由服务器检索，图像在网站内容文件夹中。在我的对象上有如果modifyDate属性。但是，我不能将这些对象的正确z-index设置为循环中的loadSvgFromUrl，您可以在下面看到，为每个数组项异步触发，因此不强制执行canvas.bringToFront的顺序。另一个问题是，如果接收到的数据中没有文本对象，则按正确顺序创建对象。正如您可以看到这个大IF，对象的创建方式与文本对象不同。
我如何在画布上创建对象，以便从阵列中的服务器接收它们？
var addFabricObjects = function(fabricObjects) {
for (var i = 0; i < fabricObjects.length; i++) {
if (fabricObjects[i].text == null) {
if (fabricObjects[i].src.startsWith("http")) {
var path = fabricObjects[i].src;
fabric.loadSVGFromURL(path, (function(i) {
return function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
obj.set(
{
width: fabricObjects[i].width,
height: fabricObjects[i].height,
left: fabricObjects[i].left,
top: fabricObjects[i].top,
src: fabricObjects[i].src,
mapId: fabricObjects[i].mapId,
id: fabricObjects[i].id,
tmpString: fabricObjects[i].tmpString,
scaleX: fabricObjects[i].scaleX,
scaleY: fabricObjects[i].scaleY,
angle: fabricObjects[i].angle,
hasRotatingPoint: fabricObjects[i].hasRotatingPoint,
index: fabricObjects[i].index,
modificationDate: fabricObjects[i].modificationDate,
originX: fabricObjects[i].originX,
originY: fabricObjects[i].originY,
selectable: !$scope.isReadOnly,
zindex: fabricObjects[i].zindex
}
);
obj.src = fabricObjects[i].src;
obj.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
mapId: this.mapId,
tmpString: this.tmpString,
id: this.id,
fill: this.fill,
width: this.width,
height: this.height,
src: fabricObjects[i].src,
scaleX: this.scaleX,
scaleY: this.scaleY,
angle: this.angle,
hasRotatingPoint: this.hasRotatingPoint,
index: this.index,
modificationDate: this.modificationDate,
top: this.top * canvasScale,
left: this.left * canvasScale,
originX: this.originX,
originY: this.originY,
zindex: this.zindex
});
};
})(obj.toObject);
canvas.add(obj);
}
})(i));
}
else {
var path = fabricObjects[i].src;
fabric.Image.fromURL(path, function (oImg) {
oImg.toObject = (function (toObject) {
return function () {
return fabric.util.object.extend(toObject.call(this), {
mapId: this.mapId,
tmpString: this.tmpString,
id: this.id,
fill: this.fill,
width: this.width,
height: this.height,
src: this.src,
scaleX: this.scaleX,
scaleY: this.scaleY,
hasRotatingPoint: this.hasRotatingPoint,
angle: this.angle,
index: this.index,
modificationDate: this.modificationDate,
originX: this.originX,
originY: this.originY,
zindex: this.zindex
});
};
})(oImg.toObject);
canvas.add(oImg);
}, {
width: fabricObjects[i].width,
height: fabricObjects[i].height,
left: fabricObjects[i].left,
top: fabricObjects[i].top,
src: fabricObjects[i].src,
mapId: fabricObjects[i].mapId,
id: fabricObjects[i].id,
tmpString: fabricObjects[i].tmpString,
scaleX: fabricObjects[i].scaleX,
scaleY: fabricObjects[i].scaleY,
angle: fabricObjects[i].angle,
index: fabricObjects[i].index,
modificationDate: fabricObjects[i].modificationDate,
originX: fabricObjects[i].originX,
originY: fabricObjects[i].originY,
selectable: !$scope.isReadOnly,
zindex: fabricObjects[i].zindex
});
}
}
else {
var iText1 = new fabric.IText(fabricObjects[i].text, {
fontFamily: fabricObjects[i].fontFamily,
fontStyle: fabricObjects[i].fontStyle,
textDecoration: fabricObjects[i].textDecoration,
fill: fabricObjects[i].fill,
fontWeight: fabricObjects[i].fontWeight,
mapId: fabricObjects[i].mapId,
id: fabricObjects[i].id,
scaleX: fabricObjects[i].scaleX,
scaleY: fabricObjects[i].scaleY,
angle: fabricObjects[i].angle,
index: fabricObjects[i].index,
modificationDate: fabricObjects[i].modificationDate,
hasRotatingPoint: fabricObjects[i].hasRotatingPoint,
originX: fabricObjects[i].originX,
originY: fabricObjects[i].originY,
selectable: !$scope.isReadOnly,
zindex: fabricObjects[i].zindex
});
iText1.left = fabricObjects[i].left;
iText1.top = fabricObjects[i].top;
iText1.toObject = (function (toObject) {
return function () {
return fabric.util.object.extend(toObject.call(this), {
mapId: this.mapId,
tmpString: this.tmpString,
id: this.id,
fill: this.fill,
width: this.width,
height: this.height,
scaleX: this.scaleX,
scaleY: this.scaleY,
angle: this.angle,
flipX: this.flipX,
flipY: this.flipY,
index: this.index,
modificationDate: this.modificationDate,
hasRotatingPoint: this.hasRotatingPoint,
originX: this.originX,
originY: this.originY,
zindex: this.zindex
});
};
})(iText1.toObject);
canvas.add(iText1);
iText1.mapId = Number($scope.mapId);
iText1.tmpString = JSON.stringify(iText1);
}
}
canvas.renderAll();
}
答案 0 :(得分：0)
您可以从这个问题中选择一些选项：Fabric.js loadSVGFromUrl not displaying multiple imported SVGS
有人提到“loadSVGFromURL中的onComplete回调”中存在错误，而有人也提供了一种排队系统。