fix

src/component/Canvas/CanvasEditor/index.vue

@@ -20,6 +20,8 @@ import { SelectionManager } from "./managers/selection/SelectionManager";
 import { RedGreenModeManager } from "./managers/RedGreenModeManager";
 import texturePresetManager from "./managers/brushes/TexturePresetManager";
 import { BrushStore } from "./store/BrushStore";
+import cuowuImg from '@/assets/images/homePage/cuowu.svg'
+
 
 // import { MinimapManager } from "./managers/minimap/MinimapManager";
 
@@ -33,7 +35,7 @@ import LiquifyPanel from "./components/LiquifyPanel.vue"; // 引入液化编辑
 import SelectionPanel from "./components/SelectionPanel.vue"; // 引入选区面板
 import { LayerType, OperationType } from "./utils/layerHelper.js";
 import { ToolManager } from "./managers/toolManager.js";
-// import { fabric } from "fabric-with-all";
+import { fabric } from "fabric-with-all";
 import {
   uploadImageAndCreateLayer,
   loadImageUrlToLayer,
@@ -402,6 +404,11 @@ onMounted(async () => {
 
   canvasManagerLoaded.value = true;
 
+	// 添加删除按钮
+	// if(!fabric.Object.prototype.controls.deleteControl)addRemoveBtn(removeLayer)
+	addRemoveBtn(removeLayer)
+
+
   // 触发组件初始化事件
   nextTick(() => {
     // 确保所有依赖都已加载完成
@@ -490,6 +497,7 @@ onBeforeUnmount(() => {
   liquifyManager = null;
   selectionManager = null;
   redGreenModeManager = null;
+//   fabric.Object.prototype.controls.deleteControl = undefined;
 
   // 移除window resize事件监听
   //   window.removeEventListener("resize", handleWindowResize);
@@ -604,6 +612,37 @@ function moveLayerDown(layerId) {
   layerManager.moveLayer(layerId, "down");
 }
 
+function addRemoveBtn(fun){//添加删除按钮
+	const deleteIcon = cuowuImg
+	// 创建删除图片元素
+	let deleteImg = document.createElement('img')
+	deleteImg.src = deleteIcon
+	function renderIcon(icon) {
+		return function (ctx, left, top, styleOverride, fabricObject) {
+			var size = this.cornerSize;
+			ctx.save();
+			ctx.translate(left, top);
+			ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
+			ctx.drawImage(icon, -size/3, -size/3, size/1.5, size/1.5);
+			ctx.restore();
+		}
+	}
+	fabric.Object.prototype.controls.deleteControl = new fabric.Control({
+		x: 0.5,
+		y: -0.5,
+		offsetY: -16,
+		offsetX: 16,
+		cursorStyle: 'pointer',
+		mouseUpHandler:deleteFun,
+		render: renderIcon(deleteImg),
+		cornerSize: 24
+	})
+}
+
+function deleteFun(){
+	removeLayer(layerManager.activeLayerId.value)
+}
+
 function removeLayer(layerId) {
   // Check if this is the last layer - prevent deletion
   if (layers.value.length <= 2) {