画布内容储存,pose等入参回显

src/component/Canvas/CanvasEditor/index.vue

@@ -135,6 +135,12 @@ const lastSelectLayerId = ref(null); // 最后选择的图层ID
 // 当前选择的工具
 const activeTool = ref(CanvasConfig.defaultTool); // 默认工具
 
+
+//监听画布元素宽度是否发生变化
+let observer = null
+let observerTime = null//加入防抖
+
+
 // 管理器实例
 let canvasManager = null;
 let layerManager = null;
@@ -407,10 +413,22 @@ onMounted(async () => {
       }, 300);
     });
   });
-
+  
+	observer = new ResizeObserver(entries => {
+		for (let entry of entries) {
+			clearTimeout(observerTime)
+			observerTime = setTimeout(()=>{
+				nextTick(()=>{
+					handleWindowResize()
+				})
+			},100)
+			// const { width } = entry.contentRect;
+		}
+	});
+	observer.observe(canvasContainerRef.value);
   // 使用window的resize事件代替ResizeObserver
   // 只有当窗口大小变化时才更新画布尺寸
-  window.addEventListener("resize", handleWindowResize);
+//   window.addEventListener("resize", handleWindowResize);
 });
 
 watchEffect(() => {
@@ -454,11 +472,13 @@ onBeforeUnmount(() => {
   redGreenModeManager = null;
 
   // 移除window resize事件监听
-  window.removeEventListener("resize", handleWindowResize);
+//   window.removeEventListener("resize", handleWindowResize);
+	observer.unobserve(canvasContainerRef.value);
 });
 
 // 窗口大小变化处理函数
 function handleWindowResize() {
+	console.log(132)
   // 使用requestAnimationFrame来防止频繁更新
   requestAnimationFrame(() => {
     // 更新画布大小并自动居中所有元素