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

2026-01-19 10:56:44 +08:00
parent 9aa3a2f889 43e3a79124
commit a0a751c661
12 changed files with 310 additions and 130 deletions
--- a/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue
@@ -63,6 +63,10 @@
 							$t("Canvas.CreateAndCopy")
 						}}</span>
 					</div>
+					<div class="action-btn" @click="onReset">
+						<svg-icon name="CCut" size="26" />
+						<span class="btn-text">清空当前点位</span>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -226,12 +230,16 @@

 	// 创建
 	function onCreate() {
-		
+		props.partManager.createPart();
 	}
 	// 复制并创建
 	function onCopyCreate() {
 		
 	}
+	// 清空当前点位
+	function onReset() {
+		props.partManager.clearPart();
+	}

 </script>

@@ -410,7 +418,7 @@

 	.tool-actions {
 		display: grid;
-		grid-template-columns: repeat(2, 1fr);
+		grid-template-columns: repeat(3, 1fr);
 		gap: 5px;
 		padding: 0 30px;
 	}
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -144,6 +144,7 @@ const props = defineProps({
  },
 });

+const loading = ref(false); 
 // 引用和状态
 const canvasRef = ref(null);
 const canvasContainerRef = shallowRef(null);
@@ -277,6 +278,7 @@ onMounted(async () => {
  canvasManager.canvas.activeLayerId = activeLayerId;
  canvasManager.activeLayerId = activeLayerId;
  canvasManager.canvas.activeElementId = activeElementId;
+  canvasManager.canvas.loading = loading;

  // 创建命令管理器
  commandManager = new CommandManager({
@@ -349,7 +351,7 @@ onMounted(async () => {
  });

  // 绑定快捷键事件
-  keyboardManager.init();
+  if(!props.hideCanvas) keyboardManager.init();
  // 绑定画布操作事件
  canvasManager.setupCanvasEvents(activeElementId, layerManager);
  canvasManager.setupCanvasInitEvent(handleCanvasInit); // 绑定画布初始化事件
@@ -475,6 +477,7 @@ onMounted(async () => {
 		await canvasManager?.createOtherLayers(props.otherData);
 		await layerManager?.layerSort?.rearrangeObjects();
 	}
+    emit("canvas-load-json-success");

  }

@@ -1391,6 +1394,7 @@ defineExpose({
    />
 	<!-- 上传图片遮罩 -->
 	<div v-show="isDragOver" class="dragover-tip"></div>
+	<div class="loading" v-show="loading"><a-spin :delay="0.5" /></div>
  </div>
 </template>

@@ -1465,6 +1469,9 @@ defineExpose({
  top: 0;
  bottom: 0;
 }
+.app-container >.loading{
+	position: absolute;
+}

 .background-grid {
  --offsetX: 50%;
--- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
@@ -31,6 +31,7 @@ import {
  fillToCssStyle,
  calculateRotatedTopLeftDeg,
  calculateCenterPoint,
+  calculateTopLeftPoint,
  createPatternTransform,
  getTransformScaleAngle,
  base64ToCanvas,
@@ -1140,9 +1141,9 @@ export class CanvasManager {
 				scaleY: 0,//对象的缩放比例
 				opacity: v.opacity,
 				angle: v.angle,
-				flipX: v.flipX,//是否水平翻转
-				flipY: v.flipY,//是否垂直翻转
-				blendMode: v.globalCompositeOperation,// 混合模式
+				flipX: v.flipX,
+				flipY: v.flipY,
+				blendMode: v.globalCompositeOperation,
 				gapX: 0,// 平铺模式下的间距
 				gapY: 0,// 平铺模式下的间距
 			}
@@ -1151,18 +1152,24 @@ export class CanvasManager {
 		let top = (v.top - (flTop - flHeight * flScaleY / 2));
 		let width = (v.width * v.scaleX);
 		let height = (v.height * v.scaleY);
-		let {x:cx, y:cy} = calculateCenterPoint(width, height, left, top, v.angle);
-		let oX = (cx-width/2) / flScaleX;
-		let oY = (cy-height/2) / flScaleY;
+		if(v.originX === "center" && v.originY === "center") {
+			let {x:cx, y:cy} = calculateTopLeftPoint(width, height, left, top, v.angle);
+			left = cx;
+			top = cy;
+		}
+		let oX = left / flScaleX;
+		let oY = top / flScaleY;
 		let oScaleX = (v.width * v.scaleX) / (flWidth * flScaleX);
 		let oScaleY = (v.height * v.scaleY) / (flHeight * flScaleY);
-		// obj.object.width = width;
-		// obj.object.height = height;
 		obj.object.top = oY;
 		obj.object.left = oX;
 		obj.object.scaleX = oScaleX;
 		obj.object.scaleY = oScaleY;
 		if(obj.ifSingle){
+			// 单个的是从中心计算的
+		 	let {x:cx, y:cy} = calculateCenterPoint(width, height, left, top, v.angle);
+			let oX = (cx-width/2) / flScaleX;
+		 	let oY = (cy-height/2) / flScaleY;
 			obj.location = [oX, oY];
 			obj.scale = [oScaleX, oScaleY];
 		}else{
@@ -1647,6 +1654,9 @@ export class CanvasManager {
 	  let gapX = 0
 	  let gapY = 0
 	  let fillSource = image
+	  let flipX = false;
+	  let flipY = false;
+	  let blendMode = BlendMode.MULTIPLY;
 	  if(item.object){
 	    top += item.object.top * fixedLayerObj.scaleY
 	    left += item.object.left * fixedLayerObj.scaleX
@@ -1654,6 +1664,9 @@ export class CanvasManager {
 	    scaleY *= item.object.scaleY
 		opacity = item.object.opacity
 		angle = item.object.angle
+		flipX = item.object.flipX
+		flipY = item.object.flipY
+		blendMode = item.object.blendMode || BlendMode.MULTIPLY;
 		gapX = item.object.gapX
 		gapY = item.object.gapY
 		fillSource = imageAddGapToCanvas(image, gapX, gapY);
@@ -1668,7 +1681,11 @@ export class CanvasManager {
      	left: left,
 		scaleX: scaleX,
      	scaleY: scaleY,
-		globalCompositeOperation: BlendMode.MULTIPLY,
+		opacity: opacity,
+		angle: angle,
+		flipX: flipX,
+		flipY: flipY,
+		globalCompositeOperation: blendMode,
      	fill: new fabric.Pattern({
          source: fillSource,
          repeat: "repeat",
@@ -1692,7 +1709,7 @@ export class CanvasManager {
 	    type: LayerType.BITMAP,
 	    visible: true,
 	    locked: true,
-	    opacity: 1,
+	    opacity: opacity,
 		isPrintTrims: true,
 		blendMode: BlendMode.MULTIPLY,
 	    fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
--- a/src/component/Canvas/CanvasEditor/managers/PartManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/PartManager.js
@@ -1,5 +1,5 @@
 import { fabric } from "fabric-with-all";
-import { generateId } from "../utils/helper";
+import { traceImageContour, imageToCanvas } from "../utils/helper";
 import { OperationType } from "../utils/layerHelper";
 import { CreateSelectionCommand } from "../commands/SelectionCommands";
 import { ClearSelectionCommand } from "../commands/LassoCutoutCommand";
@@ -7,6 +7,9 @@ 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";
+

 /**
 * 部件选择管理器
@@ -31,15 +34,6 @@ export class PartManager {

 		// 状态
 		this.isActive = false;
-		this.partObject = null; // 当前选区对象
-		this.partId = "part_selector";
-		this.defaultCursor = "default";
-
-		// 绘制状态
-		this.drawingObject = null;
-		this.startPoint = null;
-		this.partPath = null; // 存储选区路径数据
-

 		// 不再直接绑定事件处理函数
 		this._mouseDownHandler = null;
@@ -55,11 +49,15 @@ export class PartManager {
 			OperationType.PART_ERASER,
 		];

+
 		// 当前工具
 		this.activeTool = this.toolManager.activeTool;

-		// 选区状态变化回调
-		this.onSelectionChanged = null;
+		this.partGroup = null; // 当前选区对象
+		this.partId = "part_selector";
+		this.partCanvas = null;// 选区画布
+		// 点选工具相关
+		this.pointList = []; // 存储点选坐标
 	}

 	/**
@@ -74,20 +72,19 @@ export class PartManager {
 		// 如果从非选区工具切换到选区工具，初始化事件
 		if (!wasActive && this.isActive) {
 			this.initEvents();
+			this.createPartObject();
 		}
 		// 如果从选区工具切换到非选区工具，清理事件和选区
 		else if (wasActive && !this.isActive) {
 			this.cleanupEvents();
-			this.clearSelection();
+			this.clearPartObject();
+			this.clearPointData();
 		}
 	}

-	/**
-	 * 初始化选区相关事件
-	 */
+	/** 初始化选区相关事件 */
 	initEvents() {
 		if (!this.canvas || this._mouseDownHandler) return; // 避免重复初始化
-		this.defaultCursor = this.canvas.defaultCursor;

 		// 保存实例引用，用于事件处理函数中
 		const self = this;
@@ -184,9 +181,7 @@ export class PartManager {
 		document.addEventListener("keydown", this._keyDownHandler);
 	}

-	/**
-	 * 清理事件监听
-	 */
+	/** 清理事件监听 */
 	cleanupEvents() {
 		if (!this.canvas) return;

@@ -209,107 +204,232 @@ export class PartManager {
 		}
 	}

-	// 点选工具模式下点击事件处理
+	/** 点选工具模式下点击事件处理 */
 	_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;
+		// 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) { }
-	// 点选工具模式下抬起事件处理
-	_pointUpHandler(options) {
+	/** 点选工具模式下抬起事件处理 */
+	async _pointUpHandler(options) {
 		const button = options.button;
 		const isLeft = button === 1;// 左键1（添加）  右键3（删除）
-		this.canvas.upperCanvasEl.style.cursor = this.defaultCursor;
 		const fixedObject = this.canvasManager.getFixedLayerObject();
 		if (!fixedObject) return console.warn("未找到固定图层");
-		const { x, y } = options.pointer;
+		const { x, y } = options.absolutePointer;
 		const width = fixedObject.width * fixedObject.scaleX;
 		const height = fixedObject.height * fixedObject.scaleY;
-		const X = x - (fixedObject.left - width / 2);
-		const Y = y - (fixedObject.top - height / 2);
-		this.getSegAnythingImage({
-			image_path: "aida-users/24299/sketch/70bb39cc-63e0-44a9-a627-3542d0f9cd70.png",
-			type: "point",
-			points: [[X, Y], [X - 10, Y - 10]],
-			labels: [1, 0],
+		const X = (x - (fixedObject.left - width / 2)) / fixedObject.scaleX;
+		const Y = (y - (fixedObject.top - height / 2)) / fixedObject.scaleY;
+		const label = isLeft ? 1 : 0;
+		const points = [];
+		const labels = [];
+		this.pointList.forEach((item) => {
+			points.push([item.x, item.y]);
+			labels.push(item.label);
 		});
+		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,
+			label: label,
+		})
+		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);
+		for (let i = 0; i < this.pointList.length; i++) {
+			const item = this.pointList[i];
+			const icon = await this.loadImageToObject(item.label === 1 ? addIcon : removeIcon);
+			icon.set({
+				left: item.x - group.width / 2,
+				top: item.y - group.height / 2,
+				originX: fixedObject.originX,
+				originY: fixedObject.originY,
+			})
+			group.add(icon);
+		}
+		this.canvas.renderAll();
+	}
+	/** 清空点选数据 */
+	clearPointData() {
+		this.pointList = [];
+		this.partCanvas = null;
 	}


-	// 框选工具模式下点击事件处理
+	/** 框选工具模式下点击事件处理 */
 	_rectangleDownHandler(options) {
+		console.log(options.absolutePointer);
 	}
-	// 框选工具模式下移动事件处理
+	/** 框选工具模式下移动事件处理 */
 	_rectangleMoveHandler(options) {

 	}
-	// 框选工具模式下抬起事件处理
+	/** 框选工具模式下抬起事件处理 */
 	_rectangleUpHandler(options) {
+		console.log(options.absolutePointer);
 	}


-	// 绘制工具模式下点击事件处理
+	/** 绘制工具模式下点击事件处理 */
 	_brushDownHandler(options) {
 	}
-	// 绘制工具模式下移动事件处理
+	/** 绘制工具模式下移动事件处理 */
 	_brushMoveHandler(options) {

 	}
-	// 绘制工具模式下抬起事件处理
+	/** 绘制工具模式下抬起事件处理 */
 	_brushUpHandler(options) {
 	}


-	// 擦除工具模式下抬起事件处理
+	/** 擦除工具模式下抬起事件处理 */
 	_eraseUpHandler(options) {
 	}
-	// 擦除工具模式下点击事件处理
+	/** 擦除工具模式下点击事件处理 */
 	_eraseDownHandler(options) {
 	}
-	// 擦除工具模式下移动事件处理
+	/** 擦除工具模式下移动事件处理 */
 	_eraseMoveHandler(options) {

 	}



-	// 获取分隔后图片
+	/** 获取分隔后图片 */
 	async getSegAnythingImage(obj) {
-		const user_id = store.state.UserHabit.userDetail.userId;
-		const data = {
-			user_id,
-			...obj,
-		}
-		Https.axiosPost(Https.httpUrls.segAnything, data)
-			.then(response => {
-				console.log(response);
-			})
-			.catch(error => {
-				console.error(error);
-			});
-
+		setTimeout(() => {
+			this.canvas.loading.value = true;
+		});
+		return new Promise((resolve, reject) => {
+			// const user_id = store.state.UserHabit.userDetail.userId;
+			const user_id = 24299;
+			const data = {
+				user_id,
+				...obj,
+			}
+			Https.axiosPost(Https.httpUrls.segAnything, data)
+				.then(response => {
+					this.canvas.loading.value = false;
+					if (response) {
+						resolve(response);
+					} else {
+						console.error("获取分隔后图片失败");
+					}
+				})
+				.catch(error => {
+					this.canvas.loading.value = false;
+					console.error(error);
+				});
+		});
 	}

-	/**
-	 * 清除选区
-	 */
-	clearSelection() {
-		// 移除选区对象
-		// this.removeSelectionFromCanvas();
+	/** 删除指定ID的对象 */
+	removeObjectsById(id) {
+		const objects = this.canvas.getObjects().filter(obj => obj.id === id);
+		this.canvas.remove(...objects);
+	}
+	loadImageToObject(url) {
+		return new Promise((resolve, reject) => {
+			fabric.Image.fromURL(url, (img) => {
+				resolve(img);
+			}, { crossOrigin: "anonymous" });// 防止污染
+		});
+	}

-		// 重置选区状态
-		this.partObject = null;
-		this.partPath = null;
+	/** 重置点位对象组 */
+	resetPartObject(render = false) {
+		this.clearPartObject();
+		this.createPartObject();
+		if (render) this.canvas.renderAll();
+	}
+	createPartObject() {
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) return console.warn("未找到固定图层");
+		const group = new fabric.Group();
+		group.set({
+			id: this.partId,
+			opacity: 1,
+			left: fixedObject.left,
+			top: fixedObject.top,
+			width: fixedObject.width,
+			height: fixedObject.height,
+			scaleX: fixedObject.scaleX,
+			scaleY: fixedObject.scaleY,
+			originX: fixedObject.originX,
+			originY: fixedObject.originY,
+			selectable: false,
+			evented: false,
+		})
+		this.canvas.add(group);
+		this.partGroup = group;
+	}
+	/** 清空点位对象组 */
+	clearPartObject() {
+		this.removeObjectsById(this.partId);
+		this.partGroup = null;
+	}

-		// 触发选区变化回调
-		if (this.onSelectionChanged && typeof this.onSelectionChanged === "function") {
-			this.onSelectionChanged();
-		}
-
-		return true;
+	/** 创建当前选区 */
+	createPart() {
+		if (!this.partCanvas) return console.warn("没有点位画布");
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) return console.warn("未找到固定图层");
+		const scaleY = fixedObject.scaleY
+		const scaleX = fixedObject.scaleX
+		const top = fixedObject.top - fixedObject.height * scaleY / 2;
+		const left = fixedObject.left - fixedObject.width * scaleX / 2;
+		const arr = traceImageContour(this.partCanvas);
+		let minX = fixedObject.width;
+		let minY = fixedObject.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`);
+		path.set({
+			left: left + minX * scaleX,
+			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.partGroup.add(path);
+		this.canvas.add(path);
+		this.canvas.renderAll();
+	}
+	/** 清空点位 */
+	clearPart() {
+		this.pointList = [];
+		this.resetPartObject(true);
 	}

 	/**
@@ -317,7 +437,9 @@ export class PartManager {
 	 */
 	dispose() {
 		this.cleanupEvents();
-		this.clearSelection();
+		this.clearPartObject();
+		this.clearPointData();
+
 		this.canvas = null;
 		this.commandManager = null;
 		this.layerManager = null;
--- a/src/component/Canvas/CanvasEditor/managers/ToolManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/ToolManager.js
@@ -429,6 +429,9 @@ export class ToolManager {
    if (this.canvasManager && this.canvasManager.selectionManager) {
      this.canvasManager.selectionManager.setCurrentTool(toolId);
    }
+    if (this.canvasManager && this.canvasManager.partManager) {
+      this.canvasManager.partManager.setCurrentTool(toolId);
+    }

    // 通知观察者
    this.notifyObservers(toolId);
--- a/src/component/Canvas/CanvasEditor/utils/helper.js
+++ b/src/component/Canvas/CanvasEditor/utils/helper.js
@@ -933,6 +933,23 @@ export function calculateCenterPoint(W, H, currentX, currentY, currentAngleDeg)
 	const Cy = currentY + (W / 2) * sinCurrent + (H / 2) * cosCurrent;
 	return { x: Cx, y: Cy };
 }
+/**
+ * 根据中心点坐标计算左上角坐标
+ * @param {number} W - 宽度
+ * @param {number} H - 高度
+ * @param {number} centerX - 中心点x坐标
+ * @param {number} centerY - 中心点y坐标
+ * @param {number} currentAngleDeg - 当前角度(度)
+ * @returns {Object} 左上角坐标 {x, y}
+*/
+export function calculateTopLeftPoint(W, H, centerX, centerY, currentAngleDeg) {
+	const currentAngle = (currentAngleDeg * Math.PI) / 180;
+	const cosCurrent = Math.cos(currentAngle);
+	const sinCurrent = Math.sin(currentAngle);
+	const Cx = centerX + (W / 2) * cosCurrent - (H / 2) * sinCurrent;
+	const Cy = centerY + (W / 2) * sinCurrent + (H / 2) * cosCurrent;
+	return { x: Cx, y: Cy };
+}



@@ -978,13 +995,13 @@ export function getTransformScaleAngle(Transform) {
 }

 /**
- * 图片转换为canvas
+ * base64转换为canvas
 * @param {String} base64 - 图片base64编码
 * @param {Number} scale - 缩放比例
 * @param {Boolean} sr - 缩放反转，默认false
 * @returns {Promise<HTMLCanvasElement>} canvas元素
 */
-export async function base64ToCanvas(base64, scale = 1, sr = false) {
+export function base64ToCanvas(base64, scale = 1, sr = false) {
 	return new Promise((resolve, reject) => {
 		const image = new Image();
 		image.src = base64;
@@ -997,7 +1014,7 @@ export async function base64ToCanvas(base64, scale = 1, sr = false) {
 			const height = sr ? image.height / scale : image.height * scale;
 			canvas.width = width;
 			canvas.height = height;
-			const ctx = canvas.getContext('2d');
+			const ctx = canvas.getContext('2d', { willReadFrequently: true });
 			ctx.clearRect(0, 0, width, height);
 			ctx.drawImage(image, 0, 0, width, height);
 			resolve(canvas);
@@ -1005,6 +1022,25 @@ export async function base64ToCanvas(base64, scale = 1, sr = false) {
 		image.onerror = reject;
 	});
 }
+/**
+ * image转换为canvas
+ * @param {HTMLImageElement} image - 图片元素
+ * @param {Number} scale - 缩放比例
+ * @param {Boolean} sr - 缩放反转，默认false
+ * @returns {Promise<HTMLCanvasElement>} canvas元素
+*/
+export async function imageToCanvas(image, scale = 1, sr = false) {
+	await image.decode();
+	const canvas = document.createElement('canvas');
+	const width = (sr ? image.width / scale : image.width * scale);
+	const height = sr ? image.height / scale : image.height * scale;
+	canvas.width = width;
+	canvas.height = height;
+	const ctx = canvas.getContext('2d', { willReadFrequently: true });
+	ctx.clearRect(0, 0, width, height);
+	ctx.drawImage(image, 0, 0, width, height);
+	return resolve(canvas);
+}

 /**
 * 图片边界跟踪算法(透明底)
@@ -1012,7 +1048,7 @@ export async function base64ToCanvas(base64, scale = 1, sr = false) {
 * @returns {Array} 边界点数组 [{x, y}, ...]
 */
 export	function traceImageContour(canvas) {
-	const ctx = canvas.getContext("2d");
+	const ctx = canvas.getContext("2d", { willReadFrequently: true });
 	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 	const data = imageData.data;
 	const width = canvas.width;
@@ -1107,7 +1143,7 @@ export function imageAddGapToCanvas(image, gapX, gapY) {
 	const tcanvas = document.createElement('canvas');
 	tcanvas.width = image.width + gapX;
 	tcanvas.height = image.height + gapY;
-	const ctx = tcanvas.getContext('2d');
+	const ctx = tcanvas.getContext('2d', { willReadFrequently: true });
 	ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
 	ctx.drawImage(image, 0, 0);
 	return tcanvas;
--- a/src/component/Canvas/CanvasEditor/utils/objectHelper.js
+++ b/src/component/Canvas/CanvasEditor/utils/objectHelper.js
@@ -64,9 +64,10 @@ export async function restoreFabricObject(serializedObject, canvas) {
 * @param {fabric.Object} object - 要处理的 fabric 对象
 * @param {ImageData} revData - 相反的ImageData，白通道的相同位置是否为透明，revData为白色为透明，黑色为不透明
 * @param {number} diff - 差值，默认 25
+ * @param {Object} rgba - 自定义 rgba 值，默认 { r: 255, g: 255, b: 255, a: 255 }
 * @returns {HTMLCanvasElement|null} 包含黑白通道的画布，或 null 如果失败
 */
-export function getObjectAlphaToCanvas(object, revData, diff = 30) {
+export function getObjectAlphaToCanvas(object, revData, diff = 30, rgba = { r: 255, g: 255, b: 255, a: 255 }) {
 	const image = object.getElement();
 	const { width, height } = image;
 	if (!width || !height) {
@@ -95,10 +96,10 @@ export function getObjectAlphaToCanvas(object, revData, diff = 30) {
 				data.data[i + 2] = 0;
 				data.data[i + 3] = 0;
 			} else {
-				data.data[i + 0] = 255;
-				data.data[i + 1] = 255;
-				data.data[i + 2] = 255;
-				data.data[i + 3] = 255;
+				data.data[i + 0] = rgba.r;
+				data.data[i + 1] = rgba.g;
+				data.data[i + 2] = rgba.b;
+				data.data[i + 3] = rgba.a;
 			}
 		} else {
 			data.data[i + 0] = 0;
--- a/src/component/Canvas/OverallCanvas/index.vue
+++ b/src/component/Canvas/OverallCanvas/index.vue
@@ -194,6 +194,7 @@
 			left: item.object.left / (props.width / canvas.width),
 			onDelete: (v) => onDeleteItem(v),
 		});
+		console.log("==========", props)
 		canvas.add(rect);
 	};
 	const setFill = async (item) => {
--- a/src/component/Canvas/canvasExample.vue
+++ b/src/component/Canvas/canvasExample.vue
@@ -8,7 +8,8 @@
 	// 当前显示的组件
 	const canvasEditor = ref();
 	const currentView = ref("canvasEditor"); // 默认显示红绿图示例 canvasEditor      redGreenExample
-
+	const clothingMinIOPath =
+		"aida-users/24299/sketchboard/female/Outwear/32d2485c-90fa-43d0-bc31-e59aaea466ba.png";
 	const clothingImageUrl = "/src/assets/images/canvas/xiangao.png";
 	const clothingImageUrlInit = "/src/assets/images/canvas/xiangaofenge.png";

@@ -404,6 +405,7 @@
 				ref="canvasEditor"
 				key="canvasEditor"
 				v-if="currentView === 'canvasEditor'"
+				:clothingMinIOPath="clothingMinIOPath"
 				:clothingImageUrl="clothingImageUrl"
 				:clothingImageUrl2="clothingImageUrlInit"
 				:otherData="otherData"
--- a/src/component/Canvas/test.vue
+++ b/src/component/Canvas/test.vue
@@ -1,11 +1,9 @@
 <template>
-	<!-- <div class="test" ref="testRef">
+	<div class="test" ref="testRef">
 		<div class="canvas-container">
 			<canvas id="canvas"></canvas>
 		</div>
-	</div> -->
-	<overall-canvas-demo />
-	<div style="width: 100px; height: 100px;position: relative;"><CanvasEditor /></div>
+	</div>
 </template>

 <script lang="ts" setup>
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -358,25 +358,6 @@ export default defineComponent({
 					detailData.selectDetail.maskUrl = ''
 					detailData.selectDetail.maskMinioUrl = ''
 				}
-				function isNetworkPath(str) {
-					if (typeof str !== 'string' || str.trim() === '') {
-					return false;
-					}
-					const urlPatterns = [
-					/^https?:\/\//i,           // http:// 或 https://
-					/^ftp:\/\//i,              // ftp://
-					/^ws:\/\//i,               // ws://
-					/^wss:\/\//i,              // wss://
-					/^\/\//,                   // 协议相对路径 //example.com
-					/^data:/i,                 // data:image/png;base64,...（这是Base64，不是网络路径）
-					];
-					// 排除data:URL（这实际上是Base64）
-					if (str.startsWith('data:')) {
-						return false;
-					}
-
-					return urlPatterns.some(pattern => pattern.test(str));
-				}
 				const printObjectToJSON = (list:any)=>{
 					if(list?.length > 0){
 						list.forEach((item:any)=>{
@@ -414,8 +395,11 @@ export default defineComponent({
 					trims:(newData && detailData.currentDetailType == 'element' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
 					accessory:(newData && detailData.currentDetailType == 'accessory' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
 				}
-				data.printObject.prints = printObjectToJSON(data.printObject.prints)
-				data.trims.prints = printObjectToJSON(data.trims.prints)
+				if(!data.partialDesign.partialDesignMinioPath){
+					data.partialDesign.partialDesignMinioPath = data.path
+				}
+				printObjectToJSON(data.printObject.prints)
+				printObjectToJSON(data.trims.prints)
 				if((detailData.isEditPattern.value && list[i].color?.gradient) || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){
 					gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
 					gradient.colorImg = await setGradual(gradient,320,700)
@@ -444,7 +428,7 @@ export default defineComponent({
 				sketchString:'',
 				modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
 				modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
-				designType:detailData.selectDetail.id?'merage':'default',
+				designType:detailData.selectDetail.id?'merge':'default',
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				processId:userDetail.value.userId,
 				probjectId:store.state.Workspace.probjects.id,
@@ -479,7 +463,7 @@ export default defineComponent({
 				sketchString:'',
 				modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
 				modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
-				designType:detailData.selectDetail.id?'merage':'default',
+				designType:detailData.selectDetail.id?'merge':'default',
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				processId:userDetail.value.userId,
 				probjectId:store.state.Workspace.probjects.id,
@@ -612,7 +596,7 @@ export default defineComponent({
 			if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
 			if(str == 'all'){
 				otherData = {
-					color: detailData.selectDetail.newDetail?.color.r?detailData.selectDetail.newDetail?.color:detailData.selectDetail.color,
+					color: detailData.selectDetail.newDetail?.color?.r?detailData.selectDetail.newDetail?.color:detailData.selectDetail.color,
 					printObject: detailData.selectDetail.newDetail?.print?.length>0?{prints:detailData.selectDetail.newDetail?.print}:detailData.selectDetail.printObject || null,
 					trims: detailData.selectDetail.newDetail?.element?.length>0?detailData.selectDetail.newDetail?.element:detailData.selectDetail.trims || null,
 				}	
@@ -635,7 +619,7 @@ export default defineComponent({
 					}
 				}
 				if(detailData.currentDetailType == 'print'){
-					otherData.printObject = {prints:detailData.selectDetail.newDetail?.print}
+					otherData.printObject = detailData.selectDetail.newDetail?.print?.length>0?{prints:detailData.selectDetail.newDetail?.print}:detailData.selectDetail.printObject || null
 				}
 				if(detailData.currentDetailType == 'element'){
 					otherData.trims = detailData.selectDetail.newDetail?.element
--- a/src/component/Detail/detailRight/editPrintElement.vue
+++ b/src/component/Detail/detailRight/editPrintElement.vue
@@ -277,7 +277,7 @@ export default defineComponent({
 					let x = Number(style.left.replace(/px/g,''))
 					let y = Number(style.top.replace(/px/g,''))
 					location = [(x*sketchWH[0]) ,(y*sketchWH[1])]
-					scale =[ editPrintElementData.systemDesignerPercentage/100, editPrintElementData.systemDesignerPercentage/100]
+					scale = item.scale
 					// scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width]
 					// location = [item.pattern.style.left,item.pattern.style.top]
 				}
@@ -911,6 +911,7 @@ export default defineComponent({
 		}
 		const inputFillScale = (scale:any)=>{
 			let arr = editPrintElementData.printStyleList[props.type].overall
+			console.log(arr,scale,editPrintElementData.imgDomIndex)
 			arr[editPrintElementData.imgDomIndex].scale = [scale,scale]
 			editPrintElementDom.pingpuRef.updataList([
 				{