aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2fbd72e1515c7ea6b9cd3b4704be18bfe978677e
aida_front/src/component/Detail/setDesignItem.vue

576 lines
18 KiB
Vue
Raw Normal View History

commit
2023-09-12 10:09:02 +08:00
<template>
初代测试版本
2023-10-12 17:09:05 +08:00
<div class="design_compile_content" id="design_compile_content">
commit
2023-09-12 10:09:02 +08:00
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
commit
2023-10-11 17:34:14 +08:00
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
<!-- <div
v-for="item,index in frontBack.back"
:key="item"
:style="item.style"
@mousedown.stop="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
</div> -->
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
</div>
<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''" :key="designItemDetail.designItemUrl">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt="">
commit
2023-09-12 10:09:02 +08:00
</div>
<div class="designOpenrtion_btn">
commit
2023-10-11 17:34:14 +08:00
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
commit
2023-09-12 10:09:02 +08:00
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
</ul>
</div>
</div>
commit
2023-10-11 17:34:14 +08:00
<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
commit
2023-09-12 10:09:02 +08:00
</div>
初代测试版本
2023-10-12 17:09:05 +08:00
<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
commit
2023-10-11 17:34:14 +08:00
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
commit
2023-09-12 10:09:02 +08:00
</div>
</template>
<script >
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
commit
2023-10-11 17:34:14 +08:00
import GO from '@/tool/GO';
import { Https } from "@/tool/https";
commit
2023-09-12 10:09:02 +08:00
export default defineComponent({
commit
2023-10-11 17:34:14 +08:00
// props: ["frontBack"],
commit
2023-09-12 10:09:02 +08:00
setup(prop) {
const store = useStore();
commit
2023-10-11 17:34:14 +08:00
let designItemDetail = computed(()=>{
return store.state.DesignDetailModule.designItemDetail
})
commit
2023-09-12 10:09:02 +08:00
let current = inject('current')//父组件传过来的数据
2023-10-27 上传模特截取模特图片大小功能
2023-10-27 11:09:32 +08:00
let setRevocation = inject('setRevocation')//父组件传过来的数据
commit
2023-10-11 17:34:14 +08:00
let printZIndex = ref(4)//印花优先级
commit
2023-09-12 10:09:02 +08:00
let printStyleList = ref([
{
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:100+'px',
height:100+'px',
commit
2023-10-11 17:34:14 +08:00
// zIndex:1,
commit
2023-09-12 10:09:02 +08:00
},
transform:{
scale:1,
rotateZ:0,
},
designOpenrtionBtn:false
}
]);
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(0)
commit
2023-10-11 17:34:14 +08:00
let frontBack = ref({})
commit
2023-09-12 10:09:02 +08:00
return {
designItemDetail,
current,
printZIndex,
printStyleList,
direction,//判断点击的是li那个边
imgDom,
imgDomIndex,
2023-10-27 上传模特截取模特图片大小功能
2023-10-27 11:09:32 +08:00
frontBack,
setRevocation
commit
2023-09-12 10:09:02 +08:00
};
},
data() {
return {
commit
2023-10-11 17:34:14 +08:00
loadingShow:false,//加载中
commit
2023-09-12 10:09:02 +08:00
store: useStore(),
};
},
methods: {
init(){
let DesignParent = this.$parent
// this.clearModal()
commit
2023-09-26 15:05:14 +08:00
// console.log(this.current,DesignParent.frontBack);
commit
2023-09-12 10:09:02 +08:00
this.printStyleList.push({
centers:{
left:0,
top:0,
},
style:{
left:0+"px",
top:0+"px",
right:"auto",
bottom:"auto",
width:100+'px',
height:100+'px',
commit
2023-10-11 17:34:14 +08:00
// zIndex:1,
commit
2023-09-12 10:09:02 +08:00
},
transform:{
scale:1,
rotateZ:0,
},
designOpenrtionBtn:false
})
commit
2023-10-11 17:34:14 +08:00
this.setImgSize()
},
async setImgSize(){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
let front = []
let back = []
let body
designItemDetail.others.forEach((item) => {
if(item.type == 'Body'){
body = item
}
});
let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
let frontIndex = 6
let backIndex = 3
// let front = 3
// let back = 3
designItemDetail.clothes.forEach((v,index)=>{
for (let i = v.layersObject.length-1; i >= 0; i--) {
v.layersObject[i].style = {
top:v.layersObject[i].position?.[0]*ratio+'px',
left:v.layersObject[i].position?.[1]*ratio+'px',
width:v.layersObject[i].imageSize?.[0]*ratio+'px',
height:v.layersObject[i].imageSize?.[1]*ratio+'px',
// zIndex:zIndex-=1
}
v.layersObject[i].centers={
left:0,
top:0,
}
v.layersObject[i].designOpenrtionBtn = false
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
front[index].style.zIndex = frontIndex-=1
}else{
back[index] = v.layersObject[i]
back[index].style.zIndex = backIndex-=1
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
}
}
})
let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
body.style = {
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
}
this.frontBack = {
front:front,
back:back,
body:body,
}
},
//按比设置单件衣服宽高位置
async setPostition(url){
let img = await loadImage(url)
let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
const num = modal_body?.offsetHeight / img.height;
function loadImage(url) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
resolve(img)
};
img.onerror = reject;
img.src = url;
});
}
return num
commit
2023-09-12 10:09:02 +08:00
},
setpitch(item,index){
commit
2023-10-11 17:34:14 +08:00
this.frontBack.front.forEach((v)=>{
commit
2023-09-12 10:09:02 +08:00
v.designOpenrtionBtn = false
})
commit
2023-10-11 17:34:14 +08:00
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
this.frontBack.back[index].style.zIndex = this.printZIndex
commit
2023-09-12 10:09:02 +08:00
},
// 设置移动
itemMoveMousedown(index,event){
this.imgDomIndex = index
commit
2023-10-11 17:34:14 +08:00
this.frontBack.front.forEach((v)=>{
commit
2023-09-12 10:09:02 +08:00
v.designOpenrtionBtn = false
})
commit
2023-10-11 17:34:14 +08:00
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
this.frontBack.back[index].style.zIndex = this.printZIndex
commit
2023-09-12 10:09:02 +08:00
let imgDomWH = this.imgDom.getBoundingClientRect()
commit
2023-10-11 17:34:14 +08:00
let left = Number(this.frontBack.front[index].style.left.replace(/px/g,''))
let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
this.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
commit
2023-09-12 10:09:02 +08:00
document.addEventListener("mouseup", this.mouseup);
document.addEventListener("mousemove", this.moveMousemove);
},
//设置尺寸
itemSizeMousedown(direction,event){
this.direction = direction
commit
2023-10-11 17:34:14 +08:00
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
this.frontBack.front[this.imgDomIndex].designOpenrtionBtn = true
commit
2023-09-12 10:09:02 +08:00
let imgDomWH = this.imgDom.getBoundingClientRect()
let li = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
if(this.direction == 'right' || this.direction == 'bottom'){
commit
2023-10-11 17:34:14 +08:00
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
commit
2023-09-12 10:09:02 +08:00
}else{
commit
2023-10-11 17:34:14 +08:00
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
commit
2023-09-12 10:09:02 +08:00
}
document.addEventListener("mouseup", this.sizeMouseup);
document.addEventListener("mousemove", this.sizeMousemove);
},
//鼠标移动
moveMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
commit
2023-10-11 17:34:14 +08:00
let x = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
this.frontBack.front[this.imgDomIndex].style.left = x
this.frontBack.front[this.imgDomIndex].style.top = y
// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
// this.frontBack.front[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
// }
// if(x.replace(/px/g,'') <= 0){
// this.frontBack.front[this.imgDomIndex].style.left = 0+'px'
// }
// if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
// this.frontBack.front[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
// }
// if(y.replace(/px/g,'') <= 0){
// this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
// }
commit
2023-09-12 10:09:02 +08:00
},
sizeMousemove(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
let height = imgDomWH.height
let w,h
commit
2023-10-11 17:34:14 +08:00
let num = height/width
commit
2023-09-12 10:09:02 +08:00
//判断移动四个边
if(this.direction == 'right'){
commit
2023-10-11 17:34:14 +08:00
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
commit
2023-09-12 10:09:02 +08:00
width = w+'px'
height = w*num+'px'
}else if(this.direction == 'top'){
commit
2023-10-11 17:34:14 +08:00
num = width/height
this.frontBack.front[this.imgDomIndex].style.top = 'auto'
commit
2023-09-12 10:09:02 +08:00
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
commit
2023-10-11 17:34:14 +08:00
this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y)
commit
2023-09-12 10:09:02 +08:00
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
commit
2023-10-11 17:34:14 +08:00
num = width/height
h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top)
commit
2023-09-12 10:09:02 +08:00
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
commit
2023-10-11 17:34:14 +08:00
this.frontBack.front[this.imgDomIndex].style.left = 'auto'
this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.x)
commit
2023-09-12 10:09:02 +08:00
width = w+'px'
height = w*num+'px'
}
//判断尺寸是否到边
commit
2023-10-11 17:34:14 +08:00
this.frontBack.front[this.imgDomIndex].style.width = width
this.frontBack.front[this.imgDomIndex].style.height = height
commit
2023-09-12 10:09:02 +08:00
},
//鼠标抬起
sizeMouseup(e){
commit
2023-10-11 17:34:14 +08:00
this.frontBack.front[this.imgDomIndex].style={
commit
2023-09-12 10:09:02 +08:00
right:'auto',
left:this.imgDom.offsetLeft+'px',
bottom:'auto',
top:this.imgDom.offsetTop+'px',
height:this.imgDom.offsetHeight+'px',
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
commit
2023-10-11 17:34:14 +08:00
this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
commit
2023-09-12 10:09:02 +08:00
document.removeEventListener("mouseup", this.sizeMouseup);
document.removeEventListener("mousemove", this.sizeMousemove);
},
mouseup(e) {
document.removeEventListener("mouseup", this.mouseup);
document.removeEventListener("mousemove", this.moveMousemove);
},
clearModal(){
this.printZIndex = 2//点击图片z-index
this.imgDomIndex = 0//点击图片下标
this.clothes = []
this.printStyleList.splice(1,this.printStyleList.length-1)
},
commit
2023-10-11 17:34:14 +08:00
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
},
setPreviewData(){
this.$emit('setSubmit','preview');
},
初代测试版本
2023-10-12 17:09:05 +08:00
deleteBorder(){
this.frontBack?.front?.forEach((item)=>{
item.designOpenrtionBtn = false
})
},
commit
2023-10-11 17:34:14 +08:00
async setPreview(data){
let ratio = this.frontBack.body.layersObject[0].imageSize[0]/this.frontBack.body.style.width.replace(/px/g,'')
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
// this.frontBack.back.sort((a, b) => {
// var a_num = a.style.zIndex;
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
// this.frontBack.front.sort((a, b) => {
// var a_num = a.style.zIndex;
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
data.designSingleItemDTOList.forEach((item)=>{
let front = this.frontBack.front
let imageCategory1 = front[1].imageCategory
front.forEach((i)=>{
let imageCategory = i.imageCategory.split('_')[0]
if(item.type == this.capitalizeFirstLetter(imageCategory)){
let y = ((i?.style?.top.replace(/px/g,'')*ratio).toFixed(0) - i?.position[0])
let x = ((i?.style?.left.replace(/px/g,'')*ratio).toFixed(0) - i?.position[1])
let scale = i?.imageSize?Number(((i?.style?.width.replace(/px/g,'')*ratio)/(i?.imageSize[0]/i.scale)).toFixed(2)):1
item.scale = scale
let top = y == 0 ? item.offset[1]:y+item.offset[1]
let left = x == 0 ? item.offset[0]:x+item.offset[0]
item.offset = [left,top]
// item.offset = [(i?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
}
})
if(item.type == this.capitalizeFirstLetter(imageCategory1)){
item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
}
})
this.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then(
(rv) => {
this.loadingShow = false
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
designItemDetail.designItemUrl = rv.designItemUrl
commit
2023-10-13 17:06:44 +08:00
designItemDetail.ifSubmit = true
commit
2023-10-11 17:34:14 +08:00
designItemDetail.currentFullBodyView = rv.currentFullBodyView
rv.clothes.forEach((item)=>{
designItemDetail.clothes.forEach((i)=>{
if(item.type === i.type){
i.layersObject = item.layersObject
}
})
})
this.$emit('setDesignCoverage');
this.store.commit("setDesignItemDetail", designItemDetail);
2023-10-27 上传模特截取模特图片大小功能
2023-10-27 11:09:32 +08:00
this.setRevocation(designItemDetail,data)
commit
2023-10-11 17:34:14 +08:00
}
).catch(res=>{
this.loadingShow = false
});
commit
2023-09-12 10:09:02 +08:00
},
},
});
</script>
<style lang="less" scoped>
.designOpenrtion_modal {
commit
2023-09-25 10:09:00 +08:00
// max-width: 1440px;
commit
2023-09-12 10:09:02 +08:00
.ant-modal-body{
padding: 4rem 5rem 0rem!important;
// height: calc(65vh - 6.4rem);
height: 65rem;
display: flex;
overflow-y: hidden;
flex-direction: column;
}
.ant-modal-content{
border-radius: 1rem;
overflow: hidden;
}
}
.design_compile_content {
// background: #f2f3fb;
// padding-bottom: 2.9rem;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.designOpenrtion_centent{
flex: 1;
display: flex;
flex-direction: column;
align-content: space-around;
flex-wrap: nowrap;
margin: 0 auto;
overflow: hidden;
justify-content: space-between;
position: relative;
user-select:none;
初代测试版本
2023-10-12 17:09:05 +08:00
z-index: 2;
commit
2023-09-12 10:09:02 +08:00
position: relative;
&.active{
flex-direction: row;
}
.designOpenrtion_imgMask{
width: auto;
height: auto;
position: relative;
height: 100%;
overflow: hidden;
>img{
z-index: 2;
position: relative;
}
>div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
}
commit
2023-10-11 17:34:14 +08:00
.designOpenrtion_print,.detail_modal_item_front{
commit
2023-09-12 10:09:02 +08:00
z-index: 1;
commit
2023-10-11 17:34:14 +08:00
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
commit
2023-09-12 10:09:02 +08:00
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
commit
2023-10-11 17:34:14 +08:00
commit
2023-09-12 10:09:02 +08:00
}
}
commit
2023-10-11 17:34:14 +08:00
.designOpenrtion_print{
z-index: 1 !important;
}
commit
2023-09-12 10:09:02 +08:00
.designOpenrtion_btn{
commit
2023-10-11 17:34:14 +08:00
z-index: 9999;
commit
2023-09-12 10:09:02 +08:00
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: 1rem;
height: 1rem;
background-color: rgb(20, 188, 255);
position: absolute;
pointer-events: none;
}
&.active{
opacity: 1;
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: 1.5rem;
height: 1.5rem;
border-radius: 50%;
}
}
}
.subitOkPreviewBtn{
z-index: 2;
margin-bottom: 2rem;
width: 10rem;
text-align: center;
bottom: 0;
position: relative;
}
}
初代测试版本
2023-10-12 17:09:05 +08:00
.designOpenrtion_imgMask_open{
position: absolute;
width: 100%;
height: 100%;
}
commit
2023-09-12 10:09:02 +08:00
}
</style>
Reference in New Issue Copy Permalink