-
@@ -160,7 +160,6 @@ export default defineComponent({
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
- systemDesignerPercentage:0,
printStyleList:{
print:{
single:[],
@@ -174,7 +173,6 @@ export default defineComponent({
type:props.type,
imgDomIndex:-1,
direction:'',//判断点的那条边
- printZIndex:2,//印花优先级
sketchWH:{
width:0,
height:0,
@@ -225,6 +223,7 @@ export default defineComponent({
img.onload = ()=>{
let imgScale = img.width / img.height
let zoom = 2
+ console.log(editPrintElementData.sketchWH)
let width = editPrintElementData.sketchWH.width / zoom
let height = width / editPrintElementData.sketchWH.height
@@ -238,24 +237,44 @@ export default defineComponent({
x = sketchW / 2
y = sketchH / 2
}
+ x = sketchW / 2
+ y = sketchH / 2
let location = [x,y]
resolve({scale,location})
}
- img.src = item.url
+ img.src = item.url || item.path
})
}
const addPrintELement = async (data:any)=>{
if(!editPrintElementData.isSketchLoad)return
let {scale,location} = await setScaleLocation(data)
+ let printIndex = 0
+ let allElementPrint = []
+ if(props.type == 'print'){
+ allElementPrint = [
+ ...(editPrintElementData.printStyleList.print.single || []),
+ ...(editPrintElementData.printStyleList.print.overall || []),
+ ...(editPrintElementData.selectDetail.trims.prints || []),
+ ]
+ }else{
+ allElementPrint = [
+ ...(editPrintElementData.printStyleList.element.single || []),
+ ...(editPrintElementData.selectDetail.printObject.prints || []),
+ ]
+ }
+
+ printIndex = Math.max(...allElementPrint.map(item => Number(item.priority))) + 1
+ console.log(printIndex)
let item = {
angle:0,
designType:data.designType,
ifSingle:editPrintElementData.stateOverallSingle == 'single',
level2Type:data.level2Type,
- location:editPrintElementData.stateOverallSingle == 'single'?location:[0,0],
+ location:location,
+ // location:editPrintElementData.stateOverallSingle == 'single'?location:[0,0],
minIOPath:data.minIOPath || data.originalUrl,
path:data.url,
- priority:editPrintElementData.printZIndex,
+ priority:printIndex,
scale,
globalCompositeOperation:'',
}
@@ -286,7 +305,7 @@ export default defineComponent({
angle : item.pattern.transform.rotateZ,
// angle : !this.overallSingle ? 0:item.pattern.transform.rotateZ,
location : location,
- priority:index,
+ priority:item.priority,
scale: scale,
designType:item.designType,
level2Type:item.level2Type,
@@ -301,10 +320,14 @@ export default defineComponent({
if(editPrintElementData.printStyleList[props.type].single.length>0){
sort(editPrintElementData.printStyleList[props.type].single)
}
+ if(editPrintElementData.printStyleList[props.type].overall.length>0){
+ sort(editPrintElementData.printStyleList[props.type].overall)
+ }
editPrintElementData.printStyleList[props.type].overall.forEach((item:any)=>{
data.push(setData(item,index))
index++
})
+ console.log(editPrintElementData.printStyleList[props.type].single)
editPrintElementData.printStyleList[props.type].single.forEach((item:any)=>{
data.push(setData(item,index))
index++
@@ -336,10 +359,10 @@ export default defineComponent({
top = item.location[1] / editPrintElementData.sketchWH.scale[1]
}else{
//overall
- editPrintElementData.systemDesignerPercentage = item.scale[0]*1000
+ console.log(item)
left = item.location[0] / editPrintElementData.sketchWH.scale[0]
top = item.location[1] / editPrintElementData.sketchWH.scale[1]
- editPrintElementData.systemDesignerPercentage = item.scale?.[0]?item.scale[0]*100:30
+ item.scale = [1,1]
}
let pattern = {
centers:{left:0,top:0},
@@ -357,7 +380,6 @@ export default defineComponent({
},
designOpenrtionBtn:false
}
- editPrintElementData.printZIndex++
item.pattern = pattern
if(item.object){
@@ -400,51 +422,49 @@ export default defineComponent({
}
}
}
- const setPosition = ()=>{
- nextTick(()=>{
- let img = new Image
- img.onload = ()=>{
- // let sketchScale = editPrintElementData.selectDetail.layersObject[0].scale
- let sketchScale = [1,1]
- let scaleX = img.width * sketchScale[0] / editPrintElementDom.sketchImg.offsetWidth
- let scaleY = img.height * sketchScale[1] / editPrintElementDom.sketchImg.offsetHeight
+ const setPosition = async ()=>{
+ await new Promise
- ![]()
+
@@ -165,6 +165,30 @@ export default defineComponent({
if(moveableInstance.value)moveableInstance.value.updateRect()
}, 200);
}
+ function getTransformValues(transformStr) {
+ let scaleX = 1;
+ let scaleY = 1;
+ let rotate = 0;
+ if (!transformStr || transformStr === 'none') {
+ return { scaleX, scaleY, rotate };
+ }
+ const scaleXMatch = transformStr.match(/scaleX\(([-\d.]+)\)/);
+ if (scaleXMatch) {
+ scaleX = parseFloat(scaleXMatch[1]);
+ }
+ const scaleYMatch = transformStr.match(/scaleY\(([-\d.]+)\)/);
+ if (scaleYMatch) {
+ scaleY = parseFloat(scaleYMatch[1]);
+ }
+ const rotateMatch = transformStr.match(/rotate\(([-\d.]+)(deg|rad)?\)/);
+ if (rotateMatch) {
+ rotate = parseFloat(rotateMatch[1]);
+ if (rotateMatch[2] === 'rad') {
+ rotate = rotate * (180 / Math.PI);
+ }
+ }
+ return { scaleX, scaleY, rotate };
+ }
const initMoveableForSelected = () => {
// 销毁旧的实例
if(selectItem.imgDomIndex == -1)return
@@ -185,6 +209,90 @@ export default defineComponent({
snapThreshold: 5,
edge: false,
});
+ const createCustomButtons = () => {
+ const flipX = document.createElement('div');
+ const flipY = document.createElement('div');
+ flipX.className = 'custom-btn';
+ flipX.innerHTML = `
+
+ `;
+ flipY.className = 'custom-btn';
+ flipY.innerHTML = `
+
+ `;
+ let moveableControlBox = getDetailListDom.moveableContainer.querySelector('.moveable-control-box')
+ // 添加到 Moveable 容器或目标元素
+ moveableControlBox.appendChild(flipX);
+ moveableControlBox.appendChild(flipY);
+
+ // 绑定事件
+ moveableControlBox.addEventListener('click', (e:any) => {
+ e.stopPropagation();
+ const btn = e.target.closest('.btn');
+ if (!btn) return;
+
+ handleCustomButtonClick(btn.className?.animVal);
+ });
+ };
+
+ const handleCustomButtonClick = (btnClass:any) => {
+ const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+ let transform = getTransformValues(frontStyle.style.transform)
+ switch (btnClass) {
+ case 'btn flip-x':
+ transform.scaleX = transform.scaleX == -1?1:-1
+ frontStyle.style.transform = `rotate(${transform.rotate}deg) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`;
+ break;
+ case 'btn flip-y':
+ transform.scaleY = transform.scaleY == -1?1:-1
+ frontStyle.style.transform = `rotate(${transform.rotate}deg) scaleX(${transform.scaleX}) scaleY(${transform.scaleY})`;
+ break;
+ }
+ };
+ const updateTransform = () => {
+ let leftClass = '.moveable-control-box .moveable-w'
+ let bottomClass = '.moveable-control-box .moveable-s'
+
+ const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+ let transform = getTransformValues(frontStyle.style.transform)
+ // leftClass = transform.scaleX == -1?'.moveable-control-box .moveable-e':leftClass
+ // bottomClass = transform.scaleY == -1?'.moveable-control-box .moveable-n':bottomClass
+
+ let customFlipX = getDetailListDom.moveableContainer.querySelector('.moveable-control-box .flip-x')
+ let customFlipY = getDetailListDom.moveableContainer.querySelector('.moveable-control-box .flip-y')
+ let leftBorder = getDetailListDom.moveableContainer.querySelector(leftClass)
+ let bottomBorder = getDetailListDom.moveableContainer.querySelector(bottomClass)
+ customFlipX.parentNode.style.transform = leftBorder.style.transform
+ customFlipY.parentNode.style.transform = bottomBorder.style.transform
+ }
+ createCustomButtons()
+ updateTransform()
let startPosition = {//记录初始位置
left: 0,
top: 0,
@@ -195,11 +303,11 @@ export default defineComponent({
}
moveableInstance.value.on('scaleStart', ({ target, direction }) => {
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
- 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 };
- }
+ // let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
+ // let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
+ let scaleX = ['1','1']
+ let scaleY = ['1','1']
+ 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))
@@ -207,11 +315,11 @@ export default defineComponent({
});
moveableInstance.value.on('rotateStart', ({ target, direction }) => {
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
- 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 };
- }
+ // let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
+ // let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
+ let scaleX = ['1','1']
+ let scaleY = ['1','1']
+ frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
});
moveableInstance.value.on('dragStart', ({ target, clientX, clientY }) => {
startPosition = {
@@ -229,22 +337,41 @@ export default defineComponent({
const updateElementTransform = (element, rotateDeg = null) => {
const currentTransform = element.style?.transform || '';
const currentRotates = (currentTransform.match(/rotate[XYZ]?\([^)]+\)/g) || []);
+ const scaleXMatch = currentTransform.match(/scaleX\(([^)]+)\)/);
+ const scaleYMatch = currentTransform.match(/scaleY\(([^)]+)\)/);
+ // 移除所有需要单独处理的变换
let otherTransforms = currentTransform
- .replace(/scaleX\([^)]*\)/g, '') // 移除所有 scaleX(...)
- .replace(/scaleY\([^)]*\)/g, '') // 移除所有 scaleY(...)
.replace(/rotate[XYZ]?\([^)]+\)/g, '')
+ .replace(/scaleX\([^)]+\)/g, '')
+ .replace(/scaleY\([^)]+\)/g, '')
.replace(/\s+/g, ' ')
.trim();
const transforms = [];
- 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);
}
+ // 处理scaleX
+ if (element.mirror && element.mirror.x) {
+ transforms.push('scaleX(-1)');
+ } else if (scaleXMatch) {
+ // 保留原有的scaleX
+ transforms.push(`scaleX(${scaleXMatch[1]})`);
+ }
+ // 处理scaleY
+ if (element.mirror && element.mirror.y) {
+ transforms.push('scaleY(-1)');
+ } else if (scaleYMatch) {
+ // 保留原有的scaleY
+ transforms.push(`scaleY(${scaleYMatch[1]})`);
+ }
+ // 添加其他变换
+ if (otherTransforms) {
+ transforms.push(otherTransforms);
+ }
element.style.transform = transforms.join(' ').trim();
};
@@ -254,18 +381,9 @@ export default defineComponent({
// console.log('scaleStart', e);
const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
- // 确保 mirror 对象存在并正确初始化
- if (!frontStyle.mirror) {
- frontStyle.mirror = { x: false, y: false };
- }
-
// 清除可能存在的重复镜像变换
- updateElementTransform(frontStyle);
+ // 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 = startSize.width
let height = startSize.height
let left = startPosition.left;
@@ -273,29 +391,10 @@ export default defineComponent({
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
- };
- };
-
- // 根据旋转角度调整方向
- // 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, distVal, dir, pos, keepRatio = false, otherAxisResult = null) => {
@@ -303,46 +402,19 @@ export default defineComponent({
const isWidth = axis === 'width';
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 < 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;
- // }
-
const adjustPos = shouldMove ? pos - (newVal - val) : pos;
return { newVal, adjustPos };
};
-
// 处理缩放
if (isDiagonal) {
- // const mainAxis = Math.abs(dist[0] - 1) > Math.abs(dist[1] - 1) ? 'width' : 'height';
- // const crossAxis = mainAxis === 'width' ? 'height' : 'width';
-
- // const mainDir = mainAxis === 'width' ? dist[0] : dist[1];
- // const crossDir = crossAxis === 'width' ? dist[0] : dist[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);
-
- // 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);
@@ -363,13 +435,12 @@ export default defineComponent({
// 更新变换，确保正确的顺序
updateElementTransform(frontStyle);
+ //更新自定义按钮
+ updateTransform()
});
moveableInstance.value.on('rotate', ({ target, beforeRotate }) => {
let frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
- if (!frontStyle.mirror) {
- frontStyle.mirror = { x: false, y: false };
- }
- const { x: isMirroredX, y: isMirroredY } = frontStyle.mirror;
+ // 获取当前旋转角度
const currentTransform = frontStyle.style?.transform || '';
const rotateMatch = currentTransform.match(/rotate\(([-\d.]+)deg\)/);
let currentAngle = 0;
@@ -379,6 +450,7 @@ export default defineComponent({
currentAngle = parsed;
}
}
+ // 计算新角度
const newBeforeRotate = parseFloat(beforeRotate) || 0;
if (!window._lastRotateData) {
window._lastRotateData = {
@@ -387,17 +459,16 @@ export default defineComponent({
};
}
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;
- }
+ let newAngle = window._lastRotateData.angle + delta;
+ // 规范化角度到 0-360 范围
newAngle = ((newAngle % 360) + 360) % 360;
+
window._lastRotateData.beforeRotate = newBeforeRotate;
window._lastRotateData.angle = newAngle;
+ // 更新元素变换
updateElementTransform(frontStyle, newAngle);
+ // 更新自定义按钮
+ updateTransform();
});
// 可选：在rotateStart时重置
@@ -602,6 +673,7 @@ export default defineComponent({
updataPosition,
updateRect,
initMoveableForSelected,
+ getTransformValues,
}
},
@@ -701,6 +773,27 @@ export default defineComponent({
background-color: #ffff;
}
}
+ :deep(.custom-btn){
+ width: 2.8rem;
+ height: 2.8rem;
+ margin: .5rem;
+ border-radius: 50%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ will-change: transform;
+ margin-left: -1.4rem;
+ margin-top: -1.4rem;
+ > svg{
+ cursor: pointer;
+ }
+ .flip-y{
+ transform: translateY(100%);
+ }
+ .flip-x{
+ transform: translateX(-100%);
+ }
+ }
:deep(.moveable-rotation-control){
border-radius: 50%;
}
diff --git a/src/store/Detail/designDetail.ts b/src/store/Detail/designDetail.ts
index 8547783a..6e6f94ba 100644
--- a/src/store/Detail/designDetail.ts
+++ b/src/store/Detail/designDetail.ts
@@ -81,7 +81,7 @@ const DesignDetail : Module
+ ![]()