From 7b071bc58578f8f5e5cad56a9983c178ffdad867 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com>
Date: Fri, 9 Jan 2026 17:05:46 +0800
Subject: [PATCH] fix

---
 src/component/Canvas/pingpu.vue | 32 +++++++++++++---------
 src/component/Canvas/test.vue   | 48 ++++++++++++++++++++++++++++++++-
 2 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/src/component/Canvas/pingpu.vue b/src/component/Canvas/pingpu.vue
index df795f69..59d53846 100644
--- a/src/component/Canvas/pingpu.vue
+++ b/src/component/Canvas/pingpu.vue
@@ -24,6 +24,7 @@
 		O_BLENDMODE: "object.blendMode",
 	};
 	const ACTIONS = {
+		ADD: "add",
 		SELECT: "select",
 		UPDATE: "update",
 		DELETE: "delete",
@@ -168,24 +169,25 @@
 	};
 	const setCanvasData = async () => {
 		canvas.clear();
-		const cwidth = canvas.width;
-		const cheight = canvas.height;
-
 		for (let i = 0; i < props.list.length; i++) {
 			let item = props.list[i];
-			let pattern = await setFill(item);
-			let rect = new fabric.Rect({
-				id: item.id,
-				width: cwidth,
-				height: cheight,
-				fill: pattern,
-
-				...item.object,
-			});
-			canvas.add(rect);
+			await addObject(item);
 		}
 		canvas.renderAll();
 	};
+	const addObject = async (item) => {
+		const cwidth = canvas.width;
+		const cheight = canvas.height;
+		let pattern = await setFill(item);
+		let rect = new fabric.Rect({
+			id: item.id,
+			width: cwidth,
+			height: cheight,
+			fill: pattern,
+			...item.object,
+		});
+		canvas.add(rect);
+	};
 	const setFill = async (item) => {
 		if (!item) return null;
 		const cwidth = canvas.width;
@@ -280,6 +282,10 @@
 					canvas.add(object);
 				}
 				canvas.renderAll();
+			} else if (item.action === ACTIONS.DELETE) {
+				canvas.remove(object);
+			} else if (item.action === ACTIONS.ADD) {
+				await addObject(item.data);
 			}
 		}
 		canvas.renderAll();
diff --git a/src/component/Canvas/test.vue b/src/component/Canvas/test.vue
index 7153f8d9..0f72a932 100644
--- a/src/component/Canvas/test.vue
+++ b/src/component/Canvas/test.vue
@@ -21,6 +21,7 @@
 				>
 					→
 				</button>
+				<button @click.stop="onDelete(item.id)">删除</button>
 			</div>
 			<div>
 				<span>偏移X</span>
@@ -80,6 +81,7 @@
 				/>
 			</div>
 		</div>
+		<button @click="onAdd">添加</button>
 		<div class="box">
 			<pingpu
 				:list="list"
@@ -94,9 +96,10 @@
 	import { ref, onMounted, watch } from "vue";
 	import pingpu from "./pingpu.vue";
 	const ACTIONS = {
-		SELECT: "select",
+		ADD: "add",
 		UPDATE: "update",
 		DELETE: "delete",
+		SELECT: "select",
 		SORT: "sort",
 	};
 
@@ -211,6 +214,49 @@
 			},
 		]);
 	};
+	const onDelete = (id) => {
+		list.value = list.value.filter((v) => v.id !== id);
+		pingpuRef.value.updataList([
+			{
+				id: id,
+				action: ACTIONS.DELETE,
+			},
+		]);
+	};
+	const onAdd = () => {
+		const obj = {
+			id: Date.now().toString(),
+			ifSingle: false,
+			level2Type: "Pattern",
+			designType: "Library",
+			path: "/src/assets/images/canvas/yinhua1.jpg",
+			location: [0, 0],
+			scale: [1, 1],
+			angle: 0,
+			name: "Print" + (list.value.length + 1),
+			priority: 1,
+			object: {
+				top: 0,
+				left: 0,
+				scaleX: 1,
+				scaleY: 1,
+				opacity: 1,
+				angle: 0,
+				flipX: false,
+				flipY: false,
+				blendMode: "multiply",
+				gapX: 10,
+				gapY: 20,
+			},
+		};
+		list.value.push(obj);
+		pingpuRef.value.updataList([
+			{
+				action: ACTIONS.ADD,
+				data: obj,
+			},
+		]);
+	};
 	watch(
 		() => list.value,
 		() => updateList(),