diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index d0bd2bf4..882c556f 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/src/component/Canvas/CanvasEditor/index.vue @@ -148,8 +148,8 @@ } }) console.log("config", props.config) - const loading = ref(false) - const loading_ = ref(false) + const loading = ref(true) + const loading_ = ref(true) const loadingTimeout = ref(null) watch( () => loading.value, @@ -1001,7 +1001,7 @@ await new Promise((resolve) => optimizeCanvasRendering(canvasManager.canvas, resolve)) await canvasManager?.createOtherLayers?.(otherData) layerManager.activeLayerId.value = "" - layerManager?.sortLayers() + await layerManager?.sortLayers() await layerManager?.updateLayersObjectsInteractivity?.(true) canvasManager?.canvas?.renderAll() setTimeout(() => { diff --git a/src/component/Canvas/CanvasEditor/managers/LayerManager.js b/src/component/Canvas/CanvasEditor/managers/LayerManager.js index b0935346..ab64fa9f 100644 --- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js +++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js @@ -1580,7 +1580,7 @@ export class LayerManager { /** * 排序图层,确保图层顺序: 普通图层 > 固定图层 > 背景图层 */ - sortLayers() { + async sortLayers() { // 对图层进行排序:背景图层在最底层(数组最后),固定图层在中间 this.layers.value.sort((a, b) => { // 如果a是背景图层,它应该排在后面(最底层) @@ -1604,17 +1604,17 @@ export class LayerManager { }); // 更新画布对象顺序 - this._rearrangeObjects(); + await this._rearrangeObjects(); } /** * 重新排列画布上的对象以匹配图层顺序 * @private */ - _rearrangeObjects() { + async _rearrangeObjects() { if (this.layerSort) { // 使用LayerSort的高级排序 - this.layerSort.rearrangeObjects(); + await this.layerSort.rearrangeObjects(); return; } diff --git a/src/component/Canvas/CanvasEditor/utils/LayerSort.js b/src/component/Canvas/CanvasEditor/utils/LayerSort.js index d7c16369..ad12bafe 100644 --- a/src/component/Canvas/CanvasEditor/utils/LayerSort.js +++ b/src/component/Canvas/CanvasEditor/utils/LayerSort.js @@ -30,27 +30,30 @@ export class LayerSort { if (canvasObjects.length === 0) return; // 使用画布渲染优化 - await optimizeCanvasRendering(this.canvas, () => { - // 计算每个对象应该在的 z-index 位置 - const objectZIndexMap = this.calculateObjectZIndexes(); + await new Promise((resolve) => { + optimizeCanvasRendering(this.canvas, () => { + // 计算每个对象应该在的 z-index 位置 + const objectZIndexMap = this.calculateObjectZIndexes(); - // 按照新的 z-index 排序对象 - const sortedObjects = canvasObjects - .map((obj) => ({ - object: obj, - targetZIndex: objectZIndexMap.get(obj.id) ?? -1, - })) - .filter((item) => item.targetZIndex >= 0) // 过滤掉无效对象 - .sort((a, b) => a.targetZIndex - b.targetZIndex); + // 按照新的 z-index 排序对象 + const sortedObjects = canvasObjects + .map((obj) => ({ + object: obj, + targetZIndex: objectZIndexMap.get(obj.id) ?? -1, + })) + .filter((item) => item.targetZIndex >= 0) // 过滤掉无效对象 + .sort((a, b) => a.targetZIndex - b.targetZIndex); - // 使用 fabric.js 的 moveTo 方法重新排序 - sortedObjects.forEach((item, index) => { - const currentIndex = this.canvas.getObjects().indexOf(item.object); - if (currentIndex !== index && currentIndex !== -1) { - // 将对象移动到正确的位置 - this.canvas.moveTo(item.object, index); - } - }); + // 使用 fabric.js 的 moveTo 方法重新排序 + sortedObjects.forEach((item, index) => { + const currentIndex = this.canvas.getObjects().indexOf(item.object); + if (currentIndex !== index && currentIndex !== -1) { + // 将对象移动到正确的位置 + this.canvas.moveTo(item.object, index); + } + }); + resolve(); + }); }); } diff --git a/src/component/Detail/canvas/index.vue b/src/component/Detail/canvas/index.vue index ac0c3544..5451aeea 100644 --- a/src/component/Detail/canvas/index.vue +++ b/src/component/Detail/canvas/index.vue @@ -52,9 +52,9 @@ -
+