-
-
-
-
-
-
-
-
-
-
- ![]()
-
@@ -106,8 +129,13 @@ import { defineComponent,computed,ref,onMounted,nextTick,watch,toRefs, reactive,
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { useStore } from "vuex";
import { getMousePosition } from "@/tool/mdEvent";
+import { sketchToMask } from "@/tool/util";
+import pingpu from '@/component/Canvas/OverallCanvas/index.vue'
+import RepeatSetting from "./overallSetting/RepeatSetting.vue";
+import { useI18n } from 'vue-i18n'
export default defineComponent({
components:{
+ pingpu,RepeatSetting
},
props: {
type: {
@@ -116,6 +144,7 @@ export default defineComponent({
}
},
setup(props,{emit}) {
+ const { t } = useI18n()
const store = useStore();
const editPrintElementDom = reactive({
imgDom:null as any,
@@ -126,6 +155,15 @@ export default defineComponent({
currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
systemDesignerPercentage:0,
+ overallDetail:{
+ url: '',
+ offsetX: 0, // px
+ offsetY: 0, // px
+ angle: 0, // 角度
+ scale: 100, // %
+ gapX: 0, // px
+ gapY: 0, // px
+ },
printStyleList:{
print:{
single:[],
@@ -215,6 +253,7 @@ export default defineComponent({
path:data.url,
priority:editPrintElementData.printZIndex,
scale,
+ globalCompositeOperation:'',
}
getItemPosition(item)
setItemPosition()
@@ -227,6 +266,7 @@ export default defineComponent({
let scale,location
let style = item.pattern.style
let sketchWH = editPrintElementData.sketchWH.scale
+ let overallDetail = {}
if(item.ifSingle){
scale = [style.width.replace(/px/g,'')/(editPrintElementData.sketchWH.width),(style.height.replace(/px/g,'')/(editPrintElementData.sketchWH.height))]
location = [style.left.replace(/px/g,'')*sketchWH[0],style.top.replace(/px/g,'')*sketchWH[1]]
@@ -237,6 +277,14 @@ export default defineComponent({
scale =[ editPrintElementData.systemDesignerPercentage/100, editPrintElementData.systemDesignerPercentage/100]
// scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width]
// location = [item.pattern.style.left,item.pattern.style.top]
+ overallDetail = {
+ offsetX: editPrintElementData.overallDetail.offsetX, // px
+ offsetY: editPrintElementData.overallDetail.offsetY, // px
+ angle: editPrintElementData.overallDetail.angle, // 角度
+ scale: editPrintElementData.overallDetail.scale, // %
+ gapX: editPrintElementData.overallDetail.gapX, // px
+ gapY: editPrintElementData.overallDetail.gapY, // px
+ }
}
let value ={
angle : item.pattern.transform.rotateZ,
@@ -249,6 +297,9 @@ export default defineComponent({
path:item.path,
minIOPath:item.minIOPath,
ifSingle:!!item.ifSingle,
+ globalCompositeOperation:'',
+ object:null,
+ // ...overallDetail,
}
return value
}
@@ -316,6 +367,15 @@ export default defineComponent({
editPrintElementData.printStyleList[props.type].single.push(item)
}else{
editPrintElementData.printStyleList[props.type].overall = []
+ editPrintElementData.overallDetail = {
+ url: item.path,
+ offsetX: 0, // px
+ offsetY: 0, // px
+ angle: 0, // 角度
+ scale: 100, // %
+ gapX: 0, // px
+ gapY: 0, // px
+ }
editPrintElementData.printStyleList[props.type].overall.push(item)
}
@@ -337,9 +397,9 @@ export default defineComponent({
if(!editPrintElementData.selectDetail.printObject.prints)return
let state = true
// editPrintElementData.stateOverallSingle = 'single'
- let arr:any = editPrintElementData.selectDetail.printObject.prints
+ let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints
if(props.type == 'element'){
- arr = editPrintElementData.selectDetail.trims.prints
+ arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints
}
if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
@@ -384,8 +444,28 @@ export default defineComponent({
single:[],
overall:[],
}
+ if(!editPrintElementData.selectDetail.sketchMask){
+ sketchToMask(newVal).then((res:any)=>{
+ editPrintElementData.selectDetail.sketchMask = res
+ })
+ }
setPosition()
},{immediate: true,})
+ watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
+ if(newVal == 'overall'){
+ let overallPrint = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]?.[0]
+ if(!overallPrint?.path)return
+ editPrintElementData.overallDetail = {
+ url: overallPrint.path,
+ offsetX: overallPrint.offsetX || 0, // px
+ offsetY: overallPrint.offsetY || 0, // px
+ angle: overallPrint.angle || 0, // 角度
+ scale: overallPrint.scale || 100, // %
+ gapX: overallPrint.gapX || 0, // px
+ gapY: overallPrint.gapY || 0, // px
+ }
+ }
+ })
//设置移动
const itemMoveMousedown = (index:number,event:any)=>{
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
@@ -738,6 +818,20 @@ export default defineComponent({
collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
moveItem()
}
+ const inputFillAngle = (angle:any)=>{
+ editPrintElementData.overallDetail.angle = angle
+ }
+ const inputFillOffset = (offset:any)=>{
+ editPrintElementData.overallDetail.offsetX = offset.left
+ editPrintElementData.overallDetail.offsetY = offset.top
+ }
+ const inputFillScale = (scale:any)=>{
+ editPrintElementData.overallDetail.scale = scale
+ }
+ const inputFill_Gap = (x:any,y:any)=>{
+ editPrintElementData.overallDetail.gapX = x
+ editPrintElementData.overallDetail.gapY = y
+ }
onMounted(()=>{
if(props.type == 'element'){
editPrintElementData.stateOverallSingle = 'single'
@@ -747,6 +841,7 @@ export default defineComponent({
previewDetailPrintData()
})
return{
+ t,
getMousePosition,
...toRefs(editPrintElementDom),
...toRefs(editPrintElementData),
@@ -760,6 +855,10 @@ export default defineComponent({
clearOverall,
designMousedown,
navDelete,
+ inputFillAngle,
+ inputFillOffset,
+ inputFillScale,
+ inputFill_Gap,
}
},
directives:{
@@ -983,7 +1082,13 @@ export default defineComponent({
// height: 100%;
max-width: 100%;
// width: 100%;
-
+ &.designOpenrtion_sketchMask{
+ position: absolute;
+ z-index: 3;
+ top: 0;
+ left: 0;
+ pointer-events: none;
+ }
}
.designOpenrtion_sketch_mask{
z-index: 2;
@@ -1013,8 +1118,13 @@ export default defineComponent({
}
}
}
+ .designOpenrtion_pingpu{
+ width: 100%;
+ height: 100%;
+ z-index: 2;
+ }
.designOpenrtion_btn{
- z-index: 3;
+ z-index: 99;
>div{
width: 100%;
height: 100%;
diff --git a/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue
new file mode 100644
index 00000000..b2f4f3c3
--- /dev/null
+++ b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue
@@ -0,0 +1,124 @@
+
+
+
-->
-
-
+
+
-
-
+
+
+ -
@@ -82,12 +102,15 @@
+
+
+
+
+
+
+
diff --git a/src/component/Detail/detailRight/overallSetting/tools/AngleTool.vue b/src/component/Detail/detailRight/overallSetting/tools/AngleTool.vue
new file mode 100644
index 00000000..c024a38e
--- /dev/null
+++ b/src/component/Detail/detailRight/overallSetting/tools/AngleTool.vue
@@ -0,0 +1,122 @@
+
+
+ {{ t("Canvas.angle") }}
+
+
+
+ {{ t("Canvas.scale") }}
+
+
+
+ Gap X
+
+
+
+ Gap Y
+
+
+
+ {{ t("Canvas.offset") }}
+
+
+
+
+
+
+
+
diff --git a/src/component/Detail/detailRight/overallSetting/tools/MySelect.vue b/src/component/Detail/detailRight/overallSetting/tools/MySelect.vue
new file mode 100644
index 00000000..146a7d8d
--- /dev/null
+++ b/src/component/Detail/detailRight/overallSetting/tools/MySelect.vue
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/component/Detail/detailRight/overallSetting/tools/Slider.vue b/src/component/Detail/detailRight/overallSetting/tools/Slider.vue
new file mode 100644
index 00000000..d3de2145
--- /dev/null
+++ b/src/component/Detail/detailRight/overallSetting/tools/Slider.vue
@@ -0,0 +1,160 @@
+
+
+
+
+
+
+
diff --git a/src/component/Detail/model/index.vue b/src/component/Detail/model/index.vue
index 79cf2097..585d1ec5 100644
--- a/src/component/Detail/model/index.vue
+++ b/src/component/Detail/model/index.vue
@@ -4,9 +4,9 @@
+
+
+
+
+ x:{{ tofix(data.left) }}% y:{{ tofix(data.top) }}%
+
+
@@ -14,7 +14,7 @@
-
+
@@ -51,7 +51,7 @@ export default defineComponent({
components:{
position,modelNav
},
- emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation','modelOnLoad','sketchSysToLibrary','addDetail'],
+ emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation','modelOnLoad','sketchSysToLibrary'],
setup(props,{emit}) {
const {t} = useI18n()
const store = useStore();
@@ -68,36 +68,40 @@ export default defineComponent({
const getDetailListDom = reactive({
libraryList:null as any,
position:null as any,
+ modelindexRight:null as any,
+ modelNav:null as any,
})
const getSubmitData = (value:any,boolean)=>{
return getDetailListDom.position.getSubmitData(value,boolean)
}
const showDesignImgDetail = (str:any)=>{
- new Promise((resolve, reject) => {
- if(
- getDetailListData.isEditPattern.value&&
- detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
- ){
- Modal.confirm({
- title: t('collectionModal.jsContent2'),
- icon: createVNode(ExclamationCircleOutlined),
- okText: 'Yes',
- cancelText: 'No',
- mask:false,
- centered:true,
- onOk() {
- resolve(true)
- emit('detailEdit',str)
- },
- onCancel(){
- resolve(false)
- }
- });
- }else{
- resolve(true)
- emit('detailEdit',str)
- }
- })
+ emit('detailEdit',str)
+
+ // new Promise((resolve, reject) => {
+ // if(
+ // getDetailListData.isEditPattern.value&&
+ // detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
+ // ){
+ // Modal.confirm({
+ // title: t('collectionModal.jsContent2'),
+ // icon: createVNode(ExclamationCircleOutlined),
+ // okText: 'Yes',
+ // cancelText: 'No',
+ // mask:false,
+ // centered:true,
+ // onOk() {
+ // resolve(true)
+ // emit('detailEdit',str)
+ // },
+ // onCancel(){
+ // resolve(false)
+ // }
+ // });
+ // }else{
+ // resolve(true)
+ // emit('detailEdit',str)
+ // }
+ // })
}
const deleteItem = ()=>{
setRevocation()
@@ -117,22 +121,29 @@ export default defineComponent({
}
let time = null as any
- const handleResize = ()=>{
+ const handleResize = ()=>{
clearTimeout(time)
time = setTimeout(()=>{
store.commit('DesignDetail/setDesignDetail',getDetailListData.designDetail)
- getDetailListDom.position.updataPosition()
-
- },1000)
+ getDetailListDom.position?.updataPosition?.()
+ getDetailListDom.modelNav?.setItemPosition?.()
+ getDetailListDom.position?.updateRect?.()
+ },500)
}
const setBack = ()=>{
- emit('detailEdit')
+ showDesignImgDetail(getDetailListData.isEditPattern.value)
}
+ let observers = null as any
onMounted(()=>{
- window.addEventListener('resize', handleResize);
+ observers = new ResizeObserver(entries => {
+ for (let entry of entries) {
+ handleResize()
+ }
+ });
+ observers.observe(getDetailListDom.modelindexRight);
})
onBeforeUnmount(()=>{
- window.removeEventListener('resize', handleResize);
+ observers.disconnect();
})
return{
...toRefs(detailData),
diff --git a/src/component/Detail/model/modelNav.vue b/src/component/Detail/model/modelNav.vue
index 0b94e180..67398f72 100644
--- a/src/component/Detail/model/modelNav.vue
+++ b/src/component/Detail/model/modelNav.vue
@@ -268,17 +268,8 @@ export default defineComponent({
let allPostition = store.state.Workspace.workspaceAllPosition
return allPostition.find(item => item.value === type)?.name
}
- let observers = null as any
- onMounted(()=>{
- observers = new ResizeObserver(entries => {
- for (let entry of entries) {
- setItemPosition()
- }
- });
- observers.observe(detailData.modelNavBox);
- })
+
onBeforeUnmount(()=>{
- observers.disconnect();
})
return{
...toRefs(detailData),
diff --git a/src/component/Detail/model/modelPosition.vue b/src/component/Detail/model/modelPosition.vue
index 4153bae7..05b9a1d9 100644
--- a/src/component/Detail/model/modelPosition.vue
+++ b/src/component/Detail/model/modelPosition.vue
@@ -1,21 +1,17 @@
-
+
![]()
![]()
-
![]()
@@ -40,8 +36,10 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { getMousePosition } from "@/tool/mdEvent";
-import { Modal,message } from 'ant-design-vue';
-import newFollowVue from '@/component/Account/message/newFollow.vue';
+import Vue3Moveable from 'vue3-moveable';
+import Moveable from 'moveable';
+import { parse } from 'vue/compiler-sfc';
+import { scale } from 'echarts/types/src/scale/helper.js';
export default defineComponent({
components:{
},
@@ -75,10 +73,7 @@ export default defineComponent({
imgDom:null as any,
direction:'',
})
- watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
- if(!newValue && newValue?.id == oldValue?.id)return
- selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
- },{immediate: true,})
+
watch(()=>detailData.frontBack?.body?.path,(newVal)=>{
setPrintSize()
})
@@ -99,7 +94,6 @@ export default defineComponent({
if(entries[0].contentRect.width == 0)return
detailData.observerWH.width = Math.floor(entries[0].contentRect.width)
detailData.observerWH.height = Math.floor(entries[0].contentRect.height)
- console.log(detailData.observerWH)
})
detailData.observer.observe(dom)
@@ -131,6 +125,7 @@ export default defineComponent({
}
for (const key in detailData.frontBack.back[index].style) {
if(key == 'zIndex')return
+ if(key == 'transform')return
let value = detailData.frontBack.back[index].style[key]
if(typeof value !== 'number'){
value = value.replace('px','')
@@ -143,6 +138,7 @@ export default defineComponent({
});
setTimeout(() => {
emit('modelOnLoad')
+ initMoveableForSelected()
},500);
};
img.src = detailData.frontBack?.body?.path;
@@ -150,203 +146,280 @@ export default defineComponent({
}
const getDetailListDom = reactive({
libraryList:null as any,
+ moveableContainer:null as any,//控件层
})
-
- //设置尺寸
- const itemSizeMousedown = (direction:any,event:any)=>{
- selectItem.direction = direction
- selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
- detailData.frontBack.front[selectItem.imgDomIndex].designOpenrtionBtn = true
- let imgDomWH = selectItem.imgDom.getBoundingClientRect()
- let li = (document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_btn_top")[0] as any).offsetWidth/2
- if(selectItem.direction == 'right' || selectItem.direction == 'bottom'){
- detailData.frontBack.front[selectItem.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
- detailData.frontBack.front[selectItem.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
- }else{
- detailData.frontBack.front[selectItem.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
- detailData.frontBack.front[selectItem.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
+
+ const elementRefs = ref([]) as any;
+ const moveableInstance = ref(null) as any;
+ const setElementRef = (el, index) => {
+ elementRefs.value[index] = el;
+ };
+ const updateRect = ()=>{
+ setTimeout(() => {
+ moveableInstance.value.updateRect()
+ }, 500);
+ }
+ const initMoveableForSelected = () => {
+ // 销毁旧的实例
+ if(selectItem.imgDomIndex == -1)return
+ if (moveableInstance.value) {
+ moveableInstance.value.destroy();
}
- document.addEventListener('mousemove', sizeMouseMove);
- document.addEventListener('touchmove', sizeTouchmove);
- document.addEventListener('mouseup', sizeMouseup);
- document.addEventListener('touchend', sizeMouseup);
- }
- const sizeMouseMove = (event:any)=>{
- let e = getMousePosition(event,false)
- sizeMouseMoveOperation(e)
- }
- const sizeTouchmove = (event:any)=>{
- let e = getMousePosition(event,true)
- sizeMouseMoveOperation(e)
-
- }
- const sizeMouseup = (e:any)=>{
- detailData.frontBack.front[selectItem.imgDomIndex].style={
- right:'auto',
- left:selectItem.imgDom.offsetLeft+'px',
- bottom:'auto',
- top:selectItem.imgDom.offsetTop+'px',
- height:selectItem.imgDom.offsetHeight+'px',
- width:selectItem.imgDom.offsetWidth+'px',
- zIndex:selectItem.imgDom.style.zIndex,
- // zIndex:selectItem.printZIndex
+ const selectedEl = elementRefs.value[selectItem.imgDomIndex];
+ if (!selectedEl) return;
+ if(!selectedEl.style.left)return
+ moveableInstance.value = new Moveable(getDetailListDom.moveableContainer, {
+ target: selectedEl,
+ draggable: true,
+ scalable: true,
+ rotatable: true,
+ keepRatio: false, // 等比缩放
+ snappable: true,
+ snapThreshold: 5,
+ edge: false,
+ });
+ let startPosition = {//记录初始位置
+ left: 0,
+ top: 0,
}
- // detailData.frontBack.back[selectItem.imgDomIndex].style.zIndex = selectItem.printZIndex
- document.removeEventListener('mousemove',sizeMouseMove)
- document.removeEventListener('touchmove',sizeTouchmove)
- document.removeEventListener('mouseup',sizeMouseup)
- document.removeEventListener('touchend',sizeMouseup)
- //鼠标抬起
- setRevocation()
- }
- let isMove = false//表示是否移动，是否需要在鼠标抬起的时候保存数据
+ 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 };
+ }
+ });
+ 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 };
+ }
+ });
+ moveableInstance.value.on('dragStart', ({ target, clientX, clientY }) => {
+ startPosition = {
+ left:parseFloat(selectedEl.style.left.replace('px','')) || 0,
+ 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]
+ detailData.frontBack.front[selectItem.imgDomIndex].style.left = x + 'px'
+ 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\(-1\)|scaleY\(-1\)/g, '') // 移除镜像
+ .replace(/rotate[XYZ]?\([^)]+\)/g, '') // 移除rotate
+ .replace(/\s+/g, ' ')
+ .trim();
+ // 3. 构建新transform
+ const transforms = [];
+ // 镜像部分
+ 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 };
+
+ 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 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
+ };
+ }
+
+ 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, originalPosition, originalSize, keepRatio = false, otherAxisResult = null) => {
+ let newVal = val * deltaVal;
+ const mirrorKey = axis === 'width' ? 'x' : 'y';
+ const isWidth = axis === 'width';
+
+ // 检查是否需要镜像翻转（当值小于等于0时）
+ if (newVal <= 0) {
+ frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
+ newVal = Math.abs(newVal);
+
+ 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);
+ if (keepRatio && otherAxisResult) {
+ newVal = isWidth ?
+ otherAxisResult.newVal * originalRatio :
+ otherAxisResult.newVal / originalRatio;
+ }
+ let adjustPos;
+ if (shouldMove) {
+ adjustPos = originalPosition - (newVal - originalSize);
+ } else {
+ adjustPos = originalPosition;
+ }
+ return {
+ newVal,
+ adjustPos,
+ shouldFlip: false
+ };
+ };
+
+ // 自由缩放
+ 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';
+ // }
+ });
+
+ // 旋转
+ 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;
+
+ // 计算实际旋转角度
+ let actualRotate = beforeRotate;
+
+ // 关键逻辑：当镜像状态不同时（一个true一个false），旋转方向反转
+ if (isMirroredX !== isMirroredY) {
+ actualRotate = -beforeRotate;
+ }
+
+ // 确保角度在 0-360 度范围内
+ actualRotate = actualRotate % 360;
+
+ // 如果角度为负数，转换为正数
+ if (actualRotate < 0) {
+ actualRotate += 360;
+ }
+
+ // 确保角度在 [0, 360) 范围内
+ actualRotate = ((actualRotate % 360) + 360) % 360;
+
+ updateElementTransform(frontStyle, actualRotate.toFixed(2));
+ });
+ // 调整大小
+ moveableInstance.value.on('resize', ({ target, width, height }) => {
+ // console.log(width, height)
+ // detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
+ // detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
+ });
+ moveableInstance.value.on('dragEnd', ({ target, clientX, clientY }) => {
+ startPosition = {
+ left:0,
+ top:0,
+ }
+ upDataDetail()
+ });
+ moveableInstance.value.on('scaleEnd', () => {
+ upDataDetail()
+ });
+ moveableInstance.value.on('rotateEnd', () => {
+ 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()
+ },{immediate: true,})
+
const setRevocation = ()=>{
- if(!isMove)return
- isMove = false
let frontBack = JSON.parse(JSON.stringify(detailData.frontBack))
- console.log(frontBack)
let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any))
revocation.push({designData:null,position:frontBack})
sessionStorage.setItem('revocation', JSON.stringify(revocation));
-
}
- const sizeMouseMoveOperation = (e:any)=> {
- isMove = true
- let imgDomWH = selectItem.imgDom.getBoundingClientRect()
- let parentNode =selectItem.imgDom.parentNode
- let width = imgDomWH.width
- let height = imgDomWH.height
- let w,h
- let num = height/width
- //判断移动四个边
- if(selectItem.direction == 'right'){
- w = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)
- h = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)*num
- width = w+'px'
- // height = w*num+'px'
- }else if(selectItem.direction == 'top'){
- num = width/height
- detailData.frontBack.front[selectItem.imgDomIndex].style.top = 'auto'
- // this.printStyleList[selectItem.imgDomIndex].style.left = 'auto'
- detailData.frontBack.front[selectItem.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - selectItem.imgDom.offsetTop+'px'
- w = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)*num
- h = (detailData.frontBack.front[selectItem.imgDomIndex].centers.top - e.clientY)
-
- height = h+'px'
- // width = h*num+'px'
- }else if(selectItem.direction == 'bottom'){
- num = width/height
- h = (e.clientY - detailData.frontBack.front[selectItem.imgDomIndex].centers.top)
- height = h+'px'
- // width = h*num+'px'
- }else if(selectItem.direction == 'left'){
- detailData.frontBack.front[selectItem.imgDomIndex].style.left = 'auto'
- detailData.frontBack.front[selectItem.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - selectItem.imgDom.offsetLeft+'px'
- w = (detailData.frontBack.front[selectItem.imgDomIndex].centers.left - e.clientX)
-
- width = w+'px'
- // height = w*num+'px'
- }
- //判断尺寸是否到边
- detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
- detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
- }
- // 设置移动
- const mouseMove = (event:any)=>{
- let e = getMousePosition(event,false)
- mouseMoveOperation(e)
- }
- const touchmove=(event:any)=>{
- let e = getMousePosition(event,true)
- mouseMoveOperation(e)
- }
- const mouseup = (e:any)=> {
- document.removeEventListener('mousemove',mouseMove)
- document.removeEventListener('touchmove',touchmove)
- document.removeEventListener('mouseup',mouseup)
- document.removeEventListener('touchend',mouseup)
- ///鼠标抬起
+ const upDataDetail = async ()=>{
+ //同步到selectDetail数据中，
+ // getDetailListData.designDetail
+ let {scale,offset,priority,transpose,rotate,position,imageSize} = await getSubmitData(selectItem.selectDetail,false)
+ selectItem.selectDetail.layersObject[0].scale = scale
+ selectItem.selectDetail.layersObject[1].scale = scale
+ selectItem.selectDetail.layersObject[0].offset = offset
+ selectItem.selectDetail.layersObject[1].offset = offset
+ selectItem.selectDetail.layersObject[0].priority = priority
+ selectItem.selectDetail.layersObject[1].priority = priority
+ selectItem.selectDetail.layersObject[0].rotate = rotate
+ selectItem.selectDetail.layersObject[1].rotate = rotate
+ selectItem.selectDetail.layersObject[0].transpose = transpose
+ selectItem.selectDetail.layersObject[1].transpose = transpose
+ selectItem.selectDetail.layersObject[0].position = position
+ selectItem.selectDetail.layersObject[1].position = position
+ selectItem.selectDetail.layersObject[0].imageSize = imageSize
+ selectItem.selectDetail.layersObject[1].imageSize = imageSize
setRevocation()
}
- const mouseMoveOperation = (e:any)=>{
- isMove = true
- let imgDomWH = selectItem.imgDom.getBoundingClientRect()
- let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
- let x = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)+'px'
- let y = ( e.clientY - detailData.frontBack.front[selectItem.imgDomIndex].centers.top)+'px'
- detailData.frontBack.front[selectItem.imgDomIndex].style.left = x
- detailData.frontBack.front[selectItem.imgDomIndex].style.top = y
- }
- const clothesOpenActive = (index:number)=>{
- // this.designItemDetail.clothes.forEach((item)=>{
- // item.clothesOpenItem = false
- // })
- // if(index != -1){
- // this.designItemDetail.clothes[index].clothesOpenItem = true
- // }
- }
- const itemMoveMousedown = async (index:any,e:any)=>{
- if(detailData.selectDetail.id != detailData.frontBack.front[index].id)return
- let isModal = false
- await new Promise((resolve, reject) => {
- // if(
- // detailData.isEditPattern.value &&
- // selectItem.selectDetail?.id &&
- // (detailData.frontBack.front[index].id != selectItem.selectDetail.id)
- // ){
- // isModal = true
- // Modal.confirm({
- // title: t('collectionModal.jsContent2'),
- // icon: createVNode(ExclamationCircleOutlined),
- // okText: 'Yes',
- // cancelText: 'No',
- // mask:false,
- // centered:true,
- // onOk() {
- // resolve(true)
- // isOpen = true
- // },
- // onCancel(){
- // resolve(false)
- // isOpen = false
- // }
- // });
- // }else{
- // if(detailData.frontBack.front[index].id != selectItem.selectDetail.id){
- // isOpen = true
- // }
- // resolve(true)
- // isModal = false
- // }
- resolve(true)
- }).then((rv)=>{
- })
- // emit('canvasReload')
- // store.commit('DesignDetail/setDesignColthes',detailData.frontBack.front[index].id)
- if(isModal)return
- store.commit('DesignDetail/setDesignColthes',detailData.frontBack.front[index].id)
- selectItem.imgDomIndex = index
- detailData.frontBack.front.forEach((v:any)=>{
- v.designOpenrtionBtn = false
- })
- clothesOpenActive(index)
- let event = e||window.event
- selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
- detailData.frontBack.front[index].designOpenrtionBtn = true
- // detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
- // detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
- let imgDomWH = selectItem.imgDom.getBoundingClientRect()
- let left = Number(detailData.frontBack.front[index].style.left.replace(/px/g,''))
- let top = Number(detailData.frontBack.front[index].style.top.replace(/px/g,''))
- detailData.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
- detailData.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
-
- document.addEventListener('mousemove', mouseMove);
- document.addEventListener('touchmove', touchmove);
- document.addEventListener('mouseup', mouseup);
- document.addEventListener('touchend', mouseup);
- }
const sort = (arr:any)=>{
arr.sort((a:any, b:any) => {
var a_num = a.style.zIndex;
@@ -355,7 +428,7 @@ export default defineComponent({
});
return arr
}
- const getSubmitData = (value:any,isNoComputed)=>{
+ const getSubmitData = async (value:any,isNoComputed)=>{
let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize || isNoComputed){
return{
@@ -365,6 +438,17 @@ export default defineComponent({
}
}
let ratio = detailData.frontBack.body.layersObject[0].imageSize[0]/parentNode.width
+
+ let scale = 0
+ let dom:any = document.querySelector('.molepositon .perview_img')
+ const img = new Image();
+ img.src = detailData.frontBack?.body?.path;
+ await new Promise((resolve, reject) => {
+ img.onload = () => {
+ scale = dom.parentNode.offsetWidth / img.width
+ resolve()
+ };
+ })
// let arr:any = sort(detailData.frontBack.front)
let arr:any = sort(JSON.parse(JSON.stringify(detailData.frontBack.front)))
let num = 10
@@ -377,6 +461,8 @@ export default defineComponent({
priority:'',
maskUrl:'',
maskMinioUrl:'',
+ position:null,
+ imageSize:null,
}
let state = false
for (let index = 0; index < arr.length; index++) {
@@ -384,13 +470,27 @@ export default defineComponent({
state = true
let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[0])
let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[1])
+ let positionX = Number((arr[index]?.style?.left.replace(/px/g,'')/scale)).toFixed(2)
+ let positionY = Number((arr[index]?.style?.top.replace(/px/g,'')/scale)).toFixed(2)
+ let imageSizeW = Number((arr[index]?.style?.width.replace(/px/g,'')/scale)).toFixed(2)
+ let imageSizeH = Number((arr[index]?.style?.height.replace(/px/g,'')/scale)).toFixed(2)
+
let scaleWidth = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale[0])).toFixed(2)):1
let scaleHeight = arr[index]?.imageSize?Number(((arr[index]?.style?.height.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[1]/arr[index].scale[1])).toFixed(2)):1
// let widthScale = (arr[index].style.width.replace(/px/g,'')/arr[index].style.height.replace(/px/g,'')).toFixed(2)
+
+ let transformStr = arr[index]?.style?.transform
+ let scaleX = transformStr.match(/scaleX\(([-\d.]+)\)/)
+ let scaleY = transformStr.match(/scaleY\(([-\d.]+)\)/)
+ let rotate = transformStr.match(/rotate\(([-\d.]+)deg\)/);
+ data.transpose = [parseFloat(scaleX?.[1] || 1),parseFloat(scaleY?.[1] || 1)]
+ data.rotate = parseFloat(rotate?.[1] || 0)
data.scale = [scaleWidth,scaleHeight]
let top = y == 0 ? value.layersObject[0].offset[1]:y+value.layersObject[0].offset[1]
let left = x == 0 ? value.layersObject[0].offset[0]:x+value.layersObject[0].offset[0]
data.offset = [left?left:0,top?top:0]
+ data.position = [positionY,positionX]
+ data.imageSize = [imageSizeW,imageSizeH]
// data.offset = [left?left:0,top?top:0]
data.maskUrl = arr[index].maskUrl
data.maskMinioUrl = arr[index].maskMinioUrl
@@ -410,15 +510,6 @@ export default defineComponent({
}
const deleteNav = ()=>{
- }
- const setpitch = (item:any,index:any)=>{
- detailData.frontBack.front.forEach((v:any)=>{
- v.designOpenrtionBtn = false
- })
- detailData.frontBack.front[index].designOpenrtionBtn = true
- // detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
- // detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
- clothesOpenActive(index)
}
const updataPosition = ()=>{
let url = detailData.frontBack?.body?.path
@@ -431,10 +522,12 @@ export default defineComponent({
detailData.frontBack.front.forEach((item:any,index:number) => {
for (const key in item.style) {
if(key == 'zIndex')return
+ if(key == 'transform')return
item.style[key] = item.style[key]*sacle+'px'
}
for (const key in detailData.frontBack.back[index].style) {
if(key == 'zIndex')return
+ if(key == 'transform')return
detailData.frontBack.back[index].style[key] = detailData.frontBack.back[index].style[key]*sacle+'px'
}
});
@@ -445,20 +538,22 @@ export default defineComponent({
if (detailData.observer) {
detailData.observer.disconnect()
}
+ if (moveableInstance.value) {
+ moveableInstance.value.destroy();
+ }
})
return{
...toRefs(detailData),
...toRefs(selectItem),
...toRefs(getDetailListDom),
-
+ setElementRef,
+
setPrintSize,
- itemSizeMousedown,
- itemMoveMousedown,
deleteNav,
- setpitch,
getSubmitData,
getMousePosition,
updataPosition,
+ updateRect,
}
},
@@ -541,6 +636,11 @@ export default defineComponent({
}
}
}
+ .moveableContainer{
+ :deep(.moveable-origin){
+ opacity: 0;
+ }
+ }
> .designOpenrtion_imgMask{
width: auto;
height: auto;
@@ -561,10 +661,15 @@ export default defineComponent({
position: absolute;
top: 0;
}
+
.detail_modal_item_front,.designOpenrtion_print{
z-index: 2;
height: 100%;
width: 100%;
+ pointer-events: none;
+ &.active{
+ pointer-events: auto;
+ }
img{
width: 100%;
// height: ;
@@ -583,94 +688,6 @@ export default defineComponent({
.designOpenrtion_print{
z-index: 1 !important;
}
- > .designOpenrtion_btnBox{
- z-index: 99;
- width: 100%;
- height: 100%;
- left: 0;
- ul{
- list-style: none;
- // width: 100%;
- // height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- box-sizing: border-box;
- border: 2px solid rgb(20, 188, 255);
- padding: 0;
- -webkit-user-drag: none;
- user-select:none;
- opacity: 0;
- margin: 0;
-
- li{
- cursor: pointer;
- // border-radius: 50%;
- width: calc(2rem*1.2);
- height: calc(2rem*1.2);
- background-color: rgb(20, 188, 255);
- position: absolute;
- pointer-events: none;
- }
- &.active{
- opacity: 1;
- z-index: 999 !important;
- li{
- pointer-events: auto;
- }
- }
- .designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
- left: 50%;
- transform: translate(-50%,-50%) ;
- cursor: n-resize;
- }
- .designOpenrtion_btn_top{
- top: 0;
- }
- .designOpenrtion_btn_bottom{
- top: 100%;
- }
- .designOpenrtion_btn_left,.designOpenrtion_btn_right{
- top: 50%;
- transform: translate(-50%,-50%) ;
- cursor: e-resize;
- }
- .designOpenrtion_btn_left{
- left: 0;
- }
- .designOpenrtion_btn_right{
- left: 100%;
- }
- .designOpenrtion_rotote{
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%);
- width: 0;
- height: 0;
- }
- .designOpenrtion_rotote::after{
- position: absolute;
- content: "";
- background-color: #14bcff;
- width: 2px;
- height: 30px;
- left: 50%;
- bottom: 0;
- transform: translateX(-50%);
- }
- .designOpenrtion_rotote::before{
- position: absolute;
- content: "";
- background-color: #14bcff;
- top: calc(50% - 30px);
- left: 50%;
- transform: translate(-50%,-50%) ;
- width: calc(1.5rem*1.2);
- height: calc(1.5rem*1.2);
- border-radius: 50%;
- }
- }
- }
}
}
\ No newline at end of file
diff --git a/src/component/home/design/collection/more.vue b/src/component/home/design/collection/more.vue
index 153b64e9..3dc0a2fb 100644
--- a/src/component/home/design/collection/more.vue
+++ b/src/component/home/design/collection/more.vue
@@ -132,7 +132,25 @@ export default defineComponent({
url:rv.url,
designType:props.item.resData.designType || props.item.designType,
}
- props.list.unshift(rv)
+ rv.type_ = {
+ type1: "material",
+ type2: props.level1Type
+ }
+ if(props.level1Type == 'Printboard'){
+ let list = props.list.filter((v:any)=> v.type_?.type1 == "material")
+ list.unshift(rv)
+ store.commit("setPrintboardMaterialFiles", list);
+ }else if(props.level1Type == 'Sketchboard'){
+ let list = props.list.filter((v:any)=> v.type_?.type1 == "material")
+ list.unshift(rv)
+ store.commit("setSketchboardMaterialFiles", list);
+ }else if(props.level1Type == 'Moodleboard'){
+ let list = props.list.filter((v:any)=> v.type_?.type1 == "material")
+ list.unshift(rv)
+ store.commit("setMoodleboardMaterialFiles", list);
+ }else{
+ props.list.unshift(rv)
+ }
}
}
).catch(res=>{
diff --git a/src/component/modules/generalMiniCanvas.vue b/src/component/modules/generalMiniCanvas.vue
index 15c579d3..7c8cb384 100644
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -9,7 +9,7 @@
:isBackgroundChangeable="false"
ref="editCanvas">
-
+
+
![]()
-
-
+
-
-
-
-
-
-
+
@@ -46,7 +46,11 @@ export default defineComponent({
isSubmitCanvasJSON:{
type:Boolean,
default:false
- }
+ },
+ btnShow:{
+ type:Boolean,
+ default:true
+ },
},
emits:['submitBase64Data','canvasChangeGetJSON'],
setup(props,{emit}) {
@@ -99,6 +103,9 @@ export default defineComponent({
}
}
+ const submitBase64Data = (base64Data)=>{
+ return dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:true,isCropByBg:true})
+ }
const exportElement = ()=>{
dataDom.editCanvas.exportImage({isContainBg:true,isContainFixed:false,isCropByBg:true}).then((rv)=>{
downloadBase64Image(rv,'canvas')
@@ -174,6 +181,7 @@ export default defineComponent({
canvasInit,
exportElement,
changeCanvas,
+ submitBase64Data,
};
},
data(prop) {
diff --git a/src/router/index.ts b/src/router/index.ts
index 11e44375..5d6eea99 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -418,6 +418,14 @@ const routes: Array = [
},
component: () => import("@/views/userManual.vue"),
},
+ {
+ path: "/award",
+ name: "award",
+ meta: {
+ enter: "all",
+ },
+ component: () => import("@/views/AwardPage/index.vue"),
+ },
{
path: "/:catchAll(.*)",
redirect: "/404",
diff --git a/src/store/Detail/designDetail.ts b/src/store/Detail/designDetail.ts
index 82b9c575..a5b40f08 100644
--- a/src/store/Detail/designDetail.ts
+++ b/src/store/Detail/designDetail.ts
@@ -1,6 +1,7 @@
import {Module} from 'vuex'
import {RootState} from '../index'
import { forEach } from 'jszip'
+import { transform } from 'typescript'
interface DesignDetail{
designDetail:any,
@@ -59,6 +60,7 @@ const DesignDetail : Module = {
left:v.layersObject[i].position?.[1],
width:v.layersObject[i].imageSize?.[0],
height:v.layersObject[i].imageSize?.[1],
+ transform:`rotate(${v.layersObject[i]?.rotate || 0}deg) scaleX(${v.layersObject[i].transpose?.[0] || 1}) scaleY(${v.layersObject[i].transpose?.[1] || 1})`,
}
v.layersObject[i].centers={
left:0,
@@ -69,7 +71,7 @@ const DesignDetail : Module = {
v.layersObject[i].designOpenrtionBtn = false
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
- // front[index].style.zIndex = v.priority
+ front[index].style.zIndex = v.priority + 10
front[index].id = v.id
front[index].undividedLayer = v.undividedLayer
front[index].undividedLayerWithSinglePrint = v?.undividedLayerWithSinglePrint
@@ -199,6 +201,9 @@ const DesignDetail : Module = {
trims:null,
type:null,
undividedLayer:null,
+ undividedLayer_:null,
+ transpose:[1,1],
+ rotate:0,
undividedLayerWithSinglePrint:null,
}
if(!state.currentDetailType)state.currentDetailType = 'sketch'
@@ -209,6 +214,28 @@ const DesignDetail : Module = {
});
state.selectDetail = data
},
+ canvasPreviewUpdata(state,{type,callBack}){
+ console.log(state.selectDetail,type)
+ // state.selectDetail.newDetail?.print?.forEach((item:any) => {
+ // state.selectDetail.printObject.prints = []
+ // state.selectDetail.printObject.push({
+ // })
+ // });
+ if(type == 'print' || type == 'all')state.selectDetail.printObject.prints = state.selectDetail.newDetail?.print
+ if(type == 'color' || type == 'all')state.selectDetail.color = {
+ ...state.selectDetail.newDetail?.color,
+ ...state.selectDetail.newDetail?.color?.rgba,
+ ...state.selectDetail.newDetail?.color?.hsv,
+ }
+ console.log(state.selectDetail,type,state.selectDetail.newDetail)
+ if(type == 'element' || type == 'all')state.selectDetail.trims.prints = state.selectDetail.newDetail?.element
+ if(type == 'all'){
+ state.selectDetail.newDetail = {}
+ }else{
+ state.selectDetail.newDetail[type] = null
+ }
+ callBack()
+ },
async setPraeview(state,value){//preview
let data = value?.rv || value
let currentType = value?.currentType
@@ -228,7 +255,6 @@ const DesignDetail : Module = {
}else{
id_ = item.id
}
- console.log(id_)
let el:any = document.querySelector('.molepositon .perview_img')
await new Promise((resolve, reject) => {
if(!state.frontBack?.body?.path){
@@ -252,7 +278,8 @@ const DesignDetail : Module = {
left:item.layersObject[i].position?.[1] * scale + 'px',
width:item.layersObject[i].imageSize?.[0] * scale + 'px',
height:item.layersObject[i].imageSize?.[1] * scale + 'px',
- zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length
+ zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length,
+ transform:`rotate(${item.layersObject?.[i]?.rotate || 0}deg) scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1})`,
}
item.layersObject[i].centers={
left:0,
@@ -293,6 +320,8 @@ const DesignDetail : Module = {
detailItem.minIOPath = item.minIOPath
detailItem.scale = [1,1]
detailItem.offset = [0,0]
+ detailItem.transpose = item.transpose || [1,1]
+ detailItem.rotate = item.rotate || 0
detailItem.printObject = item.printObject
detailItem.trims = item.trims
detailItem.type = item.type
diff --git a/src/tool/util.js b/src/tool/util.js
index 8d69b9d0..b8f095c7 100644
--- a/src/tool/util.js
+++ b/src/tool/util.js
@@ -618,6 +618,60 @@ function segmentImage(markerImage,fullImage,size){
}
})
}
+
+/**
+ * 处理PNG图片：透明度转白色，其他颜色转透明
+ * @param {string} sketchImage - 原始图片
+ * @returns {Promise} 处理后的ase64
+ */
+function sketchToMask(sketchImage) {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.crossOrigin = 'anonymous';
+ img.onload = function() {
+ try {
+ const canvas = document.createElement('canvas');
+ const ctx = canvas.getContext('2d');
+ canvas.width = img.width;
+ canvas.height = img.height;
+ ctx.drawImage(img, 0, 0);
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ const data = imageData.data;
+
+ for (let i = 0; i < data.length; i += 4) {
+ const r = data[i];
+ const g = data[i + 1];
+ const b = data[i + 2];
+ const a = data[i + 3];
+ if (a > 0) {
+ data[i] = 0;
+ data[i + 1] = 0;
+ data[i + 2] = 0;
+ data[i + 3] = 0;
+ } else {
+ // 完全透明的像素 -> 纯白色
+ data[i] = 255;
+ data[i + 1] = 255;
+ data[i + 2] = 255;
+ data[i + 3] = 255;
+ }
+ }
+ ctx.putImageData(imageData, 0, 0);
+ const base64 = canvas.toDataURL('image/png');
+ resolve(base64);
+
+ } catch (error) {
+ reject(error);
+ }
+ };
+
+ img.onerror = function() {
+ reject(new Error('图片加载失败'));
+ };
+
+ img.src = sketchImage;
+ });
+}
export {
isEmail,
getUploadUrl,
@@ -640,5 +694,6 @@ export {
setGradual,
calculateGradientCoordinate,
segmentImage,
- UrlToFile
+ UrlToFile,
+ sketchToMask
}
\ No newline at end of file
diff --git a/src/views/AwardPage/index.vue b/src/views/AwardPage/index.vue
new file mode 100644
index 00000000..f04e0d4f
--- /dev/null
+++ b/src/views/AwardPage/index.vue
@@ -0,0 +1,251 @@
+
+
{{ $t('exportModel.Save') }}
{{ $t('exportModel.Export') }}
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ 
+
+ Submit your Application
+
+
+
+
+
+ {{ item.number }}
+ {{ item.label }}
+
+
+
+
+ 
+
+
+ Possibilites
+
+ 
+
+ Bloom Your Creativity
+
+ Theme of 2026
+
+ Where imagination meets innovation, creativity blooms. This theme celebrates AI as
+ a catalyst for fashion design, allowing your vision to flourish beyond traditional
+ boundaries. Let your ideas blossom into extraordinary designs that merge human
+ artistry with artificial intelligence.
+
+
+
+ Design Without Borders
+
+
+
+
+ Global Opportunity
+
+ Open to visionary designers across the globe. From Seoul to Singapore, New York to
+ Shanghai, we're seeking the next generation of fashion innovators who dare to
+ reimagine the future of design.
+
+
+
+
+
+ Competition Timeline
+
+ Shaping the Future
+