0
Я получаю объекты от сервера до fabricjs и инициализируя их функцией createSvgFromUrl. Свойства объектов извлекаются сервером, изображение находится в папке содержимого веб-сайта. На моих объектах есть свойство modifyDate. Однако я не могу правильно установить z-индекс этих объектов, поскольку loadSvgFromUrl в цикле, который вы видите ниже, запускается асинхронно для каждого элемента массива, поэтому не вызывая порядок выполнения canvas.bringToFront. Другая проблема заключается в том, что объекты создаются в надлежащем порядке, если в полученных данных нет текстового объекта. Поскольку вы можете видеть этот большой IF, объект создается иначе, чем текстовый объект.Fabricjs создает объекты в определенном порядке
Как создать объекты на холсте, чтобы получить их с сервера в массиве?
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();
}