深度画布bug

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

@@ -1,6 +1,6 @@
 import { fabric } from 'fabric-with-all'
 import { OperationType } from '../tools/layerHelper'
-import { getObjectAlphaToCanvas, traceImageContour, cloneObjects } from '../tools/canvasMethod'
+import { getObjectAlphaToCanvas, traceImageContour, clipCanvasTransparent, cloneObjects } from '../tools/canvasMethod'
 import { getSegAnythingImage } from '@/api/depth-canvas'
 import { useGlobalStore, useUserInfoStore } from '@/stores'
 
@@ -256,28 +256,46 @@ export class AISelectboxToolManager {
 		if (!this.demoObject) return
 		const fobject = this.demoObject
 		this.clearDemoObject()
-		const tcanvas = await this.createStaticCanvas(fobject)
-		const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, { r: 255, g: 0, b: 0, a: 255 });
-		const arr = traceImageContour(canvas);
 		const scaleY = fobject.scaleY
 		const scaleX = fobject.scaleX
 		const top = fobject.top
 		const left = fobject.left
 		let minX = fobject.width;
 		let minY = fobject.height;
-		const str = arr.map((v) => {
-			if (v.x < minX) minX = v.x;
-			if (v.y < minY) minY = v.y;
-			return `${v.x} ${v.y}`
-		}).join(" L ");
-		const path = new fabric.Path(`M ${str} z`);
+		const tcanvas = await this.createStaticCanvas(fobject)
+		const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, { r: 255, g: 255, b: 255, a: 255 });
+
+		/** 路径裁剪法 */
+		// const arr = traceImageContour(canvas);
+		// const str = arr.map((v) => {
+		// 	if (v.x < minX) minX = v.x;
+		// 	if (v.y < minY) minY = v.y;
+		// 	return `${v.x} ${v.y}`
+		// }).join(" L ");
+		// const path = new fabric.Path(`M ${str} z`);
+		// path.set({
+		// 	left: left + minX,
+		// 	top: top + minY,
+		// 	scaleX: scaleX,
+		// 	scaleY: scaleY,
+		// 	...this.selectionStyle,
+		// });
+
+		/** 图片裁剪法 */
+		const info = clipCanvasTransparent(canvas)
+		minX = info.minX
+		minY = info.minY
+		const path = new fabric.Image(info.canvas)
 		path.set({
 			left: left + minX,
 			top: top + minY,
 			scaleX: scaleX,
 			scaleY: scaleY,
-			...this.selectionStyle,
-		});
+			absolutePositioned: true,
+		})
+
+
+		// 创建分组层
 		const group = await this.layerManager.createGroupLayer({
 			clipPath: path,
 			top: path.top + path.height / 2,