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>

566
src/component/HomePage/ExportModel.vue
View File

@@ -56,7 +56,7 @@
<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
<div v-if="item[0] && key == 'FinalizeImage'" class="exportCanvasBox_intro">Selected Product</div>
<div v-if="key == 'colorBoards'" class="exportCanvasBox_item_colorBor">
<div v-for="colorItem in item" class="exportCanvasBox_item_color" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
<div v-for="colorItem in item" class="exportCanvasBox_item_color" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click.stop="isMoible?setDragstart(key,colorItem):''">
<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
<div v-else>
<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
@@ -73,7 +73,7 @@
:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
draggable
@dragstart="onDragstart(key,imgItem)"
@click="isMoible?setDragstart(key,imgItem):''"
@click.stop="isMoible?setDragstart(key,imgItem):''"
>
<div class="exportCanvasBox_img">
<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
@@ -82,7 +82,84 @@
</div>
</div>
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_title">
<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Color') }}</div>
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
</label>
<label v-show="operation != 'move'">
<div >{{ $t('exportModel.Size') }}:</div>
<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
</label>
<label v-show="operation == 'pencil'">
<div >{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
style="flex: 1"
@change="brushworkChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation == 'texture'" class="texture">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@change="textureValueChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="exportCanvasBox_left_tool_item leftAlign">
<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
</div>
</label>
<label v-show="operation === 'move'">
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="exportCanvasBox_left_tool_item top">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
</div>
</label>
<!-- <label v-show="allSelectWidth > -1 && operation != 'move'">
<div >{{ $t('exportModel.Width') }}</div>
<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
</label> -->
<label v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
<div>Font Family</div>
<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
style="flex: 1"
@change="setFontFamily"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</label>
<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Height') }}</div>
<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
</label> -->
</div>
<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
{{ $t('exportModel.More') }}
</div>
-->
</div>
<!-- <div @click="toSvg">12312312312</div> -->
<div class="exportCanvasBox_center_box exportCanvasBox_left">
<div class="exportCanvasBox_left_tool exportCanvasBox_title">
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
@@ -90,11 +167,9 @@
<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:operation == 'texture'}"></i>
<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
<i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''" @click.stop="setCloseNav('tool')"></i>
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''" @click.stop="setCloseNav('tool')"></i> -->
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
@@ -105,100 +180,29 @@
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
</div>
</div>
</div>
<div class="exportCanvasBox_left_tool exportCanvasBox_operation" :class="{'closeNav' :closeNav.move}">
<div class="exportCanvasBox_operation_bor">
<div class="exportCanvasBox_operation_bor_btn">
<i class="icon iconfont icon-xiala" :class="closeNav.move?'icon-rotate':''" @click.stop="setCloseNav('move')"></i>
<!-- <div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
<label class="uploadImage">
<i class="icon iconfont icon-shangchuantupian" ></i>
<input type="file" @change="uploadImage">
</label>
<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
</div>
<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Color') }}</div>
<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
</label>
<label v-show="operation != 'move'">
<div >{{ $t('exportModel.Size') }}:</div>
<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
</label>
<label v-show="operation == 'pencil'">
<div >{{ $t('exportModel.Brushwork') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
style="flex: 1"
@change="brushworkChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation == 'texture'" class="texture">
<div >{{ $t('exportModel.Texture') }}:</div>
<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
style="flex: 1"
@change="textureValueChange"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
<img :src="item.url" alt="">
</a-select-option>
</a-select>
</label>
<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
<div >{{ $t('exportModel.FillBack') }}:</div>
<div class="exportCanvasBox_left_tool_item leftAlign">
<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
</div>
</label>
<label v-show="operation === 'move'">
<div >{{ $t('exportModel.Layer') }}:</div>
<div class="exportCanvasBox_left_tool_item">
<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
</div>
</label>
<label v-show="allSelectWidth > -1 && operation != 'move'">
<div >{{ $t('exportModel.Width') }}</div>
<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
</label>
<label v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
<div>Font Family</div>
<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
style="flex: 1"
@change="setFontFamily"
>
<!-- v-model:value="brushwork" -->
<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
{{item.name}}
</a-select-option>
</a-select>
</label>
<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
<div >{{ $t('exportModel.Height') }}</div>
<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
</label> -->
</div>
</div>
</div> -->
</div>
<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
{{ $t('exportModel.More') }}
<div class="exportCanvasBox_center">
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="pencilbtnStyle"></div>
</div>
-->
</div>
<!-- <div @click="toSvg">12312312312</div> -->
<div class="exportCanvasBox_center" :style="[isMoible?'overflow: hidden;':'']">
</div>
<div v-if="isMoible" class="exportCanvasBox_scroll">
<!-- <div v-if="isMoible" class="exportCanvasBox_scroll">
<div></div>
</div>
</div> -->
<div class="exportCanvasBox_bottom">
<div class="exportCanvasBox_left_btn Guide_1_38">
@@ -325,7 +329,14 @@ export default defineComponent({
width: 400,
height: 100,
});
let pencilbtnStyle = ref({
background:'',
width:0+'px',
height:0+'px',
display:'none',
left:0+'px',
top:0+'px',
})
let publish = ref()
// canvasWH.value.width = [window.innerWidth/2.4]
// canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
@@ -372,12 +383,16 @@ export default defineComponent({
nextTick().then(async () => {
let exportCanvasBoxCanvas = document.querySelector('.Export .exportCanvasBox_center')
canvasWH.value.width = exportCanvasBoxCanvas.offsetWidth - 10
let canvasBox = document.querySelector(
".Export .exportCanvasBox_center"
);
canvasBox.innerHTML = ""; // 清空原有内容
var canvasDom = document.createElement("canvas");
let canvasBox = document.querySelector(".Export .exportCanvasBox_center");
let oldCanvasDom = canvasBox.querySelector('.canvas-container')
let oldCanvasDom1 = canvasBox.querySelector('canvas')
var canvasDom = document.createElement("canvas");
document.addEventListener("keydown", setCanvasKeyDown);
document.addEventListener("keyup", clearCanvasKeyDown);
if(oldCanvasDom)oldCanvasDom.remove()
if(oldCanvasDom)loadingShow.value = false
if(oldCanvasDom1)oldCanvasDom1.remove()
canvasBox.appendChild(canvasDom);
canvas = new fabric.Canvas(canvasDom, {
backgroundColor: "rgba(255, 255, 255)",
@@ -385,7 +400,6 @@ export default defineComponent({
height: canvasWH.value.height,
isDrawingMode: false, // 开启绘图模式
});
brushIndicator = createBrushIndicator()
canvasOnDrop()//开启鼠标到画布事件
if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
JSSetRemoveImage(deleteObject)
@@ -400,11 +414,11 @@ export default defineComponent({
//鼠标移动
// canvas.wrapperEl.onmouseover = setCanvasKeyDown;//document上添加按下和抬起事件
// canvas.wrapperEl.onmouseout = clearCanvasKeyDown;//document上添加按下和抬起事件
canvas.on("mouse:over", event =>setCanvasKeyDown(event));//document上添加按下和抬起事件
canvas.on("mouse:out", clearCanvasKeyDown);//document上添加按下和抬起事件
// canvas.on("mouse:over", event =>setCanvasKeyDown(event));//document上添加按下和抬起事件
// canvas.on("mouse:out", clearCanvasKeyDown);//document上添加按下和抬起事件
canvas.on("mouse:move", event =>setCanvasMove(event));
canvas.on("mouse:out", event=>setCanvasOut(event));
canvas.on("mouse:down", event=>setCanvasDown(event));
canvas.on("mouse:up", event=>setCanvasUp(event));
@@ -424,6 +438,7 @@ export default defineComponent({
// });
initAligningGuidelines(canvas,true)
JSchangeType(canvas,'init')
pencilbtnStyle.value.background = '#fff'
fabric.Object.prototype.cornerSize = 10
fabric.Object.prototype.transparentCorners = false
// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
@@ -1093,7 +1108,6 @@ export default defineComponent({
if(str == 'loadingCompleted'){
// reverseCanvasState.value.push(canvasAsJson);
}
if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
normalCanvasState.value.push(canvasAsJson);
if (isLoadCanvas) {
reverseCanvasState.value = []
@@ -1207,22 +1221,29 @@ export default defineComponent({
canvas.remove(polyLineBtn)
if(str == 'pencil'){
setPencil()
pencilbtnStyle.value.display = `block`
}else if(str == 'move'){
JSchangeType(canvas,'init')
initAligningGuidelines(canvas,true)
setMove()
pencilbtnStyle.value.display = `none`
}else if(str == 'texture'){
setTexture()
pencilbtnStyle.value.display = `block`
}else if(str == 'eraser'){
setEraser()
pencilbtnStyle.value.display = `block`
}else if(str == 'text'){
setMove()
setText()
JSchangeType(canvas,'init')
pencilbtnStyle.value.display = `none`
}else if(str){
pencilbtnStyle.value.display = `none`
canvas.forEachObject((obj) =>obj.selectable = false);
canvas.isDrawingMode = false
}
setPencilWidth()
}
let _setAllSelectTime = null
let setAllSelectWidth = ()=>{
@@ -1336,20 +1357,6 @@ export default defineComponent({
}
}
let createBrushIndicator = ()=>{
let cator = new fabric.Circle({
radius:(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)/2,
fill: '#fff',
stroke: '#000',
strokeWidth: 1,
originX: 'center',
originY: 'center',
visible :true,
erasable: false,
});
return cator
}
let brushIndicator
let hexToRgba=(hex, alpha)=> {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
@@ -1412,7 +1419,7 @@ export default defineComponent({
canvas.freeDrawingBrush = pencil
canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
canvas.freeDrawingBrush.width = 1;
}
@@ -1424,7 +1431,7 @@ export default defineComponent({
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
}
brushIndicator.set('fill',canvasPencilColor.value)
pencilbtnStyle.value.background = canvasPencilColor.value
canvas.freeDrawingBrush.isEraser = false
}
@@ -1437,7 +1444,7 @@ export default defineComponent({
canvas.isDrawingMode = true
let eraser = new fabric.EraserBrush(canvas)
canvas.freeDrawingBrush = eraser
brushIndicator.set({fill: '#fff'});
pencilbtnStyle.value.background = '#fff'
canvas.requestRenderAll();
canvas.freeDrawingBrush.isEraser = true
canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
@@ -1516,7 +1523,7 @@ export default defineComponent({
if(canvas.freeDrawingBrush.isEraser){
}else{
brushIndicator.set({fill: canvasPencilColor.value});
pencilbtnStyle.value.background = canvasPencilColor.value
}
if(brushworkValue.value == 'Marking'){
canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
@@ -1538,6 +1545,8 @@ export default defineComponent({
}else{
canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value];
}
pencilbtnStyle.value.height = canvasPencilWidth.value[operation.value]+'px'
pencilbtnStyle.value.width = canvasPencilWidth.value[operation.value]+'px'
// setPencil()
},300)
}
@@ -1560,26 +1569,23 @@ export default defineComponent({
var pointer = canvas.getPointer(event.e);
if(canvas.isDrawingMode){
canvas.setCursor('none');
if(!canvas.contains(brushIndicator)){
canvas.add(brushIndicator)
canvas.bringToFront(brushIndicator);//设置优先级最高
}
// brushIndicator.fill = canvasPencilColor.value
brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)/2 });
}else{
if(createPatterningIs){
JScanvasMouseMove(operation.value,event,currentPatterning,downPoint,keyDown)
}
}
                if(createPatterningIs){
                    JScanvasMouseMove(operation.value,event,currentPatterning,downPoint,keyDown)
                }
            }
let canvasBox = document.querySelector(".Export .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 + canvasBox.parentElement.scrollTop + pointer.y+'px'
canvas.requestRenderAll()
}
let setCanvasOut = (event)=>{
canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
}
//设置再画布上按下
let setCanvasDown = (event)=>{
// brushIndicator.set({fill: '#FFF',strokeWidth:0});
//设置移动端按下添加元素
if(isMoible && present.upScaleChecked){
@@ -1663,7 +1669,7 @@ export default defineComponent({
upPoint = event.absolutePointer
if(canvas.isDrawingMode){
setTimeout(() => {
canvas.remove(brushIndicator)
// pencilbtnStyle.value.display = `none`
updateCanvasState()
}, 100);
}else{
@@ -1953,6 +1959,7 @@ export default defineComponent({
toSvg,
showUpgradePlan,//当前弹窗是否打开
canvasWH,//画布初始宽高
pencilbtnStyle,//笔触按钮
publish,//发布作品广场
credits,//积分 用来判断HD导出积分是否够用
init,//首页点击导出后初始化
@@ -2030,54 +2037,55 @@ export default defineComponent({
}
},
watch: {
'canvasWH.height':{
handler(newVal,oldVal){
if(!this.isMoible){
return
}
let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
canvasBox.scroll({
top: 0, // 纵向滚动距离
left: 0, // 横向滚动距离
});
scrollBox.style.marginTop = 0+'px'
let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
scrollBox.style.height = height +'px'
let scale = (newVal - canvasBox.offsetHeight) / (canvasBox.offsetHeight - height)
// 'canvasWH.height':{
// handler(newVal,oldVal){
// if(!this.isMoible){
// return
// }
// return
// let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
// let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
// canvasBox.scroll({
// top: 0, // 纵向滚动距离
// left: 0, // 横向滚动距离
// });
// scrollBox.style.marginTop = 0+'px'
// let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
// scrollBox.style.height = height +'px'
// let scale = (newVal - canvasBox.offsetHeight) / (canvasBox.offsetHeight - height)
let mousedown = (event)=>{//按下
let position = {
y:event.touches[0].screenY,
top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
}
// let top =
let scrollMousemove = (e)=>{
let height = scrollBox.style.height.split('px')[0]*1
let offsetTop = position.top+e.touches[0].screenY - position.y
offsetTop = offsetTop <= 0? 0 : offsetTop
offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
scrollBox.style.marginTop = offsetTop+'px'
canvasBox.scroll({
top: offsetTop*scale, // 纵向滚动距离
left: 0, // 横向滚动距离
});
}
let mouseup = ()=>{//抬起
window.removeEventListener('touchmove',scrollMousemove)
scrollBox.removeEventListener('touchend',mouseup)
}
window.addEventListener('touchmove',scrollMousemove)
scrollBox.addEventListener('touchend',mouseup)
}
scrollBox.removeEventListener('touchstart',mousedown)
scrollBox.addEventListener('touchstart',mousedown)
// let mousedown = (event)=>{//按下
// let position = {
// y:event.touches[0].screenY,
// top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
// }
// // let top =
// let scrollMousemove = (e)=>{
// let height = scrollBox.style.height.split('px')[0]*1
// let offsetTop = position.top+e.touches[0].screenY - position.y
// offsetTop = offsetTop <= 0? 0 : offsetTop
// offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
// scrollBox.style.marginTop = offsetTop+'px'
// canvasBox.scroll({
// top: offsetTop*scale, // 纵向滚动距离
// left: 0, // 横向滚动距离
// });
// }
// let mouseup = ()=>{//抬起
// window.removeEventListener('touchmove',scrollMousemove)
// scrollBox.removeEventListener('touchend',mouseup)
// }
// window.addEventListener('touchmove',scrollMousemove)
// scrollBox.addEventListener('touchend',mouseup)
// }
// scrollBox.removeEventListener('touchstart',mousedown)
// scrollBox.addEventListener('touchstart',mousedown)
}
},
// }
// },
},
mounted() {},
@@ -2108,7 +2116,7 @@ export default defineComponent({
.exportCanvasBox_title {
margin-bottom: .5rem;
font-size: 1.8rem;
font-weight: 600;
// font-weight: 600;
// margin-top: 2rem;
padding-top: 2rem;
display: flex;
@@ -2119,6 +2127,7 @@ export default defineComponent({
background: #f9fafb;
z-index: 2;
align-items: flex-start;
margin: 0 2rem;
}
.exportCanvasBox_intro{
@@ -2131,12 +2140,17 @@ export default defineComponent({
.exportCanvasBox_left {
width: 100%;
height: auto;
.exportCanvasBox_left_tool{
margin: 0;
}
label {
display: flex;
align-items: center;
width: 30%;
width: 23%;
div {
width: 8rem;
width: auto;
margin-right: 2rem;
white-space: nowrap;
}
input,select {
// width: 10em;
@@ -2176,12 +2190,18 @@ export default defineComponent({
flex-wrap: wrap;
align-items: flex-start;
position: relative;
flex-direction: row;
>label{
width: 20%;
}
.exportCanvasBox_title {
margin: 0 4rem;
// margin: 0 4rem;
position: relative;
.exportCanvasBox_left_tool_item{
display: flex;
flex-direction: column;
}
}
.exportCanvasBox_left_item{
overflow: hidden;
@@ -2199,61 +2219,7 @@ export default defineComponent({
top: 7rem;
position: absolute;
}
.exportCanvasBox_operation{
left: auto;
right: 0;
z-index: 2;
position: absolute;
top: 7rem;
max-height: 30rem;
height: auto;
border: none;
background: none;
.exportCanvasBox_operation_bor_btn{
// transform: translateX(-100%);
// position: absolute;
border: 1px solid;
cursor: pointer;
width: 4rem;
height: 4rem;
background: #fff;
i{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(90deg);
&.icon-rotate{
transform: rotate(270deg);
}
}
}
.exportCanvasBox_operation_bor{
overflow: hidden;
position: initial;
transform: translateX(calc(100% - 4rem));
display: block;
transition: all .3s;
border: none;
display: flex;
align-items: flex-start;
background: rgba(0, 0, 0, 0);
.exportCanvasBox_operation_bor_item{
background: #fff;
border: 1px solid;
width: 28rem;
}
label{
width: 100%;
}
}
&.closeNav{
.exportCanvasBox_operation_bor{
transform: translateX(0%);
}
}
}
.exportCanvasBox_imgbor {
// height: auto;
width: 20rem;
@@ -2321,46 +2287,54 @@ export default defineComponent({
}
}
}
.exportCanvasBox_left_tool{
.exportCanvasBox_left_tool_item_column{
flex-direction: column;
padding: 1rem;
.exportCanvasBox_operation_bor_item{
flex: 1;
margin-left: 8rem;
display: flex;
label{
margin-right: 2rem;
}
}
.exportCanvasBox_left_tool_item{
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
&.leftAlign{
justify-content: flex-start;
}
&.leftAlign{
justify-content: flex-start;
}
.exportCanvasBox_left_tool_item{
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
&.leftAlign{
justify-content: flex-start;
}
i{
font-size: 2.5rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&.active{
border: 1px solid;
border-radius: .4rem;
}
i{
font-size: 2.5rem;
cursor: pointer;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
&.active{
border: 1px solid;
border-radius: .4rem;
}
.uploadImage{
width: 4rem;
height: 4rem;
input{
height: 0;
border: none;
}
}
}
.uploadImage{
width: 4rem;
height: 4rem;
input{
height: 0;
width: 0;
border: none;
}
}
}
}
.exportCanvasBox_bottom{
@@ -2393,10 +2367,44 @@ export default defineComponent({
}
}
}
.exportCanvasBox_center_box{
display: flex;
overflow: hidden;
}
.exportCanvasBox_center {
flex: 1;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
position: relative;
.editFrontBack_pencilbtn{
position: absolute;
z-index: 1;
border-radius: 50%;
border: 1px solid #000;
pointer-events: none;
transform: translate(-50%,-50%);
}
&.exportCanvasBox_center::-webkit-scrollbar-button:single-button{
}
&.exportCanvasBox_center::-webkit-scrollbar {
/* 竖轴的宽度 */
width: 2rem;
/* 横轴的高度 */
height: 1rem;
transition: all .3s;
}
/* 进度 */
&.exportCanvasBox_center::-webkit-scrollbar-thumb {
border-radius: 1rem;
background: #543087;
}
/* 轨道 */
&.exportCanvasBox_center::-webkit-scrollbar-track {
border-radius: 1rem;
background: rgba(84, 48, 135,.2);
// background: rgba(238, 238, 244, 0);
}
}
.exportCanvasBox_scroll{
height: 100%;

150
src/component/HomePage/MoodboardUpload.vue
View File

@@ -406,6 +406,12 @@ export default defineComponent({
this.store.state.UploadFilesModule.allBoardData
.disposeMoodboard
)
);
let moodboardPosition = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.moodboardPosition
)
);
let setboard = {
generate:[] as any,
@@ -425,6 +431,7 @@ export default defineComponent({
this.store.commit("setMoodboardMaterialFiles", setboard.material);
this.store.commit("setMoodboardFile", setboard.moodboard);
this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
this.fileList = setboard.moodboard
},
@@ -449,81 +456,84 @@ export default defineComponent({
},
async layout(){
if(this.loadingShow)return
this.loadingShow = true
this.store.commit("setDisposeMoodboard", []);
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
let moodb = this.moodb_[arr.length-1][random]
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
this.flex_direction = true
}else{
this.flex_direction = false
}
if(this.moodb_[arr.length-1].length != 1){
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
this.loadingShow = false
this.layout()
return
await new Promise((resolve, reject) => {
this.loadingShow = true
this.store.commit("setDisposeMoodboard", []);
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
this.layoutList = arr
var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
let moodb = this.moodb_[arr.length-1][random]
if( moodb.filter((item,index)=> item == 'w2h1').length != 0 && arr.length > 4){
this.flex_direction = true
}else{
this.flex_direction = false
}
}
this.edieShow = true
if(this.moodb_[arr.length-1].length == 2){
this.moodb_className = this.moodb_[arr.length-1][0]
}else{
this.moodb_className = this.moodb_[arr.length-1][random]
}
this.layoutOpen = true
//提交模板
// this.loadingShow = true
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
nextTick().then(()=>{
let layoutCentent = document.getElementById('modal_img')
domTurnImg(layoutCentent).then((rv)=>{
let file = rv
let param = new FormData();
param.append('inPin','0')
param.append('level1Type','Moodboard')
param.append('gender','')
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
let img:any = rv
img.imgUrl = rv.url
img.resData = JSON.parse(JSON.stringify(img))
this.store.commit("setDisposeMoodboard", img);
let obj = {
imgStyle:[],
domStyle:[],
borStyle:[],
rototeStyle:[],
translateStyle:[],
angleTRStyle:[],
angleTLStyle:[],
angleBRStyle:[],
angleBLStyle:[],
class:this.moodb_className,
}
console.log(123123213);
this.store.commit("setDisposeMoodboardPosition", obj);
this.loadingShow = false
}
).catch(rv=>{
if(this.moodb_[arr.length-1].length != 1){
if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
this.loadingShow = false
})
if(this.driver__.driver){
driverObj__.moveNext()
this.layout()
return resolve('')
}
}
this.edieShow = true
if(this.moodb_[arr.length-1].length == 2){
this.moodb_className = this.moodb_[arr.length-1][0]
}else{
this.moodb_className = this.moodb_[arr.length-1][random]
}
this.layoutOpen = true
//提交模板
// this.loadingShow = true
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
})
nextTick().then(()=>{
let layoutCentent = document.getElementById('modal_img')
let obj = {
imgStyle:[],
domStyle:[],
borStyle:[],
rototeStyle:[],
translateStyle:[],
angleTRStyle:[],
angleTLStyle:[],
angleBRStyle:[],
angleBLStyle:[],
class:this.moodb_className,
}
this.store.commit("setDisposeMoodboardPosition", obj);
let moodboardPosition = this.store.state.UploadFilesModule.moodboardPosition
domTurnImg(layoutCentent).then((rv)=>{
let file = rv
let param = new FormData();
param.append('inPin','0')
param.append('level1Type','Moodboard')
param.append('gender','')
param.append('moodboardPosition',JSON.stringify(moodboardPosition))
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
.then((rv: any) => {
let img:any = rv
img.imgUrl = rv.url
img.resData = JSON.parse(JSON.stringify(img))
this.store.commit("setDisposeMoodboard", img);
this.loadingShow = false
resolve('')
}
).catch(rv=>{
this.loadingShow = false
})
if(this.driver__.driver){
driverObj__.moveNext()
}
})
})
})
},
setmoodbClass(val:any){
this.moodb_className = val

14
src/component/HomePage/layout.vue
View File

@@ -24,7 +24,7 @@
</div>
</div>
<div class="layout_nav">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)" @touchstart.stop="setpitch(item,index)">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)" @touchstart.passive="setpitch(item,index)">
<img :src="item.imgUrl">
</div>
</div>
@@ -143,8 +143,8 @@ export default defineComponent({
let layoutList:any = ref([])
const content:any = ref<HTMLElement | null>(null);
let loadingShow = ref(false)
let styleObj = computed(()=>{
return store.state.UploadFilesModule.disposeMoodboardPostition
let styleObj:any = computed(()=>{
return store.state.UploadFilesModule.moodboardPosition
})
let moodItemScale = ref(0)
let domObj = {
@@ -719,7 +719,7 @@ export default defineComponent({
})
this.layoutList = parentList
this.moodbList = this.moodb[parentList.length-1]
this.moodbClassName = this.styleObj.class?this.styleObj.class:[]
this.moodbClassName = this.styleObj?.class?this.styleObj?.class:[]
this.moodItemScale = this.layoutList[0].zoom*100
this.initDomStyle()
@@ -828,17 +828,21 @@ export default defineComponent({
//提交模板
submitTemplate() {
this.loadingShow = true
this.setIndex(this.styleObj.domStyle)//index统一排序设置值
this.store.commit("setDisposeMoodboardPosition", this.styleObj);
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
nextTick().then(async ()=>{
let layoutCentent = document.getElementById('layoutCentent')
let moodboardPosition = this.store.state.UploadFilesModule.moodboardPosition
domTurnImg(layoutCentent).then((rv)=>{
let file =rv
let param = new FormData();
param.append('inPin','0')
param.append('gender','')
param.append('level1Type','Moodboard')
param.append('moodboardPosition',moodboardPosition)
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
param.append('file',file);
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
@@ -851,8 +855,6 @@ export default defineComponent({
this.store.commit("setDisposeMoodboard", rv);
this.setDomStyle()
this.setIndex(this.styleObj.domStyle)//index统一排序设置值
this.store.commit("setDisposeMoodboardPosition", this.styleObj);
}
).catch(rv=>{

4
src/component/HomePage/layoutMobile.vue
View File

@@ -24,7 +24,7 @@
</div>
</div>
<div class="layoutMobile_nav">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @touchstart.stop="setpitch(item,index)">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @touchstart.passive="setpitch(item,index)">
<img :src="item.imgUrl">
</div>
</div>
@@ -141,7 +141,7 @@ export default defineComponent({
const content:any = ref<HTMLElement | null>(null);
let loadingShow = ref(false)
let styleObj = computed(()=>{
return store.state.UploadFilesModule.disposeMoodboardPostition
return store.state.UploadFilesModule.moodboardPosition
})
let moodItemScale = ref(0)
let domObj = {

57
src/component/LibraryPage/ModelPlacement.vue
View File

@@ -62,12 +62,16 @@
</a-select> -->
<div>{{ sex.label }}</div>
</div>
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" @touchmove="touchmove($event)">
<div class="ponit_title">{{point.title}}</div>
<div class="point_list">
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)" @touchstart="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
</div>
</div>
<div class="placement_point_item placement_point_scale">
<div class="cur_picture_opterate_item" @click="changeScale(-1)"><span class="operate_icon icon_font">-</span></div>
<div class="cur_picture_opterate_item" @click="changeScale(1)"><span class="operate_icon icon_font">+</span></div>
</div>
<div class="placement_point_item placement_point_item_btn">
<span class="started_btn" @click="setPoint">{{ $t('ModelPlacement.Point') }}</span>
</div>
@@ -89,7 +93,7 @@
<div class="img_content_block" ref="imgbox">
<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @touchstart="getMouseDown(getMousePosition($event),item,index)" @mousemove="mouseMove($event)" @touchmove="touchmove($event)">
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
</div>
@@ -142,6 +146,7 @@ import { VueCropper } from "vue-cropper";
import { useStore } from "vuex";
import { Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { getMousePosition } from "@/tool/mdEvent";
import { useI18n } from 'vue-i18n';
export default defineComponent({
components:{
@@ -184,7 +189,8 @@ export default defineComponent({
sexList,
cropperTime,
t
t,
getMousePosition
}
},
data(){
@@ -271,7 +277,8 @@ export default defineComponent({
}
// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
imgBoxSize.addEventListener('mousemove',this.startMove)
imgBoxSize.addEventListener('mousemove',this.mouseMove)
imgBoxSize.addEventListener('touchmove',this.touchmove)
this.setImageSize()
})
},800)
@@ -429,7 +436,14 @@ export default defineComponent({
changeRemoveStatus(){
this.isRemoveStatus = true
},
mouseMove(event:any){
let e = getMousePosition(event,false)
this.startMove(e)
},
touchmove(event:any){
let e = getMousePosition(event,true)
this.startMove(e)
},
startMove(event:any){
if(this.isRemoveStatus){
return
@@ -452,6 +466,7 @@ export default defineComponent({
this.currentSign.left = event.clientX - this.imgBox.left - this.imgBox.x - this.moveOriginal.posX -12
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12
document.addEventListener('mouseup', this.getMouseOver);
document.addEventListener('touchend', this.getMouseOver);
this.$forceUpdate()
this.setBoundarySign()
@@ -513,6 +528,9 @@ export default defineComponent({
this.startDian = false
this.currentSign = {}
document.removeEventListener('mouseup', this.getMouseOver);
document.removeEventListener('touchend', this.getMouseOver);
document.removeEventListener('mousemove',this.mouseMove)
document.removeEventListener('touchmove',this.touchmove)
},
closeModal(){
@@ -601,7 +619,11 @@ export default defineComponent({
}
},
changeScale(num:any) {
num = num || 1;
let cropper:any = this.$refs.cropper
cropper.changeScale(num);
},
async confrimSubmit(){
let param = {
libraryId:this.printObject.id,
@@ -945,6 +967,25 @@ export default defineComponent({
}
}
.placement_point_scale{
justify-content: center;
border: 1px solid #9a9a9a;
border-radius: 1rem;
width: 40%;
margin: 0 auto;
margin-bottom: 3rem;
div:nth-child(1){
border-right: 1px solid #9a9a9a;
}
div{
font-size: 2rem;
cursor: pointer;
width: 3rem;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.placement_content_operate_list{
@@ -1069,7 +1110,7 @@ export default defineComponent({
.vue-cropper{
.cropper-crop-box{
background: #fff;
pointer-events: none;
}
}
}

12
src/store/uploadFile/uploadFile.ts
View File

@@ -6,7 +6,7 @@ import GO from '@/tool/GO';
interface UploadFiles{
moodboard:any,
disposeMoodboard:any,
disposeMoodboardPostition:any,
moodboardPosition:any,
moodboardFiles:any,
moodboardGenerateFiles:any,
moodboardMaterialFiles:any,
@@ -30,7 +30,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
state:{
moodboard:[],
disposeMoodboard:[],
disposeMoodboardPostition:{},
moodboardPosition:{},
moodboardFiles:[],
moodboardGenerateFiles:[],
moodboardMaterialFiles:[],
@@ -60,7 +60,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
state.disposeMoodboard = [files]
},
setDisposeMoodboardPosition(state,files){
state.disposeMoodboardPostition = files
state.moodboardPosition = files
},
setMoodboardGenerateFiles(state,files){
state.moodboardGenerateFiles = files
@@ -203,7 +203,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
setAllBoardData(state){
state.allBoardData = {
disposeMoodboard:state.disposeMoodboard,
disposeMoodboardPostition:state.disposeMoodboardPostition,
moodboardPosition:state.moodboardPosition,
moodboardFiles:state.moodboard,
printboardFiles:state.printboard,
colorBoards:state.colorBoards,
@@ -235,7 +235,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
state.marketingSketchFiles = []
state.moodTemplateId = ''
state.disposeMoodboard = []
state.disposeMoodboardPostition = {}
state.moodboardPosition = {}
// state.showSketchboard = []
state.chooseIsDesign.value = true
},
@@ -255,7 +255,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
},
clearMoodTemplateId(state){
state.disposeMoodboard = []
state.disposeMoodboardPostition = {}
state.moodboardPosition = {}
},
},
actions:{

2
src/tool/mdEvent.js
View File

@@ -7,6 +7,7 @@ const getMousePosition = (e,bor,dom) => {
offsetY: touch.clientY - e.target.getBoundingClientRect().top,
clientX:touch.clientX,
clientY:touch.clientY,
target:e.target,
}
if(dom){
event.offsetX = touch.clientX - dom.getBoundingClientRect().left
@@ -18,6 +19,7 @@ const getMousePosition = (e,bor,dom) => {
offsetY:e.offsetY,
clientX:e.clientX,
clientY:e.clientY,
target:e.target,
}
}
return event

2
src/tool/util.js
View File

@@ -451,8 +451,6 @@ function segmentImage(markerImage,fullImage,size){
marker.onload = () => {
ctx1.drawImage(marker,0,0 ,size.width, size.height);
full.onload = () => {
console.log(full.height,size,full.width);
ctx2.drawImage(full,0,0, size.width, size.height);
segmentImageItem();
};

2
src/views/HomeMain.vue
View File

@@ -375,7 +375,6 @@ export default defineComponent({
}
},
mounted() {
console.log(this.store);
let isTest = getCookie('isTest')//获取是否是试用用户
this.isTest =JSON.parse(isTest)
let isMurmur = getCookie('isMurmur')//获取是否是试用用户
@@ -719,7 +718,6 @@ export default defineComponent({
overflow: hidden;
z-index: 2;
left: 0;
background-color: #000;
border-radius: 50%;
cursor: pointer;
img{

2
src/views/HomeView/HomeView.vue
View File

@@ -998,6 +998,7 @@ export default defineComponent({
name:data.collection.moodTemplateName,
}
}]:[],
moodboardPosition:data.collection.moodboardPosition?data.collection.moodboardPosition:{},
moodboardFiles: this.dealViewChooseData(
data.collection.moodBoards,"Moodboard"
),
@@ -1016,7 +1017,6 @@ export default defineComponent({
),
};
// console.log(data);
this.store.commit("setAllBoardDataChoose", collectionData);
// this.store.commit('clearShowSketchboard')
this.store.commit("setShowSketchboard", data.collection.sketchBoards);

3
src/views/HomeView/library.vue
View File

@@ -1099,7 +1099,8 @@ export default defineComponent({
//给模特打点编辑
placementClick(data:any){
let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
// let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
let placementModal:any = this.$refs.ModelPlacement
placementModal.showPlacementModal(data,this.sex)
},
setTextareaShow(){