Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

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,56 @@
+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;
+	}
+}
+/**
+ * 部件点选绘制命令
+ */
+export class PartPointDrawCommand extends Command {
+	constructor(options) {
+		super({
+			name: "部件点选绘制命令",
+			saveState: false,
+		});
+
+		this.canvas = options.canvas;
+		this.partManager = options.partManager;
+		this.partCanvas = options.partCanvas;
+		this.pointList = options.pointList;
+		this.oldPartCanvas = this.partManager.partCanvas;
+		this.oldPointList = [...this.partManager.pointList];
+	}
+	async execute() {
+		const list = [...this.pointList];
+		const canvas = this.partCanvas;
+		const res = await this.partManager.pointDrawPartCanvas(list, canvas);
+		return res;
+	}
+	async undo() {
+		const list = [...this.oldPointList];
+		const canvas = this.oldPartCanvas;
+		const res = await this.partManager.pointDrawPartCanvas(list, canvas);
+		return res;
+	}
+}

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

@@ -20,13 +20,13 @@
 							<img
 								src="/src/assets/images/canvas/shubiao-l.png"
 							/>
-							<span>Left Click: Add</span>
+							<span>{{ t("Canvas.LeftClickAdd") }}</span>
 						</div>
 						<div>
 							<img
 								src="/src/assets/images/canvas/shubiao-r.png"
 							/>
-							<span>Right Click: Remove</span>
+							<span>{{ t("Canvas.RightClickRemove") }}</span>
 						</div>
 					</div>
 				</div>
@@ -57,15 +57,15 @@
 							$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>
+						<span class="btn-text">{{ $t("Canvas.TheClearlySelectedContent") }}</span>
 					</div>
 				</div>
 			</div>
@@ -76,23 +76,9 @@
 <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 { t } = useI18n();
