画布loading

src/component/Canvas/CanvasEditor/index.vue

@@ -148,8 +148,8 @@
 		}
 	})
 	console.log("config", props.config)
-	const loading = ref(false)
+	const loading = ref(true)
-	const loading_ = ref(false)
+	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(() => {

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;
     }
 

src/component/Canvas/CanvasEditor/utils/LayerSort.js

@@ -30,27 +30,30 @@ export class LayerSort {
     if (canvasObjects.length === 0) return;
 
     // 使用画布渲染优化
-    await optimizeCanvasRendering(this.canvas, () => {
+	await new Promise((resolve) => {
-      // 计算每个对象应该在的 z-index 位置
+		optimizeCanvasRendering(this.canvas, () => {
-      const objectZIndexMap = this.calculateObjectZIndexes();
+		// 计算每个对象应该在的 z-index 位置
+		const objectZIndexMap = this.calculateObjectZIndexes();
 
-      // 按照新的 z-index 排序对象
+		// 按照新的 z-index 排序对象
-      const sortedObjects = canvasObjects
+		const sortedObjects = canvasObjects
-        .map((obj) => ({
+			.map((obj) => ({
-          object: obj,
+			object: obj,
-          targetZIndex: objectZIndexMap.get(obj.id) ?? -1,
+			targetZIndex: objectZIndexMap.get(obj.id) ?? -1,
-        }))
+			}))
-        .filter((item) => item.targetZIndex >= 0) // 过滤掉无效对象
+			.filter((item) => item.targetZIndex >= 0) // 过滤掉无效对象
-        .sort((a, b) => a.targetZIndex - b.targetZIndex);
+			.sort((a, b) => a.targetZIndex - b.targetZIndex);
 
-      // 使用 fabric.js 的 moveTo 方法重新排序
+		// 使用 fabric.js 的 moveTo 方法重新排序
-      sortedObjects.forEach((item, index) => {
+		sortedObjects.forEach((item, index) => {
-        const currentIndex = this.canvas.getObjects().indexOf(item.object);
+			const currentIndex = this.canvas.getObjects().indexOf(item.object);
-        if (currentIndex !== index && currentIndex !== -1) {
+			if (currentIndex !== index && currentIndex !== -1) {
-          // 将对象移动到正确的位置
+			// 将对象移动到正确的位置
-          this.canvas.moveTo(item.object, index);
+			this.canvas.moveTo(item.object, index);
-        }
+			}
-      });
+		});
+		resolve();
+		});
     });
   }
 

src/component/Detail/canvas/index.vue

@@ -52,9 +52,9 @@
 			</div>
 		 </div>
 		
-		<div class="mark_loading" v-show="isShowMark">
+		<!-- <div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
-		</div>
+		</div> -->
     </div>
     
 </template>