印花元素分类

src/component/Canvas/CanvasEditor/managers/PartManager.js

@@ -79,8 +79,9 @@ export class PartManager {
 			this.cleanupEvents();
 			this.clearPartObject();
 			this.clearPointData();
-		}else{
-			// this.clearPointData();
+		} else {
+			this.clearPointData();
+			this.resetPartObject();
 		}
 		console.log("切换工具", toolId);
 	}
@@ -222,11 +223,7 @@ export class PartManager {
 		const isLeft = button === 1;// 左键1（添加）  右键3（删除）
 		const fixedObject = this.canvasManager.getFixedLayerObject();
 		if (!fixedObject) return console.warn("未找到固定图层");
-		const { x, y } = options.absolutePointer;
-		const width = fixedObject.width * fixedObject.scaleX;
-		const height = fixedObject.height * fixedObject.scaleY;
-		const X = (x - (fixedObject.left - width / 2)) / fixedObject.scaleX;
-		const Y = (y - (fixedObject.top - height / 2)) / fixedObject.scaleY;
+		const { x, y } = this.handleMousePosition(options, fixedObject);
 		const label = isLeft ? 1 : 0;
 		const points = [];
 		const labels = [];
@@ -234,19 +231,16 @@ export class PartManager {
 			points.push([item.x, item.y]);
 			labels.push(item.label);
 		});
-		points.push([X, Y]);
+		points.push([x, y]);
 		labels.push(label);
 		const url = await this.getSegAnythingImage({
-			image_path: this.props.clothingMinIOPath,
 			type: "point",
 			points,
 			labels,
-			// type: "box",
-			// box: [0,0,0,0],
 		});
 		this.pointList.push({
-			x: X,
-			y: Y,
+			x: x,
+			y: y,
 			label: label,
 		})
 		const image1 = await this.loadImageToObject(url);
@@ -283,15 +277,39 @@ export class PartManager {
 
 	/** 框选工具模式下点击事件处理 */
 	_rectangleDownHandler(options) {
-		console.log(options.absolutePointer);
+		this.clearPointData();
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) return console.warn("未找到固定图层");
+		const { x, y } = this.handleMousePosition(options, fixedObject);
+		this.pointList.push(x, y);
 	}
 	/** 框选工具模式下移动事件处理 */
-	_rectangleMoveHandler(options) {
-
-	}
+	_rectangleMoveHandler(options) { }
 	/** 框选工具模式下抬起事件处理 */
-	_rectangleUpHandler(options) {
-		console.log(options.absolutePointer);
+	async _rectangleUpHandler(options) {
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) return console.warn("未找到固定图层");
+		const { x, y } = this.handleMousePosition(options, fixedObject);
+		this.pointList.push(x, y);
+
+		if (this.pointList.length !== 4) return console.warn("框选工具选择区域必须是矩形");
+		const url = await this.getSegAnythingImage({
+			type: "box",
+			box: [...this.pointList],
+		});
+		const image1 = await this.loadImageToObject(url);
+		this.resetPartObject();
+		const group = this.partGroup;
+		const rgba = { r: 0, g: 255, b: 0, a: 200 }
+		const canvas = getObjectAlphaToCanvas(image1, null, 0, rgba);
+		this.partCanvas = canvas;
+		const image2 = new fabric.Image(canvas);
+		image2.set({
+			originX: fixedObject.originX,
+			originY: fixedObject.originY,
+		});
+		group.add(image2);
+		this.canvas.renderAll();
 	}
 
 
@@ -318,7 +336,19 @@ export class PartManager {
 
 	}
 
-
+	/** 处理鼠标点位 */
+	handleMousePosition(options, fixedObject) {
+		const pos = options.absolutePointer;
+		const { x, y } = options.absolutePointer;
+		const width = fixedObject.width * fixedObject.scaleX;
+		const height = fixedObject.height * fixedObject.scaleY;
+		const X = (x - (fixedObject.left - width / 2)) / fixedObject.scaleX;
+		const Y = (y - (fixedObject.top - height / 2)) / fixedObject.scaleY;
+		return {
+			x: Math.round(X),
+			y: Math.round(Y),
+		}
+	}
 
 	/** 获取分隔后图片 */
 	async getSegAnythingImage(obj) {
@@ -329,6 +359,7 @@ export class PartManager {
 			// const user_id = store.state.UserHabit.userDetail.userId;
 			const user_id = 24299;
 			const data = {
+				image_path: this.props.clothingMinIOPath,
 				user_id,
 				...obj,
 			}