From d94ade664110604e9728e3f0633946140ef944a2 Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Wed, 28 Jan 2026 16:11:55 +0800 Subject: [PATCH] fix --- src/component/Detail/canvas/index.vue | 1 - src/component/Detail/model/modelPosition.vue | 151 ++++++++++++------- 2 files changed, 95 insertions(+), 57 deletions(-) diff --git a/src/component/Detail/canvas/index.vue b/src/component/Detail/canvas/index.vue index ac0c3544..dde6d912 100644 --- a/src/component/Detail/canvas/index.vue +++ b/src/component/Detail/canvas/index.vue @@ -12,7 +12,6 @@ is-edit :clothingImageUrl="selectDetail.path" :clothingImageUrl2="selectDetail.maskUrl || selectDetail.layersObject[0].maskUrl" - :clothingMinIOPath="selectDetail.minIOPath" showFixedLayer :canvasJSON="canvasJSON" @canvasLoadJsonSuccess="canvasLoadJsonSuccess" diff --git a/src/component/Detail/model/modelPosition.vue b/src/component/Detail/model/modelPosition.vue index a5c7de2c..fed41c82 100644 --- a/src/component/Detail/model/modelPosition.vue +++ b/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, } },