-
 	const props = defineProps({
 		canvas: {
 			type: Object,
@@ -137,32 +123,30 @@
 	const toolList = [
 		{
 			type: OperationType.PART,
-			label: "Point Selection",
+			label: t("Canvas.PointSelection"),
 			icon: "CPoint",
 			size: "20",
 		},
 		{
 			type: OperationType.PART_RECTANGLE,
-			label: "Marquee Selection",
+			label: t("Canvas.MarqueeSelection"),
 			icon: "CMarquee",
 			size: "20",
 		},
 		{
 			type: OperationType.PART_BRUSH,
-			label: "Brush Selection",
+			label: t("Canvas.BrushSelection"),
 			icon: "CBrush2",
 			size: "16",
 		},
 		{
 			type: OperationType.PART_ERASER,
-			label: "Erase",
+			label: t("Canvas.Erase"),
 			icon: "CEraser2",
 			size: "22",
 		},
 	];
 
-	// 国际化
-	const { t } = useI18n();
 
 	onMounted(() => {});
 
@@ -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/components/SelectMenuPanel/index.vue

@@ -22,7 +22,7 @@
 						v-for="v in activeObjects"
 						:key="v.id"
 					>
-						<div class="title">{{ v.layer?.name }}</div>
+						<!-- <div class="title">{{ v.layer?.name }}</div> -->
 						<div class="list">
 							<div
 								class="input"
@@ -125,7 +125,10 @@
 									"
 									:options="selectOptions"
 									@change="(e) => changeFillRepeat(e, v)"
-									:disabled="v.layer?.metadata?.level2Type === 'Embroidery'"
+									:disabled="
+										v.layer?.metadata?.level2Type ===
+										'Embroidery'
+									"
 								/>
 							</div>
 							<!-- 平铺设置 -->
@@ -283,10 +286,10 @@
 		activeObjects.value.forEach((v) => {
 			v.layer = props.layerManager.getLayerById(v.layerId);
 		});
-		if (activeObjects.value.length === 0) {
+		if (activeObjects.value.length === 1) {
-			close();
-		} else {
 			show();
+		} else {
+			close();
 		}
 	};
 	//取消当前选中
@@ -761,7 +764,7 @@
 	}
 
 	.tool-content {
-		overflow-y: auto;
+		// overflow-y: auto;
 		max-height: 20rem;
 		margin-top: 1rem;
 		padding: 0 1.5rem;

src/component/Canvas/CanvasEditor/index.vue

@@ -93,7 +93,7 @@ const props = defineProps({
   },
   clothingMinIOPath: {
     type: String,
-    default: "", // 衣服底图URL-线稿
+    default: "", // 衣服底图URL-线稿miniIo地址（传入后启动部件选取功能）
   },
   clothingImageUrl: {
     type: String,
@@ -398,7 +398,9 @@ onMounted(async () => {
     canvas: canvasManager.canvas,
     layerManager,
     canvasManager,
+	selectionManager,
     toolManager,
+	commandManager,
 	props,
   });
   canvasManager.setPartManager(partManager);
@@ -742,12 +744,12 @@ function deleteFun(e, control) {
   if(target.onDelete){
 	target.onDelete(target);
   }else if(target.id){
-    removeLayer(layerManager.activeLayerId.value);
+    removeLayer(layerManager?.activeLayerId?.value);
   }
 }
 
 function removeLayer(layerId) {
-	layerManager.removeLayer(layerId);
+	if(layerId)layerManager.removeLayer(layerId);
 }
 
 function triggerImageUpload() {
@@ -1043,11 +1045,7 @@ defineExpose({
 	width = 0,// 导出的图片宽度
 	height = 0, // 导出的图片高度
   } = {}) => {
-	console.log('导出图片',{isContainFixed,
+	canvasManager?.canvas?.discardActiveObject();
-isContainFixedOther,
-isPrintTrimsNoRepeat,
-isPrintTrimsRepeat,
-isContainNormalLayer})
     var base64 = await canvasManager.exportImage({
       isContainBg,
       isContainFixed,

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, PartPointDrawCommand } 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();
 		}
 	}
 
@@ -218,12 +241,7 @@ export class PartManager {
 	}
 
 	/** 点选工具模式下点击事件处理 */
-	_pointDownkHandler(options) {
+	_pointDownkHandler(options) { }
-		// const button = options.button;
-		// const isLeft = button === 1;// 左键1（添加）  右键3（删除）
-		// const icon = `url("${isLeft ? addIcon : removeIcon}") 16 16, default`
-		// this.canvas.upperCanvasEl.style.cursor = icon;
-	}
 	/** 点选工具模式下移动事件处理 */
 	_pointMoveHandler(options) { }
 	/** 点选工具模式下抬起事件处理 */
@@ -236,7 +254,8 @@ export class PartManager {
 		const label = isLeft ? 1 : 0;
 		const points = [];
 		const labels = [];
-		this.pointList.forEach((item) => {
+		const pointList = [...this.pointList];
+		pointList.forEach((item) => {
 			points.push([item.x, item.y]);
 			labels.push(item.label);
 		});
@@ -247,34 +266,63 @@ export class PartManager {
 			points,
 			labels,
 		});
-		this.pointList.push({
+		pointList.push({
 			x: x,
 			y: y,
 			label: label,
 		})
 		const image1 = await this.loadImageToObject(url);
-		this.resetPartObject();
-		const group = this.partGroup;
 		const canvas = getObjectAlphaToCanvas(image1, null, 0, this.rgba);
+		this.partPointDrawCommand(pointList, canvas);
+	}
+	partPointDrawCommand(list, canvas) {
+		const cmd = new PartPointDrawCommand({
+			canvas: this.canvas,
+			partManager: this,
+			partCanvas: canvas,
+			pointList: [...list],
+		})
+		if (this.commandManager?.execute) {
+			this.commandManager.execute(cmd);
+		} else {
+			cmd.execute();
+		}
+	}
+	async pointDrawPartCanvas(list, canvas) {
+		this.selectionManager.clearSelection();
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) {
+			console.warn("未找到固定图层")
+			return false;
+		}
+		this.resetPartObject();
+		this.pointList = [...list];
 		this.partCanvas = canvas;
 		const image2 = new fabric.Image(canvas);
 		image2.set({
 			originX: fixedObject.originX,
 			originY: fixedObject.originY,
 		});
-		group.add(image2);
+		this.partGroup.add(image2);
-		for (let i = 0; i < this.pointList.length; i++) {
+		for (let i = 0; i < list.length; i++) {
-			const item = this.pointList[i];
+			const item = list[i];
 			const icon = await this.loadImageToObject(item.label === 1 ? addIcon : removeIcon);
+			let size = 20;
+			let scaleX = size / (icon.width * this.partGroup.scaleX);
+			let scaleY = size / (icon.height * this.partGroup.scaleY);
 			icon.set({
-				left: item.x - group.width / 2,
+				scaleX: scaleX,
-				top: item.y - group.height / 2,
+				scaleY: scaleY,
+				left: item.x - this.partGroup.width / 2,
+				top: item.y - this.partGroup.height / 2,
 				originX: fixedObject.originX,
 				originY: fixedObject.originY,
 			})
-			group.add(icon);
+			this.partGroup.add(icon);
 		}
+		console.log(this.partGroup);
 		this.canvas.renderAll();
+		return true;
 	}
 	/** 清空点选数据 */
 	clearPointData() {
@@ -285,16 +333,42 @@ export class PartManager {
 
 	/** 框选工具模式下点击事件处理 */
 	_rectangleDownHandler(options) {
-		this.clearPointData();
+		this.pointList = [];
 		const fixedObject = this.canvasManager.getFixedLayerObject();
 		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 +379,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.partDrawCommand(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 +425,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 +445,83 @@ 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);
+		this.partDrawCommand(canvas);
+	}
+
+
+	/** 切换到擦除工具 */
+	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);
+		this.partDrawCommand(canvas);
+	}
+	/** 擦除工具模式下点击事件处理 */
+	_eraseDownHandler(options) {
+	}
+	/** 擦除工具模式下移动事件处理 */
+	_eraseMoveHandler(options) {
+	}
+	/** 擦除工具模式下抬起事件处理 */
+	_eraseUpHandler(options) {
+
+	}
+	partDrawCommand(canvas) {
+		const cmd = new PartDrawCommand({
+			canvas: this.canvas,
+			partManager: this,
+			partCanvas: canvas,
+		})
+		if (this.commandManager?.execute) {
+			this.commandManager.execute(cmd);
+		} else {
+			cmd.execute();
+		}
+	}
+	/** 绘制部件画布 */
+	drawPartCanvas(canvas) {
+		this.selectionManager.clearSelection();
 		this.partCanvas = canvas;
 		const image = new fabric.Image(canvas);
 		image.set({
@@ -392,40 +534,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 +570,7 @@ export class PartManager {
 			originY: fixedObject.originY,
 			selectable: false,
 			evented: false,
-			erasable: false,
+			erasable: true,
 		})
 		this.canvas.add(group);
 		this.partGroup = group;
@@ -474,10 +582,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,23 +627,26 @@ 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.canvas.add(path);
-		this.canvas.renderAll();
 		this.clearPart();
+		this.selectionManager.setSelectionObject(path);
+		const cmd = new LassoCutoutCommand({
+			canvas: this.canvas,
+			layerManager: this.layerManager,
+			selectionManager: this.selectionManager,
+			toolManager: this.toolManager,
+		})
+		this.commandManager.execute(cmd)
 	}
 	/** 清空点位 */
 	clearPart() {
+		if (this.activeTool.value === OperationType.PART) {
+			this.partPointDrawCommand([], null);
+		} else {
 			this.pointList = [];
-		this.resetPartObject(true);
+			this.partDrawCommand(null);
+		}
 	}
 
 	/**

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;

src/component/Detail/canvas/index.vue

@@ -6,13 +6,13 @@
 			<div class="content-bottom" ref="canvasContent">
 				<div class="contet">
 					<div class="canvas" :class="{'active': currentView === 'canvasEditor'}"@click.stop>
-						<!-- :clothingMinIOPath="selectDetail.minIOPath" 部件选取 -->
 						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							:title="t('CanvasTitle.ModifyItem')"
 							@canvasInit="editSketchCanvasInit"
 							is-edit
 							:clothingImageUrl="selectDetail.path"
 							:clothingImageUrl2="selectDetail.layersObject[0].maskUrl"
+							:clothingMinIOPath="selectDetail.minIOPath"
 							showFixedLayer
 							:canvasJSON="canvasJSON"
 							@canvasLoadJsonSuccess="canvasLoadJsonSuccess"

src/component/Detail/model/modelPosition copy.vue

@@ -28,7 +28,7 @@
 			<div class="detail_modal_item_front">
 				<img
 				style="object-fit: cover;"
-				:style="observerWH.width == '0px'?{width:observerWH.width+'px',height:observerWH.height+'px'}:{'object-fit': 'contain'}"
+				:style="observerWH.width > 0?{width:observerWH.width+'px',height:observerWH.height+'px'}:{width:'100%',height:'auto','object-fit': 'contain'}"
 				 :src="designDetail.designItemUrl" alt="">
 			</div>
 		</div>

src/component/Detail/model/modelPosition.vue

@@ -219,19 +219,14 @@ export default defineComponent({
 				detailData.frontBack.front[selectItem.imgDomIndex].style.top = y + 'px'
 			});
 			const updateElementTransform = (element, rotateDeg = null) => {
-				
 				const currentTransform = element.style?.transform || '';
-				// 1. 提取当前的所有rotate
 				const currentRotates = (currentTransform.match(/rotate[XYZ]?\([^)]+\)/g) || []);
-				// 2. 获取除镜像和rotate外的其他所有变换
 				let otherTransforms = currentTransform
-					.replace(/scaleX\(-1\)|scaleY\(-1\)/g, '') // 移除镜像
+					.replace(/scaleX\(-1\)|scaleY\(-1\)/g, '')
-					.replace(/rotate[XYZ]?\([^)]+\)/g, '')    // 移除rotate
+					.replace(/rotate[XYZ]?\([^)]+\)/g, '')
 					.replace(/\s+/g, ' ')
 					.trim();
-				// 3. 构建新transform
 				const transforms = [];
-				// 镜像部分
 				if (element.mirror.x) transforms.push('scaleX(-1)');
 				if (element.mirror.y) transforms.push('scaleY(-1)');
 				if (otherTransforms) transforms.push(otherTransforms);
@@ -247,104 +242,85 @@ export default defineComponent({
 				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
 				if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
 
-				const width = parseFloat(frontStyle.style.width);
+				let width = parseFloat(frontStyle.style.width);
-				const height = parseFloat(frontStyle.style.height);
+				let height = parseFloat(frontStyle.style.height);
 				let left = parseFloat(frontStyle.style.left) || 0;
 				let top = parseFloat(frontStyle.style.top) || 0;
 				let rotation = 0;
-				// 获取原始比例
+
 				const originalRatio = width / height;
 				if (frontStyle.style.transform) {
-					const transform = frontStyle.style.transform;
+					const match = frontStyle.style.transform.match(/rotate\(([-\d.]+)deg\)/);
-					const match = transform.match(/rotate\(([-\d.]+)deg\)/);
+					if (match) rotation = parseFloat(match[1]);
-					if (match) {
-						rotation = parseFloat(match[1]);
-					}
-				}
-				// 根据旋转角度重新计算控制点的方向
-				function getAdjustedCorner(originalCorner, rotationAngle) {
-					const angleRad = rotationAngle * (Math.PI / 180);
-					const cosA = Math.cos(angleRad);
-					const sinA = Math.sin(angleRad);
-					const newX = originalCorner.x * cosA - originalCorner.y * sinA;
-					const newY = originalCorner.x * sinA + originalCorner.y * cosA;
-					const threshold = 0.5;
-					return {
-						x: Math.abs(newX) > threshold ? (newX > 0 ? 1 : -1) : 0,
-						y: Math.abs(newY) > threshold ? (newY > 0 ? 1 : -1) : 0
-					};
 				}
 
+				const getAdjustedCorner = (corner, rot) => {
+					const rad = rot * (Math.PI / 180);
+					const x = corner.x * Math.cos(rad) - corner.y * Math.sin(rad);
+					const y = corner.x * Math.sin(rad) + corner.y * Math.cos(rad);
+					const threshold = 0.5;
+					return { x: Math.abs(x) > threshold ? (x > 0 ? 1 : -1) : 0, y: Math.abs(y) > threshold ? (y > 0 ? 1 : -1) : 0 };
+				};
 				if (rotation !== 0) {
-					direction = getAdjustedCorner({x: direction[0], y: direction[1]}, rotation);
+					direction = getAdjustedCorner({ x: direction[0], y: direction[1] }, rotation);
 					direction = [direction.x, direction.y];
 				}
 
-				// 判断是否是对角线方向（需要等比缩放）
 				const isDiagonal = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1;
 
-				// 处理轴缩放，包含镜像翻转逻辑
+				const processAxis = (axis, val, deltaVal, dir, pos, keepRatio = false, otherAxisResult = null) => {
-				const processAxis = (axis, val, deltaVal, dir, originalPosition, originalSize, keepRatio = false, otherAxisResult = null) => {
-					let newVal = val * deltaVal;
 					const mirrorKey = axis === 'width' ? 'x' : 'y';
 					const isWidth = axis === 'width';
 
-					// 检查是否需要镜像翻转（当值小于等于0时）
+					let newVal = val * deltaVal;
+
+					// 翻转处理
 					if (newVal <= 0) {
 						frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
 						newVal = Math.abs(newVal);
-						
 						updateElementTransform(frontStyle);
+					}
+
+					// 位置调整
+					const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || (frontStyle.mirror[mirrorKey] && dir === 1);
 
-						// 镜像翻转后，位置需要根据原始锚点调整
-						if (dir === -1) {
-							// 从左上/右上缩放时，位置保持不变
-							return { 
-								newVal, 
-								adjustPos: originalPosition,
-								shouldFlip: true 
-							};
-						} else {
-							// 从左下/右下缩放时，位置需要调整
-							const newPosition = originalPosition + (originalSize - newVal) * (frontStyle.mirror[mirrorKey] ? -1 : 1);
-							return { 
-								newVal, 
-								adjustPos: newPosition,
-								shouldFlip: true 
-							};
-						}
-					}
-					const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || 
-									(frontStyle.mirror[mirrorKey] && dir === 1);
 					if (keepRatio && otherAxisResult) {
-						newVal = isWidth ? 
+						newVal = isWidth ? otherAxisResult.newVal * originalRatio : otherAxisResult.newVal / originalRatio;
-							otherAxisResult.newVal * originalRatio : 
-							otherAxisResult.newVal / originalRatio;
 					}
-					let adjustPos;
+
-					if (shouldMove) {
+					const adjustPos = shouldMove ? pos - (newVal - val) : pos;
-						adjustPos = originalPosition - (newVal - originalSize);
+
-					} else {
+					return { newVal, adjustPos, shouldFlip: newVal !== val && newVal <= 0 };
-						adjustPos = originalPosition;
-					}
-					return { 
-						newVal, 
-						adjustPos,
-						shouldFlip: false
-					};
 				};
 
-					// 自由缩放
+				if (isDiagonal) {
-					const widthResult = processAxis('width', width, delta[0], direction[0], left, width);
+					const mainAxis = Math.abs(delta[0] - 1) > Math.abs(delta[1] - 1) ? 'width' : 'height';
-					const heightResult = processAxis('height', height, delta[1], direction[1], top, height);
+					const crossAxis = mainAxis === 'width' ? 'height' : 'width';
+
+					const mainDir = mainAxis === 'width' ? direction[0] : direction[1];
+					const crossDir = crossAxis === 'width' ? direction[0] : direction[1];
+
+					const mainDelta = mainAxis === 'width' ? delta[0] : delta[1];
+
+					const mainResult = processAxis(mainAxis, mainAxis === 'width' ? width : height, mainDelta, mainDir, mainAxis === 'width' ? left : top);
+					const crossResult = processAxis(crossAxis, crossAxis === 'width' ? width : height, 1, crossDir, crossAxis === 'width' ? left : top, true, mainResult);
+
+					frontStyle.style.width = mainAxis === 'width' ? mainResult.newVal + 'px' : crossResult.newVal + 'px';
+					frontStyle.style.height = mainAxis === 'height' ? mainResult.newVal + 'px' : crossResult.newVal + 'px';
+					frontStyle.style.left = mainAxis === 'width' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px';
+					frontStyle.style.top = mainAxis === 'height' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px';
+				} else {
+					const widthResult = processAxis('width', width, delta[0], direction[0], left);
+					const heightResult = processAxis('height', height, delta[1], direction[1], top);
 
 					frontStyle.style.left = widthResult.adjustPos + 'px';
 					frontStyle.style.top = heightResult.adjustPos + 'px';
 					frontStyle.style.width = widthResult.newVal + 'px';
 					frontStyle.style.height = heightResult.newVal + 'px';
-				// }
+				}
 			});
 
+			
 			// 旋转
 			moveableInstance.value.on('rotate', ({ target, beforeRotate }) => {
 				let frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
@@ -647,7 +623,15 @@ export default defineComponent({
 				opacity: 0;
 			}
 			:deep(.moveable-control){
+				width: 1.4rem;
+				height: 1.4rem;
 				border-radius: 0;
+				background-color: #44aaff;
+				border: 2px solid #44aaff;
+				&.moveable-ne,&.moveable-se,&.moveable-sw,&.moveable-nw{
+					border: 2px solid #44aaff;
+					background-color: #ffff;
+				}
 			}
 			:deep(.moveable-rotation-control){
 				border-radius: 50%;

src/component/common/SelectImages.vue

@@ -20,7 +20,7 @@
         </div>
 
         <!-- 图片网格 -->
-        <div class="image-grid" @scroll="handleScroll">
+        <div class="image-grid" v-show="list.length > 0" @scroll="handleScroll">
           <div
             v-for="(item, index) in list"
             :key="index"
@@ -460,6 +460,7 @@ defineExpose({
   padding: 20px;
   // overflow-y: auto;
   flex: 1;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 20px;
@@ -519,8 +520,9 @@ defineExpose({
   overflow-y: auto;
   grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   gap: 16px;
-  min-height: 22rem;
+  flex: 1;
-  max-height: 50rem;
+//   min-height: 22rem;
+//   max-height: 50rem;
   padding-bottom: 2rem;
 
   @media screen and (max-width: 768px) {
@@ -615,9 +617,9 @@ defineExpose({
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 60px 20px;
   color: #666;
   min-height: 300px;
+  margin: auto 0;
 
   .empty-icon {
     font-size: 48px;

src/lang/cn.ts

@@ -1503,6 +1503,12 @@ export default {
 	CompositeLuminosity: '亮度',
 	CompositeLuminosityTip: '亮度：保留原图像颜色，改变新图像亮度',
 	GarmentPartSelector: '服装部件选取',
+	LeftClickAdd: '左键添加',
+	RightClickRemove: '右键移除',
+	PointSelection: '点选',
+	MarqueeSelection: '框选',
+	BrushSelection: '画笔',
+	Erase: '擦除',
   },
   speedList: {
     High: '高级',

src/lang/en.ts

@@ -1554,6 +1554,12 @@ export default {
     CompositeLuminosityTip:
       'Luminosity: Preserve the original image color and change the luminosity of the new image',
 	GarmentPartSelector: 'Garment Part Selector',
+	LeftClickAdd: 'Left Click: Add',
+	RightClickRemove: 'Right Click: Remove',
+	PointSelection: 'Point Selection',
+	MarqueeSelection: 'Marquee Selection',
+	BrushSelection: 'Brush Selection',
+	Erase: 'Erase',
   },
   speedList: {
     High: 'High',