很多很多

src/component/Canvas/OverallCanvas/demo.vue

@@ -79,7 +79,9 @@
 					type="number"
 					v-model="item.object.scaleX"
 					step="0.1"
-					@input="updateList(item, 'object.scaleX', item.object.scaleX)"
+					@input="
+						updateList(item, 'object.scaleX', item.object.scaleX)
+					"
 				/>
 			</div>
 			<div>
@@ -88,7 +90,9 @@
 					type="number"
 					v-model="item.object.scaleY"
 					step="0.1"
-					@input="updateList(item, 'object.scaleY', item.object.scaleY)"
+					@input="
+						updateList(item, 'object.scaleY', item.object.scaleY)
+					"
 				/>
 			</div>
 			<div>
@@ -124,7 +128,9 @@
 					step="0.1"
 					min="0"
 					max="1"
-					@input="updateList(item, 'object.opacity', item.object.opacity)"
+					@input="
+						updateList(item, 'object.opacity', item.object.opacity)
+					"
 				/>
 			</div>
 		</div>
@@ -228,6 +234,8 @@
 				}
 			} else if (item.action === ACTIONS.SELECT) {
 				activeToken.value = item.token;
+			} else if (item.action === ACTIONS.DELETE) {
+				list.value = list.value.filter((v) => v.token !== item.token);
 			}
 		});
 	};
@@ -284,7 +292,7 @@
 	};
 	// 监听列表变化属性变更
 	const updateList = (item, key, value) => {
-		if(key === "scale[0]") item.scale[1] = value;
+		if (key === "scale[0]") item.scale[1] = value;
 		pingpuRef.value.updataList([
 			{
 				token: item.token,

src/component/Canvas/OverallCanvas/index.vue

@@ -144,6 +144,13 @@
 		const list = [{ token, action: ACTIONS.SELECT }];
 		emit("change-canvas", list);
 	};
+	// 删除对象
+	const onDeleteItem = (object) => {
+		const list = [{ token: object.token, action: ACTIONS.DELETE }];
+		emit("change-canvas", list);
+		canvas.remove(object);
+		canvas.renderAll();
+	};
 	const urlToCanvas = (url) => {
 		return new Promise((resolve, reject) => {
 			fabric.Image.fromURL(
@@ -181,6 +188,7 @@
 			height: cheight,
 			fill: pattern,
 			...item.object,
+			onDelete: (v) => onDeleteItem(v),
 		});
 		canvas.add(rect);
 	};