fix

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);
+			await addObject(item);
-			let rect = new fabric.Rect({
-				id: item.id,
-				width: cwidth,
-				height: cheight,
-				fill: pattern,
-
-				...item.object,
-			});
-			canvas.add(rect);
 		}
 		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();

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(),