This commit is contained in:
X1627315083
2025-09-03 16:36:06 +08:00
parent 8d73d6861b
commit dd3093656b
14 changed files with 139 additions and 77 deletions

View File

@@ -4,7 +4,7 @@
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
</div>
<img class="perview_img" ref="detailBody" :src="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
<img class="perview_img" @load="setPrintSize()" ref="detailBody" :src="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt="">
</div>
@@ -17,7 +17,7 @@
</ul>
</div>
</div>
<div class="designOpenrtion_imgMask" v-else>
<div class="designOpenrtion_imgMask" v-if="!frontBack?.body?.path">
<img :src="designDetail.currentFullBodyView || selectDetail.undividedLayer" style="object-fit: cover;" alt="">
</div>
</div>
@@ -71,39 +71,45 @@ export default defineComponent({
selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
},{immediate: true,})
watch(()=>detailData.frontBack?.body?.path,(newVal)=>{
let sacle = 0
const img = new Image();
img.onload = () => {
// resolve(img)
sacle = detailData.detailBody.parentNode.offsetWidth / img.width
detailData.frontBack.front.forEach((item:any,index:number) => {
for (const key in item.style) {
if(key == 'zIndex')return
let value = item.style[key]
if(typeof value !== 'number'){
value = value.replace('px','')
item.style[key] = value
}else{
item.style[key] = value*sacle+'px'
setPrintSize()
})
const setPrintSize = ()=>{
nextTick(()=>{
let sacle = 0
const img = new Image();
let dom = document.querySelector('.molepositon .perview_img') as any
if(!detailData.frontBack?.body?.path || !dom)return
img.onload = () => {
// resolve(img)
sacle = dom.parentNode.offsetWidth / img.width
detailData.frontBack.front.forEach((item:any,index:number) => {
for (const key in item.style) {
if(key == 'zIndex')return
let value = item.style[key]
if(typeof value !== 'number'){
value = value.replace('px','')
item.style[key] = value
}else{
item.style[key] = value*sacle+'px'
}
// item.style[key] = value*sacle+'px'
}
// item.style[key] = value*sacle+'px'
}
for (const key in detailData.frontBack.back[index].style) {
if(key == 'zIndex')return
let value = detailData.frontBack.back[index].style[key]
if(typeof value !== 'number'){
value = value.replace('px','')
detailData.frontBack.back[index].style[key] = value
}else{
detailData.frontBack.back[index].style[key] = value*sacle+'px'
for (const key in detailData.frontBack.back[index].style) {
if(key == 'zIndex')return
let value = detailData.frontBack.back[index].style[key]
if(typeof value !== 'number'){
value = value.replace('px','')
detailData.frontBack.back[index].style[key] = value
}else{
detailData.frontBack.back[index].style[key] = value*sacle+'px'
}
// detailData.frontBack.back[index].style[key] = value*sacle+'px'
}
// detailData.frontBack.back[index].style[key] = value*sacle+'px'
}
});
};
img.src = newVal;
},{immediate: true,})
});
};
img.src = detailData.frontBack?.body?.path;
})
}
const getDetailListDom = reactive({
libraryList:null as any,
})
@@ -385,6 +391,7 @@ export default defineComponent({
...toRefs(selectItem),
...toRefs(getDetailListDom),
setPrintSize,
itemSizeMousedown,
itemMoveMousedown,
deleteNav,