aida_front/src/component/Detail/setDesignItem.vue

<template>
	<div class="design_compile_content">
		<div class="designOpenrtion_centent" id="designOpenrtionCentent">
			<div class="designOpenrtion_imgMask">
				<div class="designOpenrtion_print">
					<div 
						v-for="item,index in designItemDetail?.clothes" 
						:key="item"
						:style="[printStyleList[index].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"> 
						<!-- <img crossOrigin="anonymous" :src="item.path" :style="{transform:`scale(${printStyleList[index].transform.scale}) rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">  -->
					</div>
				</div>
				<img class="perview_img" style="width: 400px; height: auto;"  v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
				<div class="designOpenrtion_btn">
					<ul v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
						<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>
			<div @click="setPreview" class="subitOkPreviewBtn">OK</div>
		</div>
	</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';
export default defineComponent({
    props: ["frontBack"],
    setup(prop) {
        const store = useStore();

		let designItemDetail = ref([])
		let current = inject('current')//父组件传过来的数据
		let printZIndex = ref(2)//印花优先级
        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',
					zIndex:1,
				},
				transform:{
					scale:1,
					rotateZ:0,
				},
				designOpenrtionBtn:false
			}
		]);
		let direction = ref('')
		let imgDom = ref()
		let imgDomIndex = ref(0)
        return {
			designItemDetail,
			current,
			printZIndex,
            printStyleList,
			direction,//判断点击的是li那个边
			imgDom,
			imgDomIndex,
        };
    },
    data() {
        return {
            store: useStore(),
        };
    },
    methods: {
		init(){
			let DesignParent = this.$parent
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			 this.designItemDetail = designItemDetail
			// this.clearModal()
			console.log(this.frontBack);
			// console.log(this.current,DesignParent.frontBack);
			console.log(DesignParent);
			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',
					zIndex:1,
				},
				transform:{
					scale:1,
					rotateZ:0,
				},
				designOpenrtionBtn:false
			})
		},
		setpitch(item,index){
			this.printStyleList.forEach((v)=>{
				v.designOpenrtionBtn = false
			})
			this.printStyleList[index].designOpenrtionBtn = true
			this.printStyleList[index].style.zIndex = this.printZIndex++
		},
		// 设置移动
		itemMoveMousedown(index,event){
			this.imgDomIndex = index
			this.printStyleList.forEach((v)=>{
				v.designOpenrtionBtn = false
			})
			this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
			this.printStyleList[index].designOpenrtionBtn = true
			this.printStyleList[index].style.zIndex = this.printZIndex++
			let imgDomWH = this.imgDom.getBoundingClientRect()
			let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
			let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
			this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
			this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
			document.addEventListener("mouseup", this.mouseup);
			document.addEventListener("mousemove", this.moveMousemove);
		},
		//设置尺寸
		itemSizeMousedown(direction,event){
			this.direction = direction
			this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
			this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
			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'){
				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
			}else{
				this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
			}
			
			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()
			let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
			let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
			this.printStyleList[this.imgDomIndex].style.left = x
			this.printStyleList[this.imgDomIndex].style.top = y
			if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
				this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
			}
			if(x.replace(/px/g,'') <= 0){
				this.printStyleList[this.imgDomIndex].style.left = 0+'px'
			}
			if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
				this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
			}
			if(y.replace(/px/g,'') <= 0){
				this.printStyleList[this.imgDomIndex].style.top = 0+'px'
			}
		},

		sizeMousemove(e) {
			let imgDomWH = this.imgDom.getBoundingClientRect()
			let parentNode =this.imgDom.parentNode
			let width = imgDomWH.width
			let height = imgDomWH.height
			let num = width/height
			let w,h
			//判断移动四个边
			if(this.direction == 'right'){
				w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
				h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
				width = w+'px'
				height = w*num+'px'
			}else if(this.direction == 'top'){
				this.printStyleList[this.imgDomIndex].style.top = 'auto'
				// this.printStyleList[this.imgDomIndex].style.left = 'auto'
				this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
				w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
				h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
				
				height = h+'px'
				width = h*num+'px'
			}else if(this.direction == 'bottom'){
				h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
				height = h+'px'
				width = h*num+'px'
			}else if(this.direction == 'left'){
				this.printStyleList[this.imgDomIndex].style.left = 'auto'
				this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
				w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
				width = w+'px'
				height = w*num+'px'
			}
			//判断尺寸是否到边
			this.printStyleList[this.imgDomIndex].style.width = width
			this.printStyleList[this.imgDomIndex].style.height = height

		},
		//鼠标抬起
		sizeMouseup(e){
			this.printStyleList[this.imgDomIndex].style={
				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
			}
			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)
		},
		setPreview(){

		},
    },
});
</script>

<style lang="less" scoped>
.designOpenrtion_modal {
	// max-width: 1440px;
	.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{
		width: 100%;	
		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;
		position: relative;
		&.active{
			flex-direction: row;
		}
		.designOpenrtion_imgMask{
			width: auto;
			height: auto;
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
			>img{
				z-index: 2;
				position: relative;
			}
			>div{
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
			}
		}
		.designOpenrtion_print{
			z-index: 1;
			.modal_imgItem{
				position: absolute;
				overflow: hidden;
				top: 0;
				img{
					width: 100%;
					height: 100%;
					float: left;
					user-select:none;
					-webkit-user-drag: none;
				}
			}
		}
		.designOpenrtion_btn{
			z-index: 3;
			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;
		}
	}
}
</style>