fix

src/component/Detail/DesignDetail.vue

@@ -331,6 +331,7 @@ export default defineComponent({
 			store.commit('DesignDetail/setCurrentDetailType',str)
 		}
 		const setClothes = async (list:any,str:string)=>{
+			console.log(JSON.parse(JSON.stringify(list)))
 			let clothesList:any = []
 			if(detailData.isEditPattern.value == 'editSketch')await detailDom.canvasBox.submitBase64Data().then((rv)=>{
 				detailData.selectDetail.sketchString = rv
@@ -372,6 +373,7 @@ export default defineComponent({
 					gradient = list[i].gradient
 				if((detailData.currentDetailType == 'sketch' && newData?.sketch) || detailData.isEditPattern.value == 'editSketch'){
 					color = detailData.designDetail.clothes?.[0]?.color?.rgba?.r?`${detailData.designDetail.clothes?.[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:''
+					gradient = detailData.designDetail.clothes?.[0]?.gradient || null
 					detailData.selectDetail.maskUrl = ''
 					detailData.selectDetail.maskMinioUrl = ''
 				}

src/component/Detail/canvas/index.vue

@@ -11,8 +11,7 @@
 							@canvasInit="editSketchCanvasInit"
 							is-edit
 							:clothingImageUrl="selectDetail.path"
-							:clothingImageUrl2="selectDetail.layersObject[0].maskUrl"
-							:clothingMinIOPath="selectDetail.minIOPath"
+							:clothingImageUrl2="selectDetail.maskUrl || selectDetail.layersObject[0].maskUrl"
 							showFixedLayer
 							:canvasJSON="canvasJSON"
 							@canvasLoadJsonSuccess="canvasLoadJsonSuccess"

src/component/Detail/model/modelPosition.vue

@@ -222,89 +222,110 @@ export default defineComponent({
 				const currentTransform = element.style?.transform || '';
 				const currentRotates = (currentTransform.match(/rotate[XYZ]?\([^)]+\)/g) || []);
 				let otherTransforms = currentTransform
-					.replace(/scaleX\(-1\)|scaleY\(-1\)/g, '')
+					.replace(/scaleX\([^)]*\)/g, '')  // 移除所有 scaleX(...)
+					.replace(/scaleY\([^)]*\)/g, '')  // 移除所有 scaleY(...)
 					.replace(/rotate[XYZ]?\([^)]+\)/g, '')
 					.replace(/\s+/g, ' ')
 					.trim();
+				
 				const transforms = [];
-				if (element.mirror.x) transforms.push('scaleX(-1)');
-				if (element.mirror.y) transforms.push('scaleY(-1)');
+				if (element.mirror && element.mirror.x) transforms.push('scaleX(-1)');
+				if (element.mirror && element.mirror.y) transforms.push('scaleY(-1)');
 				if (otherTransforms) transforms.push(otherTransforms);
 				if (rotateDeg !== null) {
 					transforms.push(`rotate(${rotateDeg}deg)`);
 				} else if (currentRotates.length > 0) {
 					transforms.push(...currentRotates);
 				}
+				
 				element.style.transform = transforms.join(' ').trim();
 			};
 
 			moveableInstance.value.on('scale', ({ target, delta, direction }) => {
 				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
-				if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
-
+				
+				// 确保 mirror 对象存在并正确初始化
+				if (!frontStyle.mirror) {
+					frontStyle.mirror = { x: false, y: false };
+				}
+				
+				// 清除可能存在的重复镜像变换
+				updateElementTransform(frontStyle);
+				
 				let width = parseFloat(frontStyle.style.width);
 				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 match = frontStyle.style.transform.match(/rotate\(([-\d.]+)deg\)/);
 					if (match) rotation = parseFloat(match[1]);
 				}
-
+				
 				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 };
+					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 = [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 mirrorKey = axis === 'width' ? 'x' : 'y';
 					const isWidth = axis === 'width';
-
+					
 					let newVal = val * deltaVal;
-
-					// 翻转处理
-					if (newVal <= 0) {
+					
+					// 翻转处理 - 只在值真正变为负值时触发镜像
+					if (newVal < 0) {
 						frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
 						newVal = Math.abs(newVal);
-						updateElementTransform(frontStyle);
+					} else if (newVal === 0) {
+						// 防止值变为0
+						newVal = 1;
 					}
-
+					
 					// 位置调整
 					const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || (frontStyle.mirror[mirrorKey] && dir === 1);
-
+					
+					// 保持宽高比
 					if (keepRatio && otherAxisResult) {
 						newVal = isWidth ? otherAxisResult.newVal * originalRatio : otherAxisResult.newVal / originalRatio;
 					}
-
+					
 					const adjustPos = shouldMove ? pos - (newVal - val) : pos;
-
-					return { newVal, adjustPos, shouldFlip: newVal !== val && newVal <= 0 };
+					
+					return { newVal, adjustPos };
 				};
-
+				
+				// 处理缩放
 				if (isDiagonal) {
 					const mainAxis = Math.abs(delta[0] - 1) > Math.abs(delta[1] - 1) ? 'width' : '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';
@@ -312,43 +333,55 @@ export default defineComponent({
 				} 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';
 				}
+				
+				// 更新变换，确保正确的顺序
+				updateElementTransform(frontStyle);
 			});
-
-			
-			// 旋转
 			moveableInstance.value.on('rotate', ({ target, beforeRotate }) => {
 				let frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
-				// 确保镜像状态存在
-				if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
-				
+				if (!frontStyle.mirror) {
+					frontStyle.mirror = { x: false, y: false };
+				}
 				const { x: isMirroredX, y: isMirroredY } = frontStyle.mirror;
-				
-				// 计算实际旋转角度
-				let actualRotate = beforeRotate;
-				
-				// 关键逻辑：当镜像状态不同时（一个true一个false），旋转方向反转
-				if (isMirroredX !== isMirroredY) {
-					actualRotate = -beforeRotate;
+				const currentTransform = frontStyle.style?.transform || '';
+				const rotateMatch = currentTransform.match(/rotate\(([-\d.]+)deg\)/);
+				let currentAngle = 0;
+				if (rotateMatch && rotateMatch[1]) {
+					const parsed = parseFloat(rotateMatch[1]);
+					if (!isNaN(parsed)) {
+						currentAngle = parsed;
+					}
 				}
-				
-				// 确保角度在 0-360 度范围内
-				actualRotate = actualRotate % 360;
-				
-				// 如果角度为负数，转换为正数
-				if (actualRotate < 0) {
-					actualRotate += 360;
+				const newBeforeRotate = parseFloat(beforeRotate) || 0;
+				if (!window._lastRotateData) {
+					window._lastRotateData = {
+						beforeRotate: newBeforeRotate,
+						angle: currentAngle
+					};
 				}
-				
-				// 确保角度在 [0, 360) 范围内
-				actualRotate = ((actualRotate % 360) + 360) % 360;
-				
-				updateElementTransform(frontStyle, actualRotate.toFixed(2));
+				const delta = newBeforeRotate - window._lastRotateData.beforeRotate;
+				const shouldReverse = (isMirroredX && !isMirroredY) || (!isMirroredX && isMirroredY);
+				let newAngle;
+				if (shouldReverse) {
+					newAngle = window._lastRotateData.angle - delta;
+				} else {
+					newAngle = window._lastRotateData.angle + delta;
+				}
+				newAngle = ((newAngle % 360) + 360) % 360;
+				window._lastRotateData.beforeRotate = newBeforeRotate;
+				window._lastRotateData.angle = newAngle;
+				updateElementTransform(frontStyle, newAngle);
+			});
+
+			// 可选：在rotateStart时重置
+			moveableInstance.value.on('rotateStart', () => {
+				window._lastRotateData = null;
 			});
 			// 调整大小
 			moveableInstance.value.on('resize', ({ target, width, height }) => {
@@ -370,12 +403,17 @@ export default defineComponent({
 				upDataDetail()
 			});
 		};
-		watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
-			if(!newValue && newValue?.id == oldValue?.id)return
-			selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
-			initMoveableForSelected()
+		// watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
+		// 	if(!newValue && newValue?.id == oldValue?.id)return
+		// },{immediate: true,})
+		watch(()=>selectItem.selectDetail?.id,(newValue,oldValue)=>{
+			if(newValue){
+				selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue)
+				setTimeout(()=>{
+					initMoveableForSelected()
+				},100)
+			}
 		},{immediate: true,})
-
 		const setRevocation = async ()=>{
 			let frontBack = JSON.parse(JSON.stringify(detailData.frontBack))	
 			let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || '[]')
@@ -536,6 +574,7 @@ export default defineComponent({
 			getMousePosition,
 			updataPosition,
 			updateRect,
+			initMoveableForSelected,
         }
     },