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

7
src/component/Detail/DesignDetailAlter.vue
View File

@@ -430,12 +430,13 @@ export default defineComponent({
threshold:[.5]
})
ob.observe(el)
// this.currentPage = 1
// this.currentPage = +=1
// this.pageSize = 12
// currentPage
let this_ = binding.instance
function callback(entries, observer) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
if (entry.isIntersecting && !this_.isShowLoading) {
this_.getLibraryList()
} else {
}
@@ -775,6 +776,7 @@ export default defineComponent({
},
//请求我的印花&&模型
getLibraryList(){
this.isShowLoading = true
let level2Type = ''
if(this.selectCode == 'Printboard' || this.selectCode == 'DesignElements'){
level2Type = this.designType
@@ -792,7 +794,6 @@ export default defineComponent({
pictureName:this.searchPictureName,
size:this.pageSize+this.clothesList.length,
}
this.isShowLoading = true
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
(rv) => {
if(this.selectCode == 'Sketchboard'){

2
src/component/Detail/DesignDetailEnd.vue
View File

@@ -350,7 +350,7 @@ export default defineComponent({
},
setElemets(){
if(this.current.trims.prints && this.current.trims.prints.length == 0 && this.elementsList.length == 0)return message.info('请选择至少一张element')
let DesignElementsOperation = isMoible() ? this.$refs.DesignPrintMobile : this.$refs.DesignElementsOperation
let DesignElementsOperation = this.$refs.DesignElementsOperation
DesignElementsOperation.init()
},
//提交

122
src/component/Detail/DesignElements.vue
View File

@@ -43,7 +43,7 @@
v-for="item,index in exhibitionElementsList"
:key="item"
:style="[printStyleList?.[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" >
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElements_imgItme" draggable="false">
@@ -52,11 +52,11 @@
<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElements_sketch">
<!-- <img :src="current?.path" alt="" class="designElements_sketch"> -->
<div class="designElements_btn">
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElements_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
<li class="designElements_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designElements_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
<li class="designElements_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElements_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
<li class="designElements_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
<li class="designElements_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
<li class="designElements_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
<li class="designElements_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designElements_delete" @click="deletePrint">
<img src="../../assets/images/homePage/cuowu.svg" alt="">
@@ -88,6 +88,7 @@ import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { useI18n } from "vue-i18n";
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
setup(prop) {
@@ -159,6 +160,7 @@ export default defineComponent({
currentFullBodyView,
designItemDetailTS,
body,
getMousePosition,
};
},
data() {
@@ -171,8 +173,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('designElements_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
let mouse = true;
let angle = 0
@@ -185,12 +195,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
@@ -201,16 +218,24 @@ export default defineComponent({
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
}
}
document.addEventListener('mousemove', mousemove);
// document.addEventListener('mousemove', mousemove);
// 添加鼠标松开事件监听器
let mouseup = () => {
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
mouse = false;
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)
}
},
@@ -301,8 +326,12 @@ export default defineComponent({
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);
// 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){
@@ -325,23 +354,42 @@ export default defineComponent({
this.printStyleList[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('designElements_modal')[0].getElementsByClassName("designElements_imgMask")[0]
parentNode = parentNode.getBoundingClientRect()
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
let x = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
let y = ( e.clientY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
this.printStyleList[this.imgDomIndex].style.left = x
this.printStyleList[this.imgDomIndex].style.top = y
},
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
@@ -351,27 +399,27 @@ export default defineComponent({
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
w = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)
h = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)*num
width = w+'px'
height = w*num1+'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)
w = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)*num
h = (this.printStyleList[this.imgDomIndex].centers.top - e.clientY)
height = h+'px'
width = h*num+'px'
}else if(this.direction == 'bottom'){
h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
h = (e.clientY - 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)
w = (this.printStyleList[this.imgDomIndex].centers.left - e.clientX)
width = w+'px'
height = w*num1+'px'
}
@@ -391,13 +439,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.exhibitionElementsList.splice(this.imgDomIndex,1)

12
src/component/Detail/DesignElementsMobile.vue
View File

@@ -43,7 +43,7 @@
v-for="item,index in exhibitionElementsList"
:key="item"
:style="[printStyleList?.[index]?.style]"
@touchstart.stop="itemMoveMousedown(index,$event)"
@touchstart.passive="itemMoveMousedown(index,$event)"
class="modal_imgItem"
ref="content" >
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElementsMobile_imgItme" draggable="false">
@@ -52,11 +52,11 @@
<!-- <img :src="current?.path" alt="" class="designElementsMobile_sketch"> -->
<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElementsMobile_sketch">
<div class="designElementsMobile_btn">
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
<li class="designElementsMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
<li class="designElementsMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designElementsMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
<li class="designElementsMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
<li class="designElementsMobile_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
<li class="designElementsMobile_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
<li class="designElementsMobile_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
<li class="designElementsMobile_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
<li class="designElementsMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designElementsMobile_delete" @click="deletePrint">
<img src="../../assets/images/homePage/cuowu.svg" alt="">

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)

14
src/component/Detail/DesignPrintOperationMobile.vue
View File

@@ -93,7 +93,7 @@
:key="item"
v-if="overallSingle"
:style="[printStyleList[stateOverallSingle]?.[index]?.style]"
@touchstart.stop="itemMoveMousedown(index,$event)"
@touchstart.passive="itemMoveMousedown(index,$event)"
class="modal_imgItem"
ref="content" >
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtionMobile_imgItme" draggable="false">
@@ -101,18 +101,18 @@
</div>
<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtionMobile_sketch">
<div class="designOpenrtionMobile_btn">
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtionMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtionMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtionMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtionMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
<li class="designOpenrtionMobile_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtionMobile_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtionMobile_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtionMobile_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
<li class="designOpenrtionMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
<li class="designOpenrtionMobile__delete" @click="deletePrint">
<img src="../../assets/images/homePage/cuowu.svg" alt="">
</li>
</ul>
<div v-show="!overallSingle"></div>
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" class="designOpenrtionMobile_Mouoverall active" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @touchstart.stop="itemMoveMousedown(0,$event)">
<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" class="designOpenrtionMobile_Mouoverall active" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @touchstart.passive="itemMoveMousedown(0,$event)">
<i class="fi fi-rr-arrows animtion1"></i>
<i class="fi fi-rr-arrows animtion2"></i>
<li class="designOpenrtionMobile_rotote" v-rotote.stop="[0,printStyleList[stateOverallSingle][0].transform]"></li>

182
src/component/Detail/addDetails.vue
View File

@@ -21,7 +21,7 @@
<div>{{ $t('addDetails.AddDetails') }}</div>
<div class="modal_title_text_intro"></div>
</div>
<div class="exportCanvasBox_center">
<div class="addDetails_canvasCenter">
<div class="addDetails_center_btn addDetails_center_item" :class="{spread:spreadState}">
<!-- <div @click="setOperation('')" class="addDetails_center_btn_item">
<div>新增</div>
@@ -32,9 +32,13 @@
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
</div>
<div class="exportCanvasBox_center">
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
</div>
</div>
<div class="exportCanvasBox_submit" @click="setSubmit">
<div class="started_btn">
{{ $t('addDetails.submit') }}
@@ -44,9 +48,9 @@
</div>
<div></div>
</a-modal>
<div class="mark_loading" v-show="loadingShow">
<!-- <div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
</div> -->
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
@@ -74,6 +78,14 @@ export default defineComponent({
let scale = 2;
let ratio = [1,1]
let exportWH = 512
let pencilbtnStyle = ref({
background:'',
width:0+'px',
height:0+'px',
display:'none',
left:0+'px',
top:0+'px',
})
let canvasBtn = reactive({
canvasState:'move',
canvasPencilWidth:{
@@ -91,35 +103,29 @@ export default defineComponent({
let canvasState = ref()//存放canvas操作
let keyDown = []//监听键盘的 keydown 和 keyup 事件
let init = (data,index)=>{
loadingShow.value = true
normalCanvasState.value = []
reverseCanvasState.value = []
showPayOrder.value = true;
scale = 2;
ratio = [1,1]
exportWH = 512
nextTick(()=>{
let canvasBox = document.querySelector(".addDetails_modal .exportCanvasBox_center");
let height = canvasBox.offsetHeight;
canvasBox.style.width = height+'px'
canvasWH.value = height
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
var canvasDom = document.createElement("canvas");
document.addEventListener("keydown", canvasKeyDown);
document.addEventListener("keyup", canvasKeyUp);
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
if(oldCanvasDom){
oldCanvasDom.remove()
}
if(oldCanvasDom1){
oldCanvasDom1.remove()
}
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom)loadingShow.value = false
if(oldCanvasDom1)oldCanvasDom1.remove()
canvasBox.appendChild(canvasDom);
let img = new Image();
img.onload = function(){
loadingShow.value = true
let height = canvasBox.offsetHeight;
canvasWH.value = height
canvasBox.style.width = height+'px'
let wScale = 1
let hScale = 1
if(img.width>img.height){
@@ -131,14 +137,13 @@ export default defineComponent({
}
ratio = [wScale,hScale]
canvas = new fabric.Canvas(canvasDom, {
backgroundColor: "#FFF",
width: canvasWH.value * wScale,
height: canvasWH.value * hScale,
isDrawingMode: false, // 开启绘图模式
});
scale = img.height/canvas.height
JSchangeType(canvas,'init')
pencilbtnStyle.value.background = rgba
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
@@ -147,7 +152,10 @@ export default defineComponent({
// 设置背景图对象的宽度和高度与 canvas 相同
img.scaleToWidth(canvas.width);
img.scaleToHeight(canvas.height);
img.set({
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
// 将背景图添加到 canvas 的底层
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
if(!fabric.Object.prototype.controls.deleteControl){
@@ -155,8 +163,8 @@ export default defineComponent({
}else{
fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
}
setPencilWidth()
updateCanvasState()
loadingShow.value = false
},{ crossOrigin: "Anonymous" });
// 鼠标抬起事件
canvas.on('mouse:up', function(event) {
@@ -167,7 +175,6 @@ export default defineComponent({
//画布上移动
canvas.on("mouse:move", event =>setCanvasMove(event));
canvas.add(brushIndicator)
setOperation('pencil')
img.remove()
}
@@ -199,48 +206,32 @@ export default defineComponent({
document.removeEventListener("keyup", canvasKeyUp);
}
let rgba = 'rgba(0, 0, 0, 1)'
let brushIndicator = new fabric.Circle({
radius:2,
fill: 'rgba(0, 0, 0, 0)',
stroke: '#000',
strokeWidth: 1,
originX: 'center',
originY: 'center',
visible :true,
// left: -100,
// top: -100,
erasable: false,
});
let setCanvasMove = (event)=>{
var pointer = canvas.getPointer(event.e);
if(canvas.isDrawingMode){
canvas.setCursor('none');
if(!canvas.contains(brushIndicator)){
canvas.add(brushIndicator)
brushIndicator.set({// left:0,
// top:0,
radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2
})
canvas.bringToFront(brushIndicator);//设置优先级最高
}
// brushIndicator.fill = canvasPencilColor.value
brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
}
let canvasBox = document.querySelector(".addDetails_canvasCenter .canvas-container");
const rect = canvasBox.getBoundingClientRect();
const parentRect = canvasBox.parentElement.getBoundingClientRect();
let parentX = rect.left - parentRect.left
let parentY = rect.top - parentRect.top
pencilbtnStyle.value.left = parentX + pointer.x+'px'
pencilbtnStyle.value.top = parentY + pointer.y+'px'
canvas.requestRenderAll()
}
let setOperation = (str)=>{
canvasBtn.canvasState = str
if(str == 'move'){
setMove()
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
pencilbtnStyle.value.display = `none`
}else if(str == 'pencil'){
setPencil()
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
pencilbtnStyle.value.display = `block`
}else if(str == 'eraser'){
setEraser()
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
pencilbtnStyle.value.display = `block`
}
}
let setMove = ()=>{
@@ -252,17 +243,19 @@ export default defineComponent({
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
canvas.freeDrawingBrush.color = rgba
brushIndicator.set('fill',rgba)
pencilbtnStyle.value.background = rgba
canvas.freeDrawingBrush.isEraser = false
setPencilWidth()
}
let setEraser = ()=>{
canvas.isDrawingMode = true
let eraser = new fabric.EraserBrush(canvas)
canvas.freeDrawingBrush = eraser
brushIndicator.set({fill: '#fff'});
canvas.requestRenderAll();
canvas.freeDrawingBrush.isEraser = true
pencilbtnStyle.value.background = `rgb(255,255,255)`
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
setPencilWidth()
}
let deleteObj = ()=> {
// if(!canvas.getActiveObjects()){
@@ -284,13 +277,13 @@ export default defineComponent({
clearTimeout(setTimeOutWidth)
setTimeOutWidth = setTimeout(()=>{
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
},300)
}
let updateCanvasState = (str) =>{
if(str != 'mouseUp'){
canvas.remove(brushIndicator)
}
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
const canvasAsJson = JSON.stringify(canvas.toJSON());
normalCanvasState.value.push(canvasAsJson);
}
@@ -312,9 +305,9 @@ export default defineComponent({
}
let setSubmit = ()=>{
var allObjects = canvas.getObjects('path');
if(allObjects.length == 0){
return message.info(t('addDetails.jsContent1'))
}
// if(allObjects.length == 0){
// return message.info(t('addDetails.jsContent1'))
// }
var canvasDom = document.createElement("canvas");
let exportCanvas = new fabric.Canvas(canvasDom, {
backgroundColor: "rgba(255, 255, 255,1)",
@@ -346,13 +339,18 @@ export default defineComponent({
}
)
exportCanvas.add(obj)
if(allObjects.length-1 == index){
let data = exportCanvas.toDataURL('jpg')
cancelDsign()
clearCanvas()
emit('setSloganData',data)
}
// if(allObjects.length-1 == index){
// let data = exportCanvas.toDataURL('jpg')
// cancelDsign()
// clearCanvas()
// emit('setSloganData',data)
// }
})
let data = exportCanvas.toDataURL('jpg')
cancelDsign()
clearCanvas()
emit('setSloganData',data)
})
}
@@ -367,6 +365,7 @@ export default defineComponent({
showPayOrder,
loadingShow,
t,
pencilbtnStyle,
...toRefs(canvasBtn),
init,
setOperation,
@@ -416,24 +415,20 @@ export default defineComponent({
padding: 1rem 0;
}
}
.exportCanvasBox_center{
height: 100%;
flex: 1;
position: relative;
margin: 0 auto;
overflow: hidden;
background: #e6e6e6;
// overflow: scroll;
.addDetails_center_btn{
.addDetails_center_btn{
z-index: 2;
left: 50%;
transform: translate(-50%,-135%);
transition: all .3s;
// left: 50%;
// transform: translate(-50%,-135%);
// transition: all .3s;
padding: 1rem 1.5rem;
// position: relative;
// transform: translate(-50%,0);
position: relative;
width: 100%;
flex-direction: row;
input{
width: 100%;
margin-top: 1rem;
// width: 100%;
// margin-top: 1rem;
flex: 1;
}
.icon-xiala{
position: absolute;
@@ -470,18 +465,41 @@ export default defineComponent({
transform: translate(-50%,0);
}
}
.addDetails_canvasCenter{
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
margin: 0 auto;
}
.exportCanvasBox_center{
height: 100%;
flex: 1;
position: relative;
overflow: hidden;
background: #e6e6e6;
// overflow: scroll;
.canvas-container{
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
}
.exportCanvasBox_center:hover{
.addDetails_center_btn{
transform: translate(-50%,-101%);
&.spread{
transform: translate(-50%,0);
}
// transform: translate(-50%,-101%);
// &.spread{
// transform: translate(-50%,0);
// }
}
}
}

283
src/component/Detail/editFrontBack.vue
View File

@@ -1,21 +1,24 @@
<template>
<div class="editFrontBack_center">
<div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
<!-- <div @click="setOperation('')" class="editFrontBack_center_btn_item">
<div>新增</div>
</div> -->
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:rgba == 'rgb(255,0,0)'}" title="front"></div>
<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:rgba == 'rgb(0,255,0)'}" title="back"></div>
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
</div>
<div class="exportCanvasBox_center">
<div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
<!-- <div @click="setOperation('')" class="editFrontBack_center_btn_item">
<div>新增</div>
</div> -->
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:rgba == 'rgb(255,0,0)'}" title="front"></div>
<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:rgba == 'rgb(0,255,0)'}" title="back"></div>
<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
<div @click="setSubmit">保存</div>
<div class="editFrontBack_bgImg" v-show="loadingShow">
<img :src="imgData?.undividedLayer" alt="">
</div>
<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
</div>
</div>
</template>
@@ -45,6 +48,15 @@ export default defineComponent({
let ratio = [1,1]
let exportWH = 0
let imgDomIndex = 0
let imgData = ref()
let pencilbtnStyle = ref({
background:'',
width:0+'px',
height:0+'px',
display:'none',
left:0+'px',
top:0+'px',
})
// let a = computed(()=>{
// console.log(123);
// return props.patchData
@@ -71,27 +83,28 @@ export default defineComponent({
let canvasState = ref()//存放canvas操作
let keyDown = []//监听键盘的 keydown 和 keyup 事件
let init = (data,index)=>{
loadingShow.value = true
normalCanvasState.value = []
reverseCanvasState.value = []
ratio = [1,1]
imgData.value = data
nextTick(()=>{
let canvasBox = document.querySelector(".exportCanvasBox_center");
let height = canvasBox.offsetHeight;
canvasBox.style.width = height+'px'
canvasWH.value = height
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
var canvasDom = document.createElement("canvas");
document.addEventListener("keydown", canvasKeyDown);
document.addEventListener("keyup", canvasKeyUp);
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom)loadingShow.value = false
if(oldCanvasDom1)oldCanvasDom1.remove()
canvasBox.appendChild(canvasDom);
let img = new Image();
img.onload = function(){
loadingShow.value = true
let height = canvasBox.offsetHeight;
canvasWH.value = height
console.log(canvasBox.offsetHeight);
canvasBox.style.width = height+'px'
let wScale = 1
let hScale = 1
let styleWidth = Number(data.style.width.split('px')[0])
@@ -110,7 +123,8 @@ export default defineComponent({
isDrawingMode: false, // 开启绘图模式
});
JSchangeType(canvas,'init')
console.log(rgba.value);
pencilbtnStyle.value.background = rgba.value
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
exportUrl = data.maskUrl
@@ -136,7 +150,6 @@ export default defineComponent({
}
setPencilWidth()
updateCanvasState()
loadingShow.value = false
},{ crossOrigin: "Anonymous" });
// 鼠标抬起事件
canvas.on('mouse:up', function(event) {
@@ -147,11 +160,6 @@ export default defineComponent({
//画布上移动
canvas.on("mouse:move", event =>setCanvasMove(event));
canvas.add(brushIndicator)
canvas.on("mouse:down", event=>brushIndicator.bringToFront());
canvas.on('object:added', function() {
brushIndicator.bringToFront();
});
setOperation('pencil')
createSetTimeSubmit()
img.remove()
@@ -180,64 +188,51 @@ export default defineComponent({
let setClone = ()=>{
// canvasBtn.canvasState = 'move'
// canvasBtn.spreadState = false
let canvasBox = document.querySelector(".exportCanvasBox_center");
let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom1)oldCanvasDom1.remove()
loadingShow.value = false
}
let clearCanvas = ()=>{
document.removeEventListener("keydown", canvasKeyDown);
document.removeEventListener("keyup", canvasKeyUp);
}
let rgba = ref('rgb(255,0,0)')
let brushIndicator = new fabric.Circle({
radius:2,
fill: 'rgba(0, 0, 0, 0)',
stroke: '#000',
strokeWidth: 1,
originX: 'center',
originY: 'center',
visible :true,
// left: -100,
// top: -100,
erasable: false,
});
let setCanvasMove = (event)=>{
var pointer = canvas.getPointer(event.e);
if(canvas.isDrawingMode){
canvas.setCursor('none');
if(!canvas.contains(brushIndicator)){
canvas.add(brushIndicator)
brushIndicator.set({// left:0,
// top:0,
radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2
})
canvas.bringToFront(brushIndicator);//设置优先级最高
}
// brushIndicator.fill = canvasPencilColor.value
brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
brushIndicator.bringToFront()
// brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
}
let canvasBox = document.querySelector(".editFrontBack_center .canvas-container");
const rect = canvasBox.getBoundingClientRect();
const parentRect = canvasBox.parentElement.getBoundingClientRect();
let parentX = rect.left - parentRect.left
let parentY = rect.top - parentRect.top
// brushIndicator.set({ left: x, top: y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
pencilbtnStyle.value.left = parentX + pointer.x+'px'
pencilbtnStyle.value.top = parentY + pointer.y+'px'
canvas.requestRenderAll()
}
let setOperation = (str)=>{
canvasBtn.canvasState = str
if(str == 'move'){
setMove()
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
pencilbtnStyle.value.display = `none`
}else if(str == 'pencil'){
setPencil()
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
pencilbtnStyle.value.display = `block`
}else if(str == 'eraser'){
setEraser()
rgba.value = ''
if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
rgba.value = 'rgb(255,255,255)'
pencilbtnStyle.value.display = `block`
}
}
let setOperationColor = (color)=>{
brushIndicator.set({fill: color});
pencilbtnStyle.value.background = color
rgba.value = color
canvas.freeDrawingBrush.color = color
setOperation('pencil')
@@ -250,18 +245,20 @@ export default defineComponent({
canvas.isDrawingMode = true//开启绘画模式
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
setPencilWidth()
canvas.freeDrawingBrush.color = rgba.value
brushIndicator.set('fill',rgba.value)
pencilbtnStyle.value.background = rgba.value
canvas.freeDrawingBrush.isEraser = false
}
let setEraser = ()=>{
canvas.isDrawingMode = true
let eraser = new fabric.EraserBrush(canvas)
canvas.freeDrawingBrush = eraser
brushIndicator.set({fill: '#fff'});
pencilbtnStyle.value.background = `rgb(255,255,255)`
canvas.requestRenderAll();
canvas.freeDrawingBrush.isEraser = true
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
setPencilWidth()
}
let deleteObj = ()=> {
// if(!canvas.getActiveObjects()){
@@ -283,6 +280,9 @@ export default defineComponent({
clearTimeout(setTimeOutWidth)
setTimeOutWidth = setTimeout(()=>{
canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
},300)
}
let setTimeSubmit = null
@@ -294,11 +294,10 @@ export default defineComponent({
}
let updateCanvasState = (str) =>{
if(str != 'mouseUp'){
canvas.remove(brushIndicator)
// editFrontBackPencilbtn.value.style.display = 'none'
}else{
createSetTimeSubmit()
}
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
const canvasAsJson = JSON.stringify(canvas.toJSON());
normalCanvasState.value.push(canvasAsJson);
}
@@ -364,7 +363,6 @@ export default defineComponent({
width: Math.round(exportWH * ratio[0]),
height: Math.round(exportWH * ratio[1]),
}
console.log(data);
segmentImage(mark,full,size).then((rv)=>{
// console.log(rv.targetFrontUrl,rv.targetBackUrl)
props.patchData.front[imgDomIndex].imageUrl = rv.targetFrontUrl
@@ -381,6 +379,8 @@ export default defineComponent({
return {
presentState,
loadingShow,
imgData,
pencilbtnStyle,
t,
...toRefs(canvasBtn),
rgba,
@@ -432,6 +432,73 @@ export default defineComponent({
}
}
.editFrontBack_center_btn{
z-index: 2;
left: 50%;
// transform: translate(-50%,-135%);
// transition: all .3s;
padding: 1rem 1.5rem;
transform: translate(-50%,0);
position: relative;
width: 100%;
flex-direction: row;
input{
// width: 100%;
flex: 1;
}
.icon-xiala{
position: absolute;
width: 2rem;
bottom: 0;
transform: translate(-50%, 90%);
left: 50%;
width: 6rem;
background: #fff;
text-align: center;
cursor: pointer;
&.icon-xiala::before{
transition: all .3s;
}
&.btnRotate::before{
transform: rotate(180deg);
display: block;
}
}
.editFrontBack_center_btn_colorRed,.editFrontBack_center_btn_colorGreen{
width: 4rem;
height: 2rem;
border-radius: 4px;
margin: 0 .5rem;
cursor: pointer;
padding: .5rem 1;
&.active{
border: 2px solid;
border-radius: .4rem;
}
}
.editFrontBack_center_btn_colorRed{
background: rgba(255,0,0);
}
.editFrontBack_center_btn_colorGreen{
background: rgba(0,255,0);
}
i{
font-size: 2.5rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
&.active{
border: 1px solid;
border-radius: .4rem;
}
}
&.spread{
transform: translate(-50%,0);
}
}
.exportCanvasBox_center{
height: 100%;
flex: 1;
@@ -440,75 +507,37 @@ export default defineComponent({
overflow: hidden;
background: #e6e6e6;
// overflow: scroll;
.editFrontBack_center_btn{
z-index: 2;
left: 50%;
transform: translate(-50%,-135%);
transition: all .3s;
padding: 1rem 1.5rem;
// position: relative;
input{
width: 100%;
margin-top: 1rem;
}
.icon-xiala{
position: absolute;
width: 2rem;
bottom: 0;
transform: translate(-50%, 90%);
left: 50%;
width: 6rem;
background: #fff;
text-align: center;
cursor: pointer;
&.icon-xiala::before{
transition: all .3s;
}
&.btnRotate::before{
transform: rotate(180deg);
display: block;
}
}
.editFrontBack_center_btn_colorRed,.editFrontBack_center_btn_colorGreen{
width: 4rem;
height: 2rem;
border-radius: 4px;
margin: 0 .5rem;
cursor: pointer;
padding: .5rem 1;
&.active{
border: 2px solid;
border-radius: .4rem;
}
}
.editFrontBack_center_btn_colorRed{
background: rgba(255,0,0);
}
.editFrontBack_center_btn_colorGreen{
background: rgba(0,255,0);
}
i{
font-size: 2.5rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
&.active{
border: 1px solid;
border-radius: .4rem;
}
}
&.spread{
transform: translate(-50%,0);
}
}
:deep(.canvas-container){
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
opacity: .5;
// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}
.editFrontBack_bgImg{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
img{
height: 100%;
width: 100%;
object-fit: contain;
}
}
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
}
.exportCanvasBox_center:hover{

8
src/component/Detail/setDesignItem.vue
View File

@@ -28,10 +28,10 @@
</div>
<div class="designOpenrtion_btn">
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('top',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('left',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('right',getMousePosition($event,true))"></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> -->
</ul>
</div>

8
src/component/Detail/setDesignItemMobile.vue
View File

@@ -25,10 +25,10 @@
</div>
<div class="designOpenrtion_btn">
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtion_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
<li class="designOpenrtion_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtion_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
</ul>
</div>