部件选取

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

@@ -1,14 +1,12 @@
 import { fabric } from "fabric-with-all";
 import { traceImageContour, imageToCanvas } from "../utils/helper";
 import { OperationType } from "../utils/layerHelper";
-import { CreateSelectionCommand } from "../commands/SelectionCommands";
-import { ClearSelectionCommand } from "../commands/LassoCutoutCommand";
+import { LassoCutoutCommand } from "../commands/LassoCutoutCommand";
 import addIcon from "@/assets/images/canvas/add.png";
 import removeIcon from "@/assets/images/canvas/remove.png";
-import { Https } from "@/tool/https";
-import store from "@/store";
-import { createStaticCanvas } from "../utils/canvasFactory";
 import { getObjectAlphaToCanvas } from "../utils/objectHelper";
+import { Https } from "@/tool/https";
+import { PartDrawCommand } from "../commands/PartCommands";
 
 
 /**
@@ -27,11 +25,31 @@ export class PartManager {
 	constructor(options = {}) {
 		this.canvas = options.canvas;
 		this.commandManager = options.commandManager;
+		this.selectionManager = options.selectionManager;
 		this.layerManager = options.layerManager;
 		this.canvasManager = options.canvasManager;
 		this.toolManager = options.toolManager;
 		this.props = options.props;
 
+		// 选区样式配置
+		this.selectionStyle = {
+			stroke: "#0096ff",
+			strokeWidth: 1,
+			strokeDashArray: [5, 5],
+			fill: "rgba(0, 150, 255, 0.1)",
+			strokeUniform: true, // 保持描边宽度不随缩放改变
+			// fill: "rgba(127, 255, 127, 0.3)",
+			// stroke: "#2AA81B",
+			// strokeWidth: 2,
+			// strokeDashArray: [8, 4],
+			// strokeLineCap: "round",// 折线端点样式
+			// strokeLineJoin: "bevel", // 折线连接样式
+			selectable: false,
+			evented: false,
+			excludeFromExport: true,
+			hoverCursor: "default",
+			moveCursor: "default",
+		};
 		// 状态
 		this.isActive = false;
 
@@ -54,14 +72,11 @@ export class PartManager {
 		this.activeTool = this.toolManager.activeTool;
 
 		this.rgba = { r: 0, g: 255, b: 0, a: 200 };
-		this.partGroup = null; // 当前选区对象
 		this.partId = "part_selector";
+		this.partGroup = null; // 当前选区对象
 		this.partCanvas = null;// 选区画布
-		// 点位列表
-		this.pointList = []; // 存储点选坐标
-
-		// 绘制列表
-		this.drawList = []; // 存储绘制对象
+		this.rectangleObject = null; // 矩形对象
+		this.pointList = []; // 点位列表 存储点选坐标
 	}
 
 	/**
@@ -75,6 +90,15 @@ export class PartManager {
 
 		if (toolId === OperationType.PART_ERASER) {
 			this.setEraserTool();
+		} else if (toolId === OperationType.PART || toolId === OperationType.PART_RECTANGLE) {
+			this.clearPointData();
+			this.resetPartObject();
+		}
+		if (toolId === OperationType.PART_ERASER || toolId === OperationType.PART_BRUSH) {
+			if (this.pointList.length > 0) {
+				this.clearPointData();
+				this.resetPartObject();
+			}
 		}
 
 		// 如果从非选区工具切换到选区工具，初始化事件
@@ -90,8 +114,7 @@ export class PartManager {
 		}
 		// 如果从选区工具切换到选区工具，重置选区
 		else if (wasActive && this.isActive) {
-			// this.clearPointData();
-			// this.resetPartObject();
+
 		}
 	}
 
@@ -290,11 +313,37 @@ export class PartManager {
 		if (!fixedObject) return console.warn("未找到固定图层");
 		const { x, y } = this.handleMousePosition(options, fixedObject);
 		this.pointList.push(x, y);
+
+		this.rectangleObject = new fabric.Rect({
+			left: x - fixedObject.width / 2,
+			top: y - fixedObject.height / 2,
+			width: 0,
+			height: 0,
+			...this.selectionStyle,
+			fill: "transparent", // 在绘制过程中不显示填充
+			strokeUniform: true,
+		});
+		this.partGroup.add(this.rectangleObject);
+		this.canvas.renderAll();
 	}
 	/** 框选工具模式下移动事件处理 */
-	_rectangleMoveHandler(options) { }
+	_rectangleMoveHandler(options) {
+		if (!this.rectangleObject) return console.warn("未找到框选对象");
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) return console.warn("未找到固定图层");
+		const { x, y } = this.handleMousePosition(options, fixedObject);
+		this.rectangleObject.set({
+			width: x - this.rectangleObject.left - fixedObject.width / 2,
+			height: y - this.rectangleObject.top - fixedObject.height / 2,
+		});
+		this.canvas.renderAll();
+	}
 	/** 框选工具模式下抬起事件处理 */
 	async _rectangleUpHandler(options) {
+		if (this.rectangleObject) {
+			this.partGroup.remove(this.rectangleObject);
+			this.canvas.renderAll();
+		}
 		const fixedObject = this.canvasManager.getFixedLayerObject();
 		if (!fixedObject) return console.warn("未找到固定图层");
 		const { x, y } = this.handleMousePosition(options, fixedObject);
@@ -305,18 +354,9 @@ export class PartManager {
 			type: "box",
 			box: [...this.pointList],
 		});
-		const image1 = await this.loadImageToObject(url);
-		this.resetPartObject();
-		const group = this.partGroup;
-		const canvas = getObjectAlphaToCanvas(image1, null, 0, this.rgba);
-		this.partCanvas = canvas;
-		const image2 = new fabric.Image(canvas);
-		image2.set({
-			originX: fixedObject.originX,
-			originY: fixedObject.originY,
-		});
-		group.add(image2);
-		this.canvas.renderAll();
+		const image = await this.loadImageToObject(url);
+		const canvas = getObjectAlphaToCanvas(image, null, 0, this.rgba);
+		this.drawPartCanvas(canvas);
 	}
 	/** 获取分隔后图片 */
 	async getSegAnythingImage(obj) {
@@ -360,7 +400,16 @@ export class PartManager {
 		}
 	}
 
-	async addPartImage(fabricImage) {
+
+
+	/** 绘制工具模式下点击事件处理 */
+	_brushDownHandler(options) { }
+	/** 绘制工具模式下移动事件处理 */
+	_brushMoveHandler(options) { }
+	/** 绘制工具模式下抬起事件处理 */
+	_brushUpHandler(options) { }
+	/** 绘制模式添加画笔 */
+	async addDrawPartImage(fabricImage) {
 		const scaleX = fabricImage.scaleX / this.partGroup.scaleX;
 		const scaleY = fabricImage.scaleY / this.partGroup.scaleY;
 		const top = (fabricImage.top - this.partGroup.top) / this.partGroup.scaleY;
@@ -371,15 +420,89 @@ export class PartManager {
 			top: top + this.partGroup.height / 2,
 			left: left + this.partGroup.width / 2,
 		})
-		this.drawList.push(fabricImage);
 		const tcanvas = new fabric.StaticCanvas(document.createElement("canvas"), {
 			width: this.partGroup.width,
 			height: this.partGroup.height,
 			enableRetinaScaling: false,
 		});
-		this.drawList.forEach(item => tcanvas.add(item))
+		if (this.partCanvas) {
+			let image = new fabric.Image(this.partCanvas);
+			tcanvas.add(image)
+		}
+		tcanvas.add(fabricImage)
 		tcanvas.renderAll();
 		const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
+		const cmd = new PartDrawCommand({
+			canvas: this.canvas,
+			partManager: this,
+			partCanvas: canvas,
+		})
+		if (this.commandManager?.execute) {
+			this.commandManager.execute(cmd);
+		} else {
+			cmd.execute();
+		}
+
+	}
+
+
+	/** 切换到擦除工具 */
+	setEraserTool() {
+		if (!this.canvas) return console.warn("未找到画布");
+		const objects = this.canvas.getObjects();
+		objects.forEach(obj => {
+			if (obj.id === this.partId) {
+				obj.set({
+					erasable: true
+				})
+			}
+		})
+	}
+	/** 擦除工具模式下擦除完成事件处理 */
+	async onErasingEnd(affectedObjects) {
+		console.log("擦除完成", affectedObjects);
+		const tcanvas = new fabric.StaticCanvas(document.createElement("canvas"), {
+			width: this.partGroup.width,
+			height: this.partGroup.height,
+			enableRetinaScaling: false,
+		});
+		await new Promise((resolve, reject) => {
+			this.partGroup.clone((clone) => {
+				clone.set({
+					scaleX: 1,
+					scaleY: 1,
+					top: this.partGroup.height / 2,
+					left: this.partGroup.width / 2,
+				})
+				tcanvas.add(clone);
+				resolve(clone);
+			})
+		});
+		tcanvas.renderAll();
+		const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
+		const cmd = new PartDrawCommand({
+			canvas: this.canvas,
+			partManager: this,
+			partCanvas: canvas,
+		})
+		if (this.commandManager?.execute) {
+			this.commandManager.execute(cmd);
+		} else {
+			cmd.execute();
+		}
+	}
+	/** 擦除工具模式下点击事件处理 */
+	_eraseDownHandler(options) {
+	}
+	/** 擦除工具模式下移动事件处理 */
+	_eraseMoveHandler(options) {
+	}
+	/** 擦除工具模式下抬起事件处理 */
+	_eraseUpHandler(options) {
+
+	}
+	/** 绘制部件画布 */
+	drawPartCanvas(canvas) {
 		this.partCanvas = canvas;
 		const image = new fabric.Image(canvas);
 		image.set({
@@ -392,40 +515,6 @@ export class PartManager {
 		this.canvas.renderAll();
 	}
 
-
-	/** 绘制工具模式下点击事件处理 */
-	_brushDownHandler(options) {
-	}
-	/** 绘制工具模式下移动事件处理 */
-	_brushMoveHandler(options) {
-
-	}
-	/** 绘制工具模式下抬起事件处理 */
-	_brushUpHandler(options) {
-	}
-
-
-	/** 切换到擦除工具 */
-	setEraserTool() {
-		if (!this.canvas) return console.warn("未找到画布");
-		const objects = this.canvas.getObjects();
-		objects.forEach(obj => {
-			obj.set({
-				erasable: true
-			})
-		})
-	}
-	/** 擦除工具模式下抬起事件处理 */
-	_eraseUpHandler(options) {
-	}
-	/** 擦除工具模式下点击事件处理 */
-	_eraseDownHandler(options) {
-	}
-	/** 擦除工具模式下移动事件处理 */
-	_eraseMoveHandler(options) {
-
-	}
-
 	/** 删除指定ID的对象 */
 	removeObjectsById(id) {
 		const objects = this.canvas.getObjects().filter(obj => obj.id === id);
@@ -462,7 +551,7 @@ export class PartManager {
 			originY: fixedObject.originY,
 			selectable: false,
 			evented: false,
-			erasable: false,
+			erasable: true,
 		})
 		this.canvas.add(group);
 		this.partGroup = group;
@@ -474,10 +563,33 @@ export class PartManager {
 	}
 
 	/** 创建当前选区 */
-	createPart() {
+	async createPart() {
 		if (!this.partCanvas) return console.warn("没有点位画布");
 		const fixedObject = this.canvasManager.getFixedLayerObject();
 		if (!fixedObject) return console.warn("未找到固定图层");
+		// const tcanvas = new fabric.StaticCanvas(document.createElement("canvas"), {
+		// 	width: fixedObject.width,
+		// 	height: fixedObject.height,
+		// 	enableRetinaScaling: false,
+		// });
+		// await new Promise((resolve, reject) => {
+		// 	fixedObject.clone((clone) => {
+		// 		const clipPath = new fabric.Image(this.partCanvas);
+		// 		clipPath.set({
+		// 			originX: fixedObject.originX,
+		// 			originY: fixedObject.originY,
+		// 		})
+		// 		clone.set({
+		// 			scaleX: 1,
+		// 			scaleY: 1,
+		// 			clipPath: clipPath,
+		// 		})
+		// 		tcanvas.add(clone);
+		// 		resolve(clone);
+		// 	})
+		// });
+		// tcanvas.renderAll();
+
 		const scaleY = fixedObject.scaleY
 		const scaleX = fixedObject.scaleX
 		const top = fixedObject.top - fixedObject.height * scaleY / 2;
@@ -496,22 +608,22 @@ export class PartManager {
 			top: top + minY * scaleY,
 			scaleX: scaleX,
 			scaleY: scaleY,
-			fill: "rgba(127, 255, 127, 0.3)",
-			stroke: "#2AA81B",
-			strokeWidth: 2,
-			strokeDashArray: [8, 4],
-			strokeLineCap: "round",// 折线端点样式
-			strokeLineJoin: "bevel", // 折线连接样式
-			strokeUniform: true, // 保持描边宽度不随缩放改变
+			...this.selectionStyle,
 		});
-		// this.partGroup.add(path);
-		this.canvas.add(path);
-		this.canvas.renderAll();
+		this.selectionManager.setSelectionObject(path);
 		this.clearPart();
+		const cmd = new LassoCutoutCommand({
+			canvas: this.canvas,
+			layerManager: this.layerManager,
+			selectionManager: this.selectionManager,
+			toolManager: this.toolManager,
+		})
+		this.commandManager.execute(cmd);
 	}
 	/** 清空点位 */
 	clearPart() {
 		this.pointList = [];
+		this.partCanvas = null;
 		this.resetPartObject(true);
 	}