智能选区

src/components/Canvas/DepthCanvas/manager/AISelectboxToolManager.ts

@@ -61,19 +61,20 @@ export class AISelectboxToolManager {
 		this.isDragging = false
 		this.canvasManager.canvas.renderAll()
 	}
+	demoObjectDefault = {
+		left: 0,
+		top: 0,
+		evented: false,
+		selectable: false,
+		erasable: false,
+	}
 	createDemoObject() {
 		if (this.demoObject) this.clearDemoObject()
 		const { canvasWidth, canvasHeight } = this.canvasManager.getCanvasSize();
 		const canvas = document.createElement('canvas')
 		canvas.width = canvasWidth
 		canvas.height = canvasHeight
-		this.demoObject = new fabric.Image(canvas, {
+		this.demoObject = new fabric.Image(canvas, this.demoObjectDefault)
-			left: 0,
-			top: 0,
-			evented: false,
-			selectable: false,
-			erasable: false,
-		})
 		this.canvasManager.canvas.add(this.demoObject)
 		this.canvasManager.canvas.renderAll()
 	}
@@ -100,27 +101,47 @@ export class AISelectboxToolManager {
 		this.canvasManager.canvas.remove(this.indicatorObject)
 		this.indicatorObject = null
 	}
-	// 处理画笔绘制图像
+	// 创建临时画布对象
-	async handleBrushDrawImage(fabricImage: fabric.Object) {
+	async createStaticCanvas(object: fabric.Object) {
-		if (!this.demoObject) return;
+		if (!this.demoObject) this.createDemoObject()
-		const tcanvas = new fabric.StaticCanvas(document.createElement("canvas"), {
+		const canvas = new fabric.StaticCanvas(document.createElement("canvas"), {
 			width: this.demoObject.width,
 			height: this.demoObject.height,
 			enableRetinaScaling: false,
 		});
-		const demoObject = await cloneObjects([this.demoObject]).then(v => v[0])
+		const newObject = await cloneObjects([object]).then(v => v[0])
-		tcanvas.add(demoObject)
+		canvas.add(newObject)
-		tcanvas.add(fabricImage)
+		canvas.renderAll()
+		return canvas
+	}
+	// 处理绘制图像
+	async handleDrawImage(object: fabric.Object) {
+		const tcanvas = await this.createStaticCanvas(this.demoObject)
+		tcanvas.add(object)
 		tcanvas.renderAll();
 		const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
-		const image = new fabric.Image(canvas);
+		this.replaceDemoObject(canvas)
+	}
+	// 处理图像删除
+	async handleRemoveImage(object: fabric.Object) {
+		const tcanvas = await this.createStaticCanvas(this.demoObject)
+		const rcanvas = await this.createStaticCanvas(object)
+		const tempCanvas = rcanvas.toCanvasElement();
+		const tempCtx = tempCanvas.getContext('2d');
+		const imageData2 = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
+		const canvas = getObjectAlphaToCanvas(tcanvas, imageData2, 0, this.rgba);
+		this.replaceDemoObject(canvas)
+	}
+	// 替换框选对象
+	async replaceDemoObject(canvas) {
+		const image = new fabric.Image(canvas, this.demoObjectDefault);
 		this.canvasManager.canvas.add(image)
 		this.canvasManager.canvas.remove(this.demoObject);
 		this.demoObject = image;
 		this.canvasManager.canvas.renderAll()
 	}
+
 	mouseDownEvent(e) {
-		// if (true) return
 		const tool = this.toolManager.currentTool.value
 		const tools = [OperationType.AISELECT_ADD, OperationType.AISELECT_REMOVE]
 		if (!tools.includes(tool)) return;
@@ -153,11 +174,23 @@ export class AISelectboxToolManager {
 		const object = this.indicatorObject.toJSON("evented")
 		if (object.width === 0) object.width = 100
 		if (object.height === 0) object.height = 100
-		console.log(object.top, object.left, object.width, object.height)
 		this.clearIndicatorObject()
 		this.canvasManager.canvas.renderAll()
 
-		// this.createSelectbox()
+		const rect = new fabric.Rect({
+			left: object.left,
+			top: object.top,
+			width: object.width,
+			height: object.height,
+			fill: '#f00',
+			strokeWidth: 0,
+		})
+		const currentTool = this.toolManager.currentTool.value
+		if (currentTool === OperationType.AISELECT_ADD) {
+			this.handleDrawImage(rect)
+		} else if (currentTool === OperationType.AISELECT_REMOVE) {
+			this.handleRemoveImage(rect)
+		}
 	}
 
 
@@ -180,9 +213,7 @@ export class AISelectboxToolManager {
 		absolutePositioned: true,
 	};
 	async createSelectbox() {
-		// const url = "http://118.31.39.42:3000/falls/1a48ed3a-1faa-4fcd-bf07-765dba1702c5.png"
+		if (!this.demoObject) return
-		// const image = await this.loadImageToObject(url)
-		// const fobject = this.canvasManager.canvas.clipPath
 		const fobject = this.demoObject
 		this.clearDemoObject()
 		const canvas = getObjectAlphaToCanvas(fobject, null, 0, { r: 255, g: 0, b: 0, a: 255 });
@@ -208,8 +239,8 @@ export class AISelectboxToolManager {
 		});
 		const group = await this.layerManager.createGroupLayer({
 			clipPath: path,
-			top: path.top,
+			top: path.top + path.height / 2,
-			left: path.left,
+			left: path.left + path.width / 2,
 		}, false, false)
 		const rect = await this.layerManager.createRectLayer({
 			width: path.width,

src/components/Canvas/DepthCanvas/manager/CanvasManager.ts

@@ -296,7 +296,7 @@ export class CanvasManager {
 			if (currentTool === OperationType.DRAW) {
 				this.handleDrawImage(fabricImage)
 			} else if (currentTool === OperationType.AISELECT_DRAW) {
-				this.stateManager.aiSelectboxToolManager.handleBrushDrawImage(fabricImage)
+				this.stateManager.aiSelectboxToolManager.handleDrawImage(fabricImage)
 			}
 			return true
 		};

src/components/Canvas/DepthCanvas/manager/events/CanvasEventManager.js

@@ -714,7 +714,7 @@ export class CanvasEventManager {
 
 		// 添加对象开始变换时的状态捕获
 		this.canvas.on("object:moving", (e) => {
-			console.log("object:moving", e);
+			// console.log("object:moving", e);
 			const target = e.target;
 			if (target._objects && target._objects.length > 0) {
 				target._objects.forEach((object) => {