部件选取

src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js

@@ -106,7 +106,6 @@ export class FillGroupLayerBackgroundCommand extends Command {
         });
       }
     }
-
     // 判断fabricObjects是否是组对象
     const firstObj = layer.fabricObjects?.[0] || null;
     // 如果没有找到第一个对象，则直接添加到当前画布
@@ -173,8 +172,8 @@ export class FillGroupLayerBackgroundCommand extends Command {
     }
     const canvasObj = findObjectById(this.canvas, firstObj?.id)?.object;
     if (
-      (canvasObj && canvasObj.type === "group") ||
+      canvasObj && (canvasObj.type === "group" ||
-      canvasObj._objects?.length > 0
+      canvasObj._objects?.length > 0)
     ) {
       this.newFill.set({
         left: 0,

src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js

@@ -147,11 +147,11 @@ export class LassoCutoutCommand extends CompositeCommand {
       }
 
       // 确定源图层
-      const sourceLayer = this.layerManager.getActiveLayer();
+    //   const sourceLayer = this.layerManager.getActiveLayer();
-      if (!sourceLayer) {
+    //   if (!sourceLayer) {
-        console.error("无法执行套索抠图：源图层无效");
+    //     console.error("无法执行套索抠图：源图层无效");
-        return false;
+    //     return false;
-      }
+    //   }
 
       // 获取源图层的所有对象（包括子图层）
       // const sourceObjects = this._getLayerObjects(sourceLayer);
@@ -225,7 +225,7 @@ export class LassoCutoutCommand extends CompositeCommand {
 
 			const layers = this.layerManager.layers.value;
 			var topLayerIndex = 0;
-			layers.forEach((layer, index) => {
+			if(this.originalLayer)layers.forEach((layer, index) => {
 				if (layer.id === this.originalLayer.id) {
 					topLayerIndex = index;
 				}else if (layer.children.length > 0) {

src/component/Canvas/CanvasEditor/commands/PartCommands.js

@@ -0,0 +1,26 @@
+import { Command } from "./Command.js";
+
+/**
+ * 部件绘制命令
+ */
+export class PartDrawCommand extends Command {
+	constructor(options) {
+		super({
+			name: "部件绘制命令",
+			saveState: false,
+		});
+
+		this.canvas = options.canvas;
+		this.partManager = options.partManager;
+		this.partCanvas = options.partCanvas;
+		this.oldPartCanvas = this.partManager.partCanvas;
+	}
+	execute() {
+		this.partManager.drawPartCanvas(this.partCanvas);
+		return true;
+	}
+	undo() {
+		this.partManager.drawPartCanvas(this.oldPartCanvas);
+		return true;
+	}
+}

src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue

@@ -57,12 +57,12 @@
 							$t("Canvas.creation")
 						}}</span>
 					</div>
-					<div class="action-btn" @click="onCopyCreate">
+					<!-- <div class="action-btn" @click="onCopyCreate">
 						<svg-icon name="CCut" size="26" />
 						<span class="btn-text">{{
 							$t("Canvas.CreateAndCopy")
 						}}</span>
-					</div>
+					</div> -->
 					<div class="action-btn" @click="onReset">
 						<svg-icon name="CCut" size="26" />
 						<span class="btn-text">清空当前点位</span>
@@ -76,23 +76,7 @@
 <script setup>
 	import { ref, onMounted, watch } from "vue";
 	import { useI18n } from "vue-i18n";
-	import {
-		CreateSelectionCommand,
-		InvertSelectionCommand,
-		FeatherSelectionCommand,
-		FillSelectionCommand,
-	} from "../commands/SelectionCommands";
-	import { ToolCommand } from "../commands/ToolCommands";
-	import {
-		LassoCutoutCommand,
-		ClearSelectionCommand,
-		// CutSelectionToNewLayerCommand,
-	} from "../commands/LassoCutoutCommand";
-
 	import { OperationType } from "../utils/layerHelper";
-	import { ClearSelectionContentCommand } from "../commands/ClearSelectionContentCommand";
-	import { CutSelectionToNewLayerCommand } from "../commands/CutSelectionToNewLayerCommand";
-
 	const props = defineProps({
 		canvas: {
 			type: Object,
@@ -182,12 +166,6 @@
 				show();
 				// 根据工具类型设置选区类型
 				toolType.value = newTool;
-
-				// 更新选区管理器的选区类型
-				// if (props.partManager) {
-				// 	props.partManager.setPartType(toolType.value);
-				// 	props.partManager.setupPartEvents();
-				// }
 			} else {
 				close();
 			}
@@ -220,12 +198,6 @@
 		if (props.toolManager) {
 			props.toolManager.setToolWithCommand(type);
 		}
-
-		// // 备用方案：如果没有 toolManager，直接更新 partManager
-		// else if (props.partManager) {
-		// 	props.partManager.setPartType(type);
-		// 	props.partManager.setupPartEvents();
-		// }
 	}
 
 	// 创建
@@ -418,35 +390,11 @@
 
 	.tool-actions {
 		display: grid;
-		grid-template-columns: repeat(3, 1fr);
+		grid-template-columns: repeat(2, 1fr);
 		gap: 5px;
 		padding: 0 30px;
 	}
 
-	/* 平板适配 - 每行4个按钮 */
-	@media screen and (max-width: 768px) {
-		.tool-actions {
-			grid-template-columns: repeat(3, 1fr);
-			gap: 8px 6px;
-			padding: 0 8px;
-		}
-	}
-
-	/* 手机适配 - 每行3个按钮 */
-	@media screen and (max-width: 480px) {
-		.tool-actions {
-			grid-template-columns: repeat(3, 1fr);
-			gap: 6px 4px;
-			padding: 0 6px;
-		}
-
-		.header-btn {
-			font-size: 11px;
-			padding: 2px 4px;
-			min-width: 28px;
-		}
-	}
-
 	.action-btn {
 		display: flex;
 		// flex-direction: column;

src/component/Canvas/CanvasEditor/index.vue

@@ -398,7 +398,9 @@ onMounted(async () => {
     canvas: canvasManager.canvas,
     layerManager,
     canvasManager,
+	selectionManager,
     toolManager,
+	commandManager,
 	props,
   });
   canvasManager.setPartManager(partManager);

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

@@ -178,7 +178,7 @@ export class CanvasManager {
     this.canvas.onBrushImageConverted = async (fabricImage) => {
 	  const activeTool = this.toolManager?.activeTool?.value;
 	  if(activeTool === OperationType.PART_BRUSH){
-		this.partManager?.addPartImage(fabricImage);
+		this.partManager?.addDrawPartImage(fabricImage);
       }else{
         await this.addImageToLayer({ fabricImage, targetLayerId: null });
 	  }
@@ -203,6 +203,10 @@ export class CanvasManager {
       console.log("擦除完成", e.targets);
       // 可以在这里保存状态到命令管理器
       const affectedObjects = e.targets || [];
+	  const activeTool = this.toolManager?.activeTool?.value;
+	  if(activeTool === OperationType.PART_ERASER){
+		return this.partManager?.onErasingEnd(affectedObjects);
+      }
       const command = this.eraserStateManager.endErasing(affectedObjects);
       if (command && this.commandManager) {
         await this.commandManager?.executeCommand?.(command);

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 { LassoCutoutCommand } from "../commands/LassoCutoutCommand";
-import { ClearSelectionCommand } 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.rectangleObject = null; // 矩形对象
-		this.pointList = []; // 存储点选坐标
+		this.pointList = []; // 点位列表 存储点选坐标
-
-		// 绘制列表
-		this.drawList = []; // 存储绘制对象
 	}
 
 	/**
@@ -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);
+		const image = await this.loadImageToObject(url);
-		this.resetPartObject();
+		const canvas = getObjectAlphaToCanvas(image, null, 0, this.rgba);
-		const group = this.partGroup;
+		this.drawPartCanvas(canvas);
-		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();
 	}
 	/** 获取分隔后图片 */
 	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)",
+			...this.selectionStyle,
-			stroke: "#2AA81B",
-			strokeWidth: 2,
-			strokeDashArray: [8, 4],
-			strokeLineCap: "round",// 折线端点样式
-			strokeLineJoin: "bevel", // 折线连接样式
-			strokeUniform: true, // 保持描边宽度不随缩放改变
 		});
-		// this.partGroup.add(path);
+		this.selectionManager.setSelectionObject(path);
-		this.canvas.add(path);
-		this.canvas.renderAll();
 		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);
 	}
 

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

@@ -197,7 +197,7 @@ export class ToolManager {
       [OperationType.PART_RECTANGLE]: {
         name: "部件选取工具-矩形",
         icon: "part",
-        cursor: "default",
+        cursor: "crosshair",
         setup: this.setupPartRectangleTool.bind(this),
       },
       [OperationType.PART_BRUSH]: {
@@ -721,7 +721,7 @@ export class ToolManager {
   setupPartRectangleTool(isExecute = false) {
     if (!this.canvas) return;
     this.canvas.isDrawingMode = false;
-    this.canvas.selection = true;
+    this.canvas.selection = false;
     if (!isExecute && this.canvasManager && this.canvasManager.partManager) {
       this.canvasManager.partManager.setCurrentTool(OperationType.PART_RECTANGLE);
     }

src/component/Canvas/CanvasEditor/utils/helper.js

@@ -1045,6 +1045,7 @@ export async function imageToCanvas(image, scale = 1, sr = false) {
 /**
  * 图片边界跟踪算法(透明底)
  * @param {HTMLCanvasElement} canvas - canvas元素
+ * @param {Number} scale - 缩放比例
  * @returns {Array} 边界点数组 [{x, y}, ...]
 */
 export	function traceImageContour(canvas) {

src/component/Canvas/canvasExample.vue

@@ -444,7 +444,16 @@
 		</div>
 	</div>
 </template>
-
+<style>
+	body > .lower-canvas {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 800px !important;
+		height: 600px !important;
+		z-index: 99999999;
+	}
+</style>
 <style scoped lang="less">
 	* {
 		margin: 0;

src/component/Canvas/test.vue

@@ -53,7 +53,7 @@
 		};
 	});
 	// 边界追踪
-	function traceImageContour(canvas) {
+	function traceImageContour(canvas, scale = 1) {
 		const ctx = canvas.getContext("2d");
 		const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 		const data = imageData.data;