diff --git a/src/component/Detail/detailRight/editPrintElement.vue b/src/component/Detail/detailRight/editPrintElement.vue index 6b6dd48a..21472da3 100644 --- a/src/component/Detail/detailRight/editPrintElement.vue +++ b/src/component/Detail/detailRight/editPrintElement.vue @@ -372,7 +372,8 @@ export default defineComponent({ angle: 0, flipX: false, flipY: false, - blendMode: "multiply", + // blendMode: "multiply", + blendMode: "source-over", gapX: 0, gapY: 0, } diff --git a/src/component/Detail/model/modelPosition.vue b/src/component/Detail/model/modelPosition.vue index fed41c82..8d454185 100644 --- a/src/component/Detail/model/modelPosition.vue +++ b/src/component/Detail/model/modelPosition.vue @@ -191,7 +191,7 @@ export default defineComponent({ } moveableInstance.value.on('scaleStart', ({ target, direction }) => { const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex]; - if (!frontStyle.mirror){ + if (!frontStyle?.mirror){ let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/); let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/); frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false }; @@ -199,7 +199,7 @@ export default defineComponent({ }); moveableInstance.value.on('rotateStart', ({ target, direction }) => { const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex]; - if (!frontStyle.mirror){ + if (!frontStyle?.mirror){ let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/); let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/); frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false }; @@ -211,7 +211,7 @@ export default defineComponent({ top:parseFloat(selectedEl.style.top.replace('px','')) || 0, } }); - // 拖拽 + // 拖拽 moveableInstance.value.on('drag', ({ target, beforeTranslate }) => { let x = startPosition.left + beforeTranslate[0] let y = startPosition.top + beforeTranslate[1] @@ -242,6 +242,7 @@ export default defineComponent({ }; moveableInstance.value.on('scale', ({ target, delta, direction }) => { + console.log(delta,direction) const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex]; // 确保 mirror 对象存在并正确初始化 @@ -282,7 +283,6 @@ export default defineComponent({ 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) => { @@ -290,16 +290,13 @@ export default defineComponent({ const isWidth = axis === 'width'; let newVal = val * deltaVal; - + // console.log(val,deltaVal) // 翻转处理 - 只在值真正变为负值时触发镜像 if (newVal < 0) { frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey]; newVal = Math.abs(newVal); - } else if (newVal === 0) { - // 防止值变为0 - newVal = 1; } - + // console.log(val,deltaVal) // 位置调整 const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || (frontStyle.mirror[mirrorKey] && dir === 1); @@ -317,15 +314,11 @@ 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 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'; @@ -414,6 +407,12 @@ export default defineComponent({ },100) } },{immediate: true,}) + watch(()=>detailData.frontBack.front.length,(newValue,oldValue)=>{ + if(selectItem.selectDetail?.id)selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == selectItem.selectDetail?.id) + setTimeout(()=>{ + initMoveableForSelected() + },100) + }) const setRevocation = async ()=>{ let frontBack = JSON.parse(JSON.stringify(detailData.frontBack)) let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || '[]')