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();
+    clearTimeout(trailingTimeout);
-    const throttleDelay = 100;
+    trailingTimeout = setTimeout(() => {
-
+	  optimizeCanvasRendering(canvasManager.canvas, ()=> handleWindowResize());
-    if (!throttleTimeout) {
+    }, throttleDelay);
-      // 立即执行一次
-      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);
-    }
   });
   observer.observe(canvasContainerRef.value);
   // 使用window的resize事件代替ResizeObserver
@@ -575,17 +551,16 @@ onBeforeUnmount(async () => {
 });
 
 // 窗口大小变化处理函数
-function handleWindowResize() {
+async function handleWindowResize() {
-  console.log(132);
+  console.log("==========画布窗口大小变化==========");
   // 使用requestAnimationFrame来防止频繁更新
-  setTimeout(() => {
+  await new Promise(requestAnimationFrame);
-	if(!canvasManager) return;
+  if(!canvasManager) return;
-    // 更新画布大小并自动居中所有元素
+  updateCanvasSize();
-    updateCanvasSize();
+  // 确保显示的缩放信息是最新的
-
+  currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100);
-    // 确保显示的缩放信息是最新的
+  await new Promise(requestAnimationFrame);
-    currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100);
+  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;
   },

src/component/Canvas/canvasExample.vue

@@ -118,6 +118,7 @@ const updateOtherLayersColor = async () => {
 };
 // 更新其他图层印花
 const updateOtherLayersPrint = async () => {
+  document.querySelector(".app-container").style.width = "50vw"
   const obj = {
 	printObject: {
 		prints: [

src/component/Canvas/test.vue

@@ -1,10 +1,95 @@
 <template>
-	<demo />
+	<div class="test" ref="testRef">
+		<!-- <div class="canvas-container">
+			<canvas id="canvas"></canvas>
+		</div> -->
+	</div>
 </template>
 
 <script lang="ts" setup>
-	import demo from "./OverallCanvas/demo.vue";
+	import { fabric } from "fabric-with-all";
+	import { ref, watch, onMounted } from "vue";
+	const imageUrl = "/src/assets/images/canvas/xiangaofenge.png";
+	const testRef = ref(null);
+
+	var canvas = null;
+	onMounted(() => {
+		canvas = new fabric.Canvas("canvas");
+		canvas.setWidth(800);
+		canvas.setHeight(600);
+		// fabric.Image.fromURL(imageUrl, (img) => {
+		// 	console.log(img.getElement());
+		// 	img.set({
+		// 		scaleX: 0.5,
+		// 		scaleY: 0.5,
+		// 	});
+		// 	canvas.add(img);
+		// });
+		const image = new Image();
+		image.src = imageUrl;
+		image.onload = () => {
+			const canvas1 = document.createElement("canvas");
+			const width = image.width / 2;
+			const height = image.height / 2;
+			canvas1.width = width;
+			canvas1.height = height;
+			const ctx1 = canvas1.getContext("2d");
+			ctx1.drawImage(image, 0, 0, width, height);
+			const data = ctx1.getImageData(0, 0, width, height);
+			testRef.value.appendChild(canvas1);
+			const testData = test(data);
+			const canvas2 = document.createElement("canvas");
+			canvas2.width = width;
+			canvas2.height = height;
+			const ctx2 = canvas2.getContext("2d");
+			ctx2.putImageData(testData, 0, 0);
+			testRef.value.appendChild(canvas2);
+		};
+	});
+	// 获取图片轮廓点位
+	function test(data) {
+		// 找过的点位
+		const visited = [];
+		// 轮廓点位
+		const contours = [];
+		const { width, height } = data;
+		function cd(x, y) {
+			const arr = [
+				[x, y], // 当前
+				[x, y - 1], // 上
+				[x + 1, y], // 右
+				[x, y + 1], // 下
+				[x - 1, y], // 左
+			];
+			for (let i = 0; i < arr.length; i++) {
+				let [x1, y1] = arr[i];
+				if (x1 < 0 || x1 >= width || y1 < 0 || y1 >= height) continue;
+				let key = `${x1},${y1}`;
+				if (visited.includes(key)) continue;
+				visited.push(key);
+				let index = (y1 * width + x1) * 4;
+				let r = data.data[index];
+				let g = data.data[index + 1];
+				let b = data.data[index + 2];
+				let a = data.data[index + 3];
+				if ((r || g || b) && a) {
+					contours.push({ x: x1, y: y1 });
+				} else {
+					if (i > 0) cd(x1, y1);
+				}
+			}
+		}
+		cd(0, 0);
+		console.log(contours);
+		return data;
+	}
 </script>
 
 <style lang='less' scoped>
+	.test {
+		.canvas-container {
+			display: inline-block;
+			border: 1px solid #000;
+		}
+	}
 </style>