diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index f17c8d75..87ceb8d3 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js @@ -1006,6 +1006,7 @@ export class CanvasManager { // 解析JSON字符串 try { const parsedJson = JSON.parse(json); + this.FixJsonIdLoss(parsedJson); this.canvasWidth.value = parsedJson.canvasWidth || this.width; this.canvasHeight.value = parsedJson.canvasHeight || this.height; this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor; @@ -1083,7 +1084,7 @@ export class CanvasManager { // console.log("图层关联验证结果:", isValidate); // 排序 // 使用LayerSort工具重新排列画布对象(如果可用) - await this?.layerManager?.layerSort?.rearrangeObjects(); + await this?.layerManager?.layerSort?.rearrangeObjectsAsync(); this.layerManager.activeLayerId.value = this.layers.value[0] .children?.length @@ -1125,6 +1126,27 @@ export class CanvasManager { throw new Error("解析JSON失败,请检查输入格式: " + error.message); } } + /** 修复JSON数据中的ID丢失问题 */ + FixJsonIdLoss(json){ + const layers = json?.layers || []; + const objects = json?.canvas?.objects || []; + layers.forEach((layer) => { + if(!layer.fabricObjects?.[0]?.id && !layer.fabricObject?.id){ + const obj = objects?.find((o) => o.layerId === layer.id); + if(obj) { + layer.fabricObjects = [{ + id: obj.id, + type: obj.type, + }] + } + } + }) + // 排序 + objects.sort((a, b) => { + if (a.isBackground) return -1; + if (b.isBackground) return 1; + }) + } /** * 缩放红绿图模式内容以适应当前画布大小 diff --git a/src/component/Canvas/CanvasEditor/utils/LayerSort.js b/src/component/Canvas/CanvasEditor/utils/LayerSort.js index fba7372b..9b1d670a 100644 --- a/src/component/Canvas/CanvasEditor/utils/LayerSort.js +++ b/src/component/Canvas/CanvasEditor/utils/LayerSort.js @@ -71,14 +71,17 @@ export class LayerSort { // if (!layer.visible) { // continue; // } - + let id = layer.fabricObject?.id || layer.fabricObjects?.[0]?.id || null; // 处理不同类型的图层 - if (layer.isBackground && layer.fabricObject) { + if (layer.isBackground && id) { // 背景图层对象放在最底层 - zIndexMap.set(layer.fabricObject.id, currentZIndex++); - } else if (layer.isFixed && layer.fabricObject) { + zIndexMap.set(id, currentZIndex++); + } else if (layer.isFixed && id) { // 固定图层对象 - zIndexMap.set(layer.fabricObject.id, currentZIndex++); + zIndexMap.set(id, currentZIndex++); + } else if (layer.isFixedOther && id) { + // 其他固定图层对象 + zIndexMap.set(id, currentZIndex++); } else if (!layer.isBackground && !layer.isFixed) { // 普通图层 currentZIndex = this.processLayerObjects(