From 85ae1589520798e4ac4b425be464c5d3dffdcfab Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Wed, 28 Jan 2026 16:35:40 +0800 Subject: [PATCH] fix --- src/component/Detail/model/modelPosition.vue | 188 +++++++++---------- 1 file changed, 86 insertions(+), 102 deletions(-) diff --git a/src/component/Detail/model/modelPosition.vue b/src/component/Detail/model/modelPosition.vue index fed41c82..904bd8fc 100644 --- a/src/component/Detail/model/modelPosition.vue +++ b/src/component/Detail/model/modelPosition.vue @@ -219,130 +219,132 @@ 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\([^)]*\)/g, '') // 移除所有 scaleX(...) - .replace(/scaleY\([^)]*\)/g, '') // 移除所有 scaleY(...) - .replace(/rotate[XYZ]?\([^)]+\)/g, '') + .replace(/scaleX\(-1\)|scaleY\(-1\)/g, '') // 移除镜像 + .replace(/rotate[XYZ]?\([^)]+\)/g, '') // 移除rotate .replace(/\s+/g, ' ') .trim(); - + // 3. 构建新transform const transforms = []; - if (element.mirror && element.mirror.x) transforms.push('scaleX(-1)'); - if (element.mirror && element.mirror.y) transforms.push('scaleY(-1)'); + // 镜像部分 + if (element.mirror.x) transforms.push('scaleX(-1)'); + if (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); + const width = parseFloat(frontStyle.style.width); + const 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 transform = frontStyle.style.transform; + const match = transform.match(/rotate\(([-\d.]+)deg\)/); + 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'; - let newVal = val * deltaVal; - - // 翻转处理 - 只在值真正变为负值时触发镜像 - if (newVal < 0) { + // 检查是否需要镜像翻转（当值小于等于0时） + if (newVal <= 0) { frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey]; newVal = Math.abs(newVal); - } else if (newVal === 0) { - // 防止值变为0 - newVal = 1; + + updateElementTransform(frontStyle); + + // 镜像翻转后，位置需要根据原始锚点调整 + 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); - - // 保持宽高比 + const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || + (frontStyle.mirror[mirrorKey] && dir === 1); if (keepRatio && otherAxisResult) { - newVal = isWidth ? otherAxisResult.newVal * originalRatio : otherAxisResult.newVal / originalRatio; + newVal = isWidth ? + otherAxisResult.newVal * originalRatio : + otherAxisResult.newVal / originalRatio; } - - const adjustPos = shouldMove ? pos - (newVal - val) : pos; - - return { newVal, adjustPos }; + let adjustPos; + if (shouldMove) { + adjustPos = originalPosition - (newVal - originalSize); + } else { + adjustPos = originalPosition; + } + return { + newVal, + adjustPos, + shouldFlip: false + }; }; - - // 处理缩放 - 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'; - 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); + + // 自由缩放 + const widthResult = processAxis('width', width, delta[0], direction[0], left, width); + const heightResult = processAxis('height', height, delta[1], direction[1], top, height); 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) { @@ -378,11 +380,6 @@ export default defineComponent({ window._lastRotateData.angle = newAngle; updateElementTransform(frontStyle, newAngle); }); - - // 可选：在rotateStart时重置 - moveableInstance.value.on('rotateStart', () => { - window._lastRotateData = null; - }); // 调整大小 moveableInstance.value.on('resize', ({ target, width, height }) => { // console.log(width, height) @@ -400,20 +397,16 @@ export default defineComponent({ upDataDetail() }); moveableInstance.value.on('rotateEnd', () => { + window._lastRotateData = null; upDataDetail() }); }; - // 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) - } + 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() },{immediate: true,}) + const setRevocation = async ()=>{ let frontBack = JSON.parse(JSON.stringify(detailData.frontBack)) let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || '[]') @@ -574,7 +567,6 @@ export default defineComponent({ getMousePosition, updataPosition, updateRect, - initMoveableForSelected, } }, @@ -662,15 +654,7 @@ 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%;