aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整画布布局

Browse Source
This commit is contained in:
X1627315083
2024-09-11 16:36:08 +08:00
parent 4e2d3d672c
commit d2cf4a2969
21 changed files with 898 additions and 675 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/component/Detail/DesignPrintOperation.vue
View File

@@ -90,7 +90,7 @@
:key="item"
v-if="overallSingle"
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
@mousedown.stop="itemMoveMousedown(index,$event)"
@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
class="modal_imgItem"
ref="content"
>
@@ -100,10 +100,10 @@
<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtion_sketch">
<div class="designOpenrtion_btn">
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :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_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designOpenrtion_delete" @click.stop="deletePrint">
<img src="../../assets/images/homePage/cuowu.svg" alt="">
@@ -144,6 +144,8 @@ import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from "vue-i18n";
import { remove } from "jszip";
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
setup(prop) {
@@ -232,6 +234,7 @@ export default defineComponent({
currentFullBodyView,
designItemDetailTS,
body,
getMousePosition,
};
},
data() {
@@ -244,8 +247,16 @@ export default defineComponent({
//操作旋转
rotote:{
mounted(el,value){
el.addEventListener('mousedown', (e) => {
let mousedown = function(event){
let e = getMousePosition(event,false)
mouseDownOperation(e)
}
let touchstart = function(event){
let e = getMousePosition(event,true)
mouseDownOperation(e)
}
let mouseDownOperation = (e) => {
let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
let mouse = true;
let angle = 0
@@ -258,12 +269,19 @@ export default defineComponent({
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
e.stopPropagation()
mouse = true;
var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2;
let mousemove = (e) => {
let mouseMove = function(event){
let e = getMousePosition(event,false)
mouseMoveOperation(e)
}
let touchmove = function(event){
let e = getMousePosition(event,true)
mouseMoveOperation(e)
}
let mouseMoveOperation = (e) => {
if (mouse) {
let X = eX
let Y = eY
@@ -281,11 +299,21 @@ export default defineComponent({
let mouseup = () => {
value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
mouse = false;
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('mousemove',mousemove)
// document.removeEventListener('mouseup',mouseup)
// document.removeEventListener('mousemove',mousemove)
document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
}
// document.addEventListener('mouseup', mouseup);
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
document.addEventListener('mouseup', mouseup);
});
document.addEventListener('touchend', mouseup);
}
el.addEventListener('mousedown',mousedown)
el.addEventListener('touchstart',touchstart)
}
},
@@ -462,8 +490,12 @@ export default defineComponent({
let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.offsetX-left
this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.offsetY-top
document.addEventListener("mouseup", this.mouseup);
document.addEventListener("mousemove", this.moveMousemove);
// document.addEventListener("mouseup", this.mouseup);
// document.addEventListener("mousemove", this.moveMousemove);
document.addEventListener('mousemove', this.mouseMove);
document.addEventListener('touchmove', this.touchmove);
document.addEventListener('mouseup', this.mouseup);
document.addEventListener('touchend', this.mouseup);
},
//设置尺寸
itemSizeMousedown(direction,event){
@@ -486,16 +518,28 @@ export default defineComponent({
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
document.addEventListener("mouseup", this.sizeMouseup);
document.addEventListener("mousemove", this.sizeMousemove);
// document.addEventListener("mouseup", this.sizeMouseup);
// document.addEventListener("mousemove", this.sizeMousemove);
document.addEventListener('mousemove', this.sizeMouseMove);
document.addEventListener('touchmove', this.sizeTouchmove);
document.addEventListener('mouseup', this.sizeMouseup);
document.addEventListener('touchend', this.sizeMouseup);
},
mouseMove(event){
let e = getMousePosition(event,false)
this.mouseMoveOperation(e)
},
touchmove(event){
let e = getMousePosition(event,true)
this.mouseMoveOperation(e)
},
//鼠标移动
moveMousemove(e) {
mouseMoveOperation(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
parentNode = parentNode.getBoundingClientRect()
let x = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
let x = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
let y = ( e.clientY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
if(!this.overallSingle){
@@ -514,8 +558,15 @@ export default defineComponent({
}
},
sizeMousemove(e) {
sizeMouseMove(event){
let e = getMousePosition(event,false)
this.sizeMouseMoveOperation(e)
},
sizeTouchmove(event){
let e = getMousePosition(event,true)
this.sizeMouseMoveOperation(e)
},
sizeMouseMoveOperation(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
@@ -525,27 +576,27 @@ export default defineComponent({
let w,h
//判断移动四个边
if(this.direction == 'right'){
w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
h = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
h = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
width = w+'px'
height = w*num1+'px'
}else if(this.direction == 'top'){
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.y)
w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.clientY)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
h = (e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)
h = (e.clientY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'left'){
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.x)
w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.clientX)
width = w+'px'
height = w*num1+'px'
}
@@ -565,13 +616,21 @@ export default defineComponent({
width:this.imgDom.offsetWidth+'px',
zIndex:this.printZIndex
}
document.removeEventListener("mouseup", this.sizeMouseup);
document.removeEventListener("mousemove", this.sizeMousemove);
// document.removeEventListener("mouseup", this.sizeMouseup);
// document.removeEventListener("mousemove", this.sizeMousemove);
document.removeEventListener('mousemove',this.sizeMouseMove)
document.removeEventListener('touchmove',this.sizeTouchmove)
document.removeEventListener('mouseup',this.sizeMouseup)
document.removeEventListener('touchend',this.sizeMouseup)
},
mouseup(e) {
document.removeEventListener("mouseup", this.mouseup);
document.removeEventListener("mousemove", this.moveMousemove);
// document.removeEventListener("mouseup", this.mouseup);
// document.removeEventListener("mousemove", this.moveMousemove);
document.removeEventListener('mousemove',this.mouseMove)
document.removeEventListener('touchmove',this.touchmove)
document.removeEventListener('mouseup',this.mouseup)
document.removeEventListener('touchend',this.mouseup)
},
deletePrint(){
this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)