aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
李志鹏
2026-01-29 17:16:31 +08:00
parent 33aaf0b600
commit 59422e54d8
10 changed files with 163 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/component/Detail/model/modelPosition.vue
View File

@@ -189,6 +189,10 @@ export default defineComponent({
left: 0,
top: 0,
}
let startSize = {//记录初始缩放比例
width: 0,
height: 0,
}
moveableInstance.value.on('scaleStart', ({ target, direction }) => {
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
if (!frontStyle.mirror){
@@ -196,6 +200,10 @@ export default defineComponent({
let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
}
startSize.width = Number(parseInt(target.style.width))
startSize.height = Number(parseInt(target.style.height))
startPosition.left = Number(parseInt(target.style.left))
startPosition.top = Number(parseInt(target.style.top))
});
moveableInstance.value.on('rotateStart', ({ target, direction }) => {
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
@@ -241,7 +249,9 @@ export default defineComponent({
element.style.transform = transforms.join(' ').trim();
};
moveableInstance.value.on('scale', ({ target, delta, direction }) => {
moveableInstance.value.on('scale', (e) => {
var { target, delta, direction, dist} = e
// console.log('scaleStart', e);
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
// 确保 mirror 对象存在并正确初始化
@@ -252,10 +262,14 @@ export default defineComponent({
// 清除可能存在的重复镜像变换
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 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 width = startSize.width
let height = startSize.height
let left = startPosition.left;
let top = startPosition.top;
let rotation = 0;
const originalRatio = width / height;
@@ -278,35 +292,34 @@ export default defineComponent({
};
// 根据旋转角度调整方向
if (rotation !== 0) {
direction = getAdjustedCorner({ x: direction[0], y: direction[1] }, rotation);
direction = [direction.x, direction.y];
}
// 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 processAxis = (axis, val, distVal, dir, pos, keepRatio = false, otherAxisResult = null) => {
const mirrorKey = axis === 'width' ? 'x' : 'y';
const isWidth = axis === 'width';
let newVal = val * deltaVal;
let newVal = val * distVal;
// 翻转处理 - 只在值真正变为负值时触发镜像
if (newVal < 0) {
frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
newVal = Math.abs(newVal);
} else if (newVal === 0) {
// 防止值变为0
newVal = 1;
}
// if (newVal < 0) {
// frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
// newVal = Math.abs(newVal);
// } else if (newVal === 0) {
// // 防止值变为0
// newVal = 1;
// }
if(newVal < 10) newVal = 10;
// 位置调整
const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || (frontStyle.mirror[mirrorKey] && dir === 1);
// 保持宽高比
if (keepRatio && otherAxisResult) {
newVal = isWidth ? otherAxisResult.newVal * originalRatio : otherAxisResult.newVal / originalRatio;
}
// if (keepRatio && otherAxisResult) {
// newVal = isWidth ? otherAxisResult.newVal * originalRatio : otherAxisResult.newVal / originalRatio;
// }
const adjustPos = shouldMove ? pos - (newVal - val) : pos;
@@ -315,24 +328,32 @@ export default defineComponent({
// 处理缩放
if (isDiagonal) {
const mainAxis = Math.abs(delta[0] - 1) > Math.abs(delta[1] - 1) ? 'width' : 'height';
const crossAxis = mainAxis === 'width' ? 'height' : 'width';
// const mainAxis = Math.abs(dist[0] - 1) > Math.abs(dist[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 mainDir = mainAxis === 'width' ? dist[0] : dist[1];
// const crossDir = crossAxis === 'width' ? dist[0] : dist[1];
const mainDelta = mainAxis === 'width' ? delta[0] : delta[1];
// const mainDelta = mainAxis === 'width' ? dist[0] : dist[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);
// 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';
// 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';
const scale = (dist[0] < 0 && dist[1] < 0) ? -Math.sqrt(dist[0] * dist[1]) : Math.sqrt(dist[0] * dist[1]);
const widthResult = processAxis('width', width, scale, direction[0], left);
const heightResult = processAxis('height', height, scale, direction[1], top);
frontStyle.style.width = widthResult.newVal + 'px';
frontStyle.style.height = heightResult.newVal + 'px';
frontStyle.style.left = widthResult.adjustPos + 'px';
frontStyle.style.top = heightResult.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, dist[0], direction[0], left);
const heightResult = processAxis('height', height, dist[1], direction[1], top);
frontStyle.style.left = widthResult.adjustPos + 'px';
frontStyle.style.top = heightResult.adjustPos + 'px';