略略略

src/components/Canvas/DepthCanvas/depth-canvas.vue

@@ -105,6 +105,7 @@
 			const json = canvasManager.processCanvasDisUrlJSON(canvasData)
 			await canvasManager.loadJSON(json)
 		}
+		layerManager.setActiveFirstLayer()
 		globalStore.setLoading(false)
 
 		stateManager.onMounted()

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

@@ -1,6 +1,8 @@
 import { fabric } from 'fabric-with-all'
 import { OperationType } from '../tools/layerHelper'
 import { getObjectAlphaToCanvas, traceImageContour, cloneObjects } from '../tools/canvasMethod'
+import { getSegAnythingImage } from '@/api/depth-canvas'
+import { useGlobalStore, useUserInfoStore } from '@/stores'
 
 /** 智能框选工具管理器 */
 export class AISelectboxToolManager {
@@ -10,6 +12,7 @@ export class AISelectboxToolManager {
 	layerManager: any
 	toolManager: any
 
+	targetObject: any
 	isDragging: boolean = false
 	startX: number = 0
 	startY: number = 0
@@ -54,6 +57,19 @@ export class AISelectboxToolManager {
 		this.clear();
 		this.createDemoObject()
 		this.tcanvas = null;
+		this.targetObject = null;
+		this.canvasManager.getObjects().forEach((obj) => {
+			if (obj?.info?.isOriginal) {
+				this.targetObject = obj.toObject();
+			}
+		})
+		// const image = this.layerManager.getActiveLayer()
+		// if (image && image.info.isAiSelect) {
+		// 	this.targetObject = image;
+		// } else {
+		// 	this.targetObject = null;
+		// }
+
 	}
 	clear() {
 		console.log("清除智能框选工具")
@@ -121,6 +137,7 @@ export class AISelectboxToolManager {
 	}
 	// 处理绘制图像
 	async handleDrawImage(object: fabric.Object) {
+		if (!this.targetObject) return;
 		const tcanvas = await this.createStaticCanvas(this.demoObject)
 		tcanvas.add(object)
 		tcanvas.renderAll();
@@ -129,6 +146,7 @@ export class AISelectboxToolManager {
 	}
 	// 处理图像删除
 	async handleRemoveImage(object: fabric.Object) {
+		if (!this.targetObject) return;
 		const tcanvas = await this.createStaticCanvas(this.demoObject)
 		const rcanvas = await this.createStaticCanvas(object)
 		const tempCanvas = rcanvas.toCanvasElement();
@@ -147,6 +165,7 @@ export class AISelectboxToolManager {
 	}
 
 	mouseDownEvent(e) {
+		if (!this.targetObject) return;
 		const tool = this.toolManager.currentTool.value
 		const tools = [OperationType.AISELECT_ADD, OperationType.AISELECT_REMOVE]
 		if (!tools.includes(tool)) return;
@@ -157,6 +176,7 @@ export class AISelectboxToolManager {
 		this.createIndicatorObject()
 	}
 	mouseMoveEvent(e) {
+		if (!this.targetObject) return;
 		if (!this.isDragging) return;
 		var width = e.absolutePointer.x - this.startX
 		var height = e.absolutePointer.y - this.startY
@@ -173,7 +193,8 @@ export class AISelectboxToolManager {
 		this.indicatorObject.set({ width, height, left, top })
 		this.canvasManager.canvas.renderAll()
 	}
-	mouseUpEvent(e) {
+	async mouseUpEvent(e) {
+		if (!this.targetObject) return;
 		if (!this.isDragging) return;
 		this.isDragging = false;
 		const object = this.indicatorObject.toJSON("evented")
@@ -182,20 +203,32 @@ export class AISelectboxToolManager {
 		this.clearIndicatorObject()
 		this.canvasManager.canvas.renderAll()
 
-		const rect = new fabric.Rect({
-			left: object.left,
-			top: object.top,
-			width: object.width,
-			height: object.height,
-			fill: '#f00',
-			strokeWidth: 0,
-		})
+		useGlobalStore().setLoading(true)
+		const x1 = Math.round(object.left)
+		const y1 = Math.round(object.top)
+		const x2 = Math.round(object.left + object.width)
+		const y2 = Math.round(object.top + object.height)
+		const data = {
+			type: "box",
+			box: [x1, y1, x2, y2],
+		}
+		const url = await this.getSegAnythingImage(data)
+		const image = await this.loadImageToObject(url)
+		// 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)
+			await this.handleDrawImage(image)
 		} else if (currentTool === OperationType.AISELECT_REMOVE) {
-			this.handleRemoveImage(rect)
+			await this.handleRemoveImage(image)
 		}
+		useGlobalStore().setLoading(false)
 	}
 
 
@@ -218,6 +251,7 @@ export class AISelectboxToolManager {
 		absolutePositioned: true,
 	};
 	async createSelectbox() {
+		if (!this.targetObject) return;
 		if (!this.demoObject) return
 		const fobject = this.demoObject
 		this.clearDemoObject()
@@ -263,7 +297,26 @@ export class AISelectboxToolManager {
 		this.toolManager.setTool(OperationType.SELECT)
 	}
 
-
+	/** 获取分隔后图片 */
+	async getSegAnythingImage(obj) {
+		return new Promise((resolve, reject) => {
+			if (!this.targetObject) return;
+			const user_id = useUserInfoStore().state.userInfo.id;
+			const image_path = this.targetObject.src;
+			const data = {
+				image_path,
+				user_id,
+				...obj,
+			}
+			getSegAnythingImage(data).then((res) => {
+				console.log(res)
+				resolve(res)
+			}).catch((error) => {
+				console.error(error);
+				useGlobalStore().setLoading(false)
+			})
+		});
+	}
 
 	dispose() {
 		this.clear()

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

@@ -92,6 +92,7 @@ export class CanvasManager {
 							id: createId("image"),
 							name: "图片图层",
 							lock: true,
+							isOriginal: true,
 						}
 					})
 					image = img

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

@@ -31,6 +31,10 @@ export class LayerManager {
 			this.stateManager.toolManager.setTool(OperationType.SELECT)
 		}
 	}
+	setActiveFirstLayer() {
+		this.setActiveID(this.layers.value[0]?.info?.id || "")
+	}
+
 	getActiveLayer() {
 		return this.getLayerById(this.activeID.value)
 	}

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

@@ -1,5 +1,5 @@
 import { ref, computed } from "vue";
-import { ElMessageBox } from 'element-plus'
+import { OperationType } from '../tools/layerHelper'
 import i18n from '@/lang'
 const t = i18n.global.t
 
@@ -95,6 +95,7 @@ export class StateManager {
 		this.running.value = true
 		this.historyIndex.value = index
 		this.canvasManager.loadJSON(state.canvas, false).then(() => {
+			this.toolManager.setTool(OperationType.SELECT)
 			this.event.emit('canvas:undo', state)
 			this.running.value = false
 		})
@@ -108,6 +109,7 @@ export class StateManager {
 		this.running.value = true
 		this.historyIndex.value = index
 		this.canvasManager.loadJSON(state.canvas, false).then(() => {
+			this.toolManager.setTool(OperationType.SELECT)
 			this.event.emit('canvas:redo', state)
 			this.running.value = false
 		})