111

src/component/Canvas/CanvasEditor/index.vue

@@ -46,6 +46,7 @@ import {
   loadImageUrlToLayer,
   loadImage,
 } from "./utils/imageHelper.js";
+import { optimizeCanvasRendering } from "./utils/helper";
 // import MinimapPanel from "./components/MinimapPanel.vue";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
@@ -482,38 +483,13 @@ onMounted(async () => {
     }, 700);
   });
 
-  let throttleTimeout = null;
-  let lastRunTime = 0;
   let trailingTimeout = null;
-
+  let throttleDelay = 100;
   observer = new ResizeObserver((entries) => {
-    const now = Date.now();
-    const throttleDelay = 100;
-
-    if (!throttleTimeout) {
-      // 立即执行一次
-      handleWindowResize();
-      layerManager?.updateLayersObjectsInteractivity?.();
-      setTimeout(() => {
-        layerManager?.updateLayersObjectsInteractivity?.();
-      });
-      lastRunTime = now;
-
-      throttleTimeout = setTimeout(() => {
-        throttleTimeout = null;
-      }, throttleDelay);
-    } else {
-      // 如果在节流期间有新的变化，则重置尾触发
-      clearTimeout(trailingTimeout);
-      trailingTimeout = setTimeout(() => {
-        handleWindowResize();
-        layerManager?.updateLayersObjectsInteractivity?.();
-        setTimeout(() => {
-          layerManager?.updateLayersObjectsInteractivity?.();
-        });
-        lastRunTime = Date.now();
-      }, throttleDelay);
-    }
+    clearTimeout(trailingTimeout);
+    trailingTimeout = setTimeout(() => {
+	  optimizeCanvasRendering(canvasManager.canvas, ()=> handleWindowResize());
+    }, throttleDelay);
   });
   observer.observe(canvasContainerRef.value);
   // 使用window的resize事件代替ResizeObserver
@@ -575,17 +551,16 @@ onBeforeUnmount(async () => {
 });
 
 // 窗口大小变化处理函数
-function handleWindowResize() {
-  console.log(132);
+async function handleWindowResize() {
+  console.log("==========画布窗口大小变化==========");
   // 使用requestAnimationFrame来防止频繁更新
-  setTimeout(() => {
-	if(!canvasManager) return;
-    // 更新画布大小并自动居中所有元素
-    updateCanvasSize();
-
-    // 确保显示的缩放信息是最新的
-    currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100);
-  });
+  await new Promise(requestAnimationFrame);
+  if(!canvasManager) return;
+  updateCanvasSize();
+  // 确保显示的缩放信息是最新的
+  currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100);
+  await new Promise(requestAnimationFrame);
+  await layerManager?.updateLayersObjectsInteractivity?.();
 }
 
 function resetZoom() {
@@ -978,13 +953,14 @@ defineExpose({
     });
   },
   updateOtherLayers: async (otherData) => {
+	await new Promise((resolve) => optimizeCanvasRendering(canvasManager.canvas, resolve));
     await canvasManager?.createOtherLayers?.(otherData, true);
 	layerManager.activeLayerId.value = ""
 	layerManager?.sortLayers();
 	await layerManager?.updateLayersObjectsInteractivity?.(true);
 	canvasManager?.canvas?.renderAll();
 	setTimeout(() => {
-      canvasManager.updateAllThumbnails();
+      canvasManager?.updateAllThumbnails();
     }, 500);
 	return true;
   },