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

fix

Browse Source
This commit is contained in:
X1627315083
2024-09-06 13:48:16 +08:00
parent 4301c4051a
commit 4e2d3d672c
7 changed files with 388 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -152,8 +152,8 @@
<div class="design_detail_perview_content" > <div class="design_detail_perview_content" >
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> --> <!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
<setDesignItem v-if="!moible" ref="setDesignItem" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem> <setDesignItem ref="setDesignItem" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
<setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile> <!-- <setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile> -->
</div> </div>
</div> </div>
@@ -179,7 +179,6 @@ import { Modal,message } from 'ant-design-vue';
import {getUploadUrl,isMoible,setGradual} from '@/tool/util' import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
import { useStore } from "vuex"; import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide"; import { openGuide,driverObj__ } from "@/tool/guide";
import GO from '@/tool/GO';
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie"; import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import addDetails from '@/component/Detail/addDetails.vue' import addDetails from '@/component/Detail/addDetails.vue'
@@ -463,7 +462,8 @@ export default defineComponent({
DesignDetailAlter.terminate() DesignDetailAlter.terminate()
// this.designItemDetail = {} // this.designItemDetail = {}
this.frontBack = {} this.frontBack = {}
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem let setDesignItem:any = this.$refs.setDesignItem
// let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
setDesignItem.clear() setDesignItem.clear()
} }
@@ -471,7 +471,7 @@ export default defineComponent({
}else{ }else{
this.designShowPrview = 1; this.designShowPrview = 1;
this.frontBack = {} this.frontBack = {}
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem let setDesignItem:any = this.$refs.setDesignItem
setDesignItem.clear() setDesignItem.clear()
// this.designItemDetailUrl = {} // this.designItemDetailUrl = {}
} }
@@ -794,7 +794,7 @@ export default defineComponent({
return data return data
}, },
async setSubmit(str:any){ async setSubmit(str:any){
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem let setDesignItem:any = this.$refs.setDesignItem
let data = this.setSubmitItem(str,true) let data = this.setSubmitItem(str,true)
this.loadingShow = true this.loadingShow = true
await setDesignItem.setPreview(data) await setDesignItem.setPreview(data)
@@ -895,7 +895,7 @@ export default defineComponent({
showDesignImgDetail(num:any){ showDesignImgDetail(num:any){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail)) let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.designShowPrview = num this.designShowPrview = num
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem let setDesignItem:any = this.$refs.setDesignItem
if(this.designShowPrview == 3){ if(this.designShowPrview == 3){
setDesignItem.setImgSize() setDesignItem.setImgSize()
}else if(this.designShowPrview == 2){ }else if(this.designShowPrview == 2){

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

@@ -19,19 +19,19 @@
@click="setpitch(item,index)" ref="content" > @click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false"> <img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
</div> --> </div> -->
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="frontBack.front[index].style"> <div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt=""> <img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
</div> </div>
<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''" :key="designItemDetail.designItemUrl"> <img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''" :key="designItemDetail.designItemUrl">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="item.style"> <div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt=""> <img :src="item.imageUrl" alt="">
</div> </div>
<div class="designOpenrtion_btn"> <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,$event)"> <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',$event)"></li> <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',$event)"></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',$event)"></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',$event)"></li> <li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('right',getMousePosition($event,true))"></li>
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> --> <!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
</ul> </ul>
</div> </div>
@@ -54,7 +54,7 @@ import { useStore } from "vuex";
// import { Modal,message } from 'ant-design-vue'; // import { Modal,message } from 'ant-design-vue';
import { Https } from "@/tool/https"; import { Https } from "@/tool/https";
import editFrontBack from '@/component/Detail/editFrontBack.vue' import editFrontBack from '@/component/Detail/editFrontBack.vue'
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({ export default defineComponent({
// props: ["frontBack"], // props: ["frontBack"],
emits:['setParentLoadingShow','setDesignCoverage','setSubmit'], emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
@@ -108,6 +108,7 @@ export default defineComponent({
setRevocation, setRevocation,
frontBackOld, frontBackOld,
editFrontBack, editFrontBack,
getMousePosition,
}; };
}, },
data() { data() {
@@ -273,8 +274,12 @@ export default defineComponent({
let top = Number(this.frontBack.front[index].style.top.replace(/px/g,'')) let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
this.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left this.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
document.addEventListener("mouseup", this.mouseup); // document.addEventListener("mouseup", this.mouseup);
document.addEventListener("mousemove", this.moveMousemove); // 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){ itemSizeMousedown(direction,event){
@@ -291,15 +296,25 @@ export default defineComponent({
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
} }
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 imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect() let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
let x = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)+'px' let x = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.frontBack.front[this.imgDomIndex].centers.top)+'px' let y = ( e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
this.frontBack.front[this.imgDomIndex].style.left = x this.frontBack.front[this.imgDomIndex].style.left = x
this.frontBack.front[this.imgDomIndex].style.top = y this.frontBack.front[this.imgDomIndex].style.top = y
// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){ // if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
@@ -315,8 +330,15 @@ export default defineComponent({
// this.frontBack.front[this.imgDomIndex].style.top = 0+'px' // this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
// } // }
}, },
sizeMouseMove(event){
sizeMousemove(e) { 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 imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode =this.imgDom.parentNode let parentNode =this.imgDom.parentNode
let width = imgDomWH.width let width = imgDomWH.width
@@ -325,8 +347,8 @@ export default defineComponent({
let num = height/width let num = height/width
//判断移动四个边 //判断移动四个边
if(this.direction == 'right'){ if(this.direction == 'right'){
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left) w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)
h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num h = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
width = w+'px' width = w+'px'
// height = w*num+'px' // height = w*num+'px'
}else if(this.direction == 'top'){ }else if(this.direction == 'top'){
@@ -334,20 +356,20 @@ export default defineComponent({
this.frontBack.front[this.imgDomIndex].style.top = 'auto' this.frontBack.front[this.imgDomIndex].style.top = 'auto'
// this.printStyleList[this.imgDomIndex].style.left = 'auto' // this.printStyleList[this.imgDomIndex].style.left = 'auto'
this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px' this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y) h = (this.frontBack.front[this.imgDomIndex].centers.top - e.clientY)
height = h+'px' height = h+'px'
// width = h*num+'px' // width = h*num+'px'
}else if(this.direction == 'bottom'){ }else if(this.direction == 'bottom'){
num = width/height num = width/height
h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top) h = (e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)
height = h+'px' height = h+'px'
// width = h*num+'px' // width = h*num+'px'
}else if(this.direction == 'left'){ }else if(this.direction == 'left'){
this.frontBack.front[this.imgDomIndex].style.left = 'auto' this.frontBack.front[this.imgDomIndex].style.left = 'auto'
this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px' this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.x) w = (this.frontBack.front[this.imgDomIndex].centers.left - e.clientX)
width = w+'px' width = w+'px'
// height = w*num+'px' // height = w*num+'px'
@@ -369,13 +391,19 @@ export default defineComponent({
zIndex:this.printZIndex zIndex:this.printZIndex
} }
this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
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) { mouseup(e) {
document.removeEventListener("mouseup", this.mouseup); // document.removeEventListener("mouseup", this.mouseup);
document.removeEventListener("mousemove", this.moveMousemove); // 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)
}, },
clearModal(){ clearModal(){
this.printZIndex = 2//点击图片z-index this.printZIndex = 2//点击图片z-index

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

@@ -430,11 +430,16 @@ export default defineComponent({
async changeTemplateModal() { async changeTemplateModal() {
if(this.modalImg[0]?.id){ if(this.modalImg[0]?.id){
let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout // let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
// layout.init('moodboard') let layout:any = this.$refs.layout
if(this.layoutList.length <= 0){ if(this.layoutList.length <= 0){
await this.layout() await this.layout()
} }
if(window.screen.width<1300){
layout.isMobile = true
}else{
layout.isMobile = false
}
// let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard)) // let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
// this.layoutList = arr // this.layoutList = arr
layout.init() layout.init()
@@ -505,6 +510,8 @@ export default defineComponent({
angleBLStyle:[], angleBLStyle:[],
class:this.moodb_className, class:this.moodb_className,
} }
console.log(123123213);
this.store.commit("setDisposeMoodboardPosition", obj); this.store.commit("setDisposeMoodboardPosition", obj);
this.loadingShow = false this.loadingShow = false
} }

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

@@ -24,13 +24,13 @@
</div> </div>
</div> </div>
<div class="layout_nav"> <div class="layout_nav">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)"> <div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)" @touchstart.stop="setpitch(item,index)">
<img :src="item.imgUrl"> <img :src="item.imgUrl">
</div> </div>
</div> </div>
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent"> <div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @mousedown="setpitch(item,index)" ref="content" > <div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @mousedown="setpitch(item,index)" @touchstart="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" :class="moodbClassName[index]" v-modelImg> <img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom})`}" draggable="false" :class="moodbClassName[index]" v-modelImg>
<div> <div>
</div> </div>
@@ -39,7 +39,7 @@
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li> <li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
<li class="layout_btn_left" v-compile.stop="'left'"></li> <li class="layout_btn_left" v-compile.stop="'left'"></li>
<li class="layout_btn_right" v-compile.stop="'right'"></li> <li class="layout_btn_right" v-compile.stop="'right'"></li>
<li class="layout_rotote" v-rotote.stop></li> <li class="layout_rotote" v-rotote.stop='item'></li>
<li class="layout_translate" v-translate.stop></li> <li class="layout_translate" v-translate.stop></li>
<!-- <li class="layout_translate" v-translate.stop></li> --> <!-- <li class="layout_translate" v-translate.stop></li> -->
<li class="layout_angle_tr" v-angle.stop = "'top'"></li> <li class="layout_angle_tr" v-angle.stop = "'top'"></li>
@@ -73,6 +73,16 @@
</div> </div>
</div> </div>
</div> </div>
<div class="layout_right" v-show="isMobile">
<div class="layout_right_text">
{{ $t('DesignPrintOperation.Scale') }}
</div>
<a-slider
v-model:value="moodItemScale"
@change="setMoodItemScale"
>
</a-slider>
</div>
<!-- <div class="layout_right"> <!-- <div class="layout_right">
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)"> <div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item"> <div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
@@ -118,7 +128,7 @@ import { Https } from "@/tool/https";
import { getCookie } from "@/tool/cookie"; import { getCookie } from "@/tool/cookie";
import domTurnImg from '@/tool/domTurnImg' import domTurnImg from '@/tool/domTurnImg'
import { getUploadUrl } from "@/tool/util"; import { getUploadUrl } from "@/tool/util";
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({ export default defineComponent({
props:["moodb_className",'flex_direction'], props:["moodb_className",'flex_direction'],
components: { components: {
@@ -136,10 +146,12 @@ export default defineComponent({
let styleObj = computed(()=>{ let styleObj = computed(()=>{
return store.state.UploadFilesModule.disposeMoodboardPostition return store.state.UploadFilesModule.disposeMoodboardPostition
}) })
let moodItemScale = ref(0)
let domObj = { let domObj = {
dom:['img','ul','.layout_rotote','.layout_translate','.layout_angle_tr','.layout_angle_tl','.layout_angle_br','.layout_angle_bl'], dom:['img','ul','.layout_rotote','.layout_translate','.layout_angle_tr','.layout_angle_tl','.layout_angle_br','.layout_angle_bl'],
domStyle:['imgStyle','borStyle','rototeStyle','translateStyle','angleTRStyle','angleTLStyle','angleBRStyle','angleBLStyle'], domStyle:['imgStyle','borStyle','rototeStyle','translateStyle','angleTRStyle','angleTLStyle','angleBRStyle','angleBLStyle'],
} }
let isMobile = ref(false)
return { return {
layout, layout,
templateFileList, templateFileList,
@@ -148,8 +160,10 @@ export default defineComponent({
layoutList, layoutList,
content, content,
loadingShow, loadingShow,
moodItemScale,
styleObj, styleObj,
domObj, domObj,
isMobile,
}; };
}, },
data() { data() {
@@ -157,17 +171,13 @@ export default defineComponent({
// moodTemplateId: "", //模板id // moodTemplateId: "", //模板id
store: useStore(), store: useStore(),
// layoutList:computed(()=>{
// return [...(useStore().state.UploadFilesModule.moodboardFiles),
// ...(useStore().state.UploadFilesModule.generateFiles),
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
// }),
moodb : moodb.moodb_, moodb : moodb.moodb_,
moodbList:{}, moodbList:{},
moodbClassName:[], moodbClassName:[],
setabsolute:false, setabsolute:false,
token: "", token: "",
uploadUrl: "", uploadUrl: "",
moodIndex:0,
upload: { upload: {
isPin: 0, isPin: 0,
gender:'', gender:'',
@@ -186,30 +196,17 @@ export default defineComponent({
layout:{ layout:{
mounted (el,layout:any,binding) { mounted (el,layout:any,binding) {
let mousedown = function(e: MouseEvent){ let mousedown = function(event: MouseEvent){
e.stopPropagation() let e:any = getMousePosition(event,false)
let event:any = { mouseDownOperation(e)
offsetX:e.offsetX,
offsetY:e.offsetY,
clientX:e.clientX,
clientY:e.clientY,
}
operation(event)
} }
let touchstart = function(e: any){ let touchstart = function(event: any){
e.stopPropagation() let e:any = getMousePosition(event,true)
const touch = e.changedTouches[0]; mouseDownOperation(e)
let event:any = {
offsetX:touch.clientX - e.target.getBoundingClientRect().left,
offsetY: touch.clientY - e.target.getBoundingClientRect().top,
clientX:touch.clientX,
clientY:touch.clientY,
}
operation(event)
} }
let operation = function(e: MouseEvent){ let mouseDownOperation = function(e: MouseEvent){
el.parentElement.children.forEach((v:any) => { el.parentElement.children.forEach((v:any) => {
v.style.left = v.offsetLeft+'px' v.style.left = v.offsetLeft+'px'
v.style.top = v.offsetTop+'px' v.style.top = v.offsetTop+'px'
@@ -226,20 +223,15 @@ export default defineComponent({
let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值 let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
let domY = e.clientY - e.offsetY - Number(top) let domY = e.clientY - e.offsetY - Number(top)
let mouse = true let mouse = true
let mouseMove = function(e:MouseEvent){ let mouseMove = function(event:MouseEvent){
domOperation(e) let e:any = getMousePosition(event,false)
mouseMoveOperation(e)
} }
let touchmove = function(e:any){ let touchmove = function(event:any){
const touch = e.changedTouches[0]; let e:any = getMousePosition(event,true)
let event:any = { mouseMoveOperation(e)
offsetX:touch.clientX - e.target.getBoundingClientRect().left,
offsetY: touch.clientY - e.target.getBoundingClientRect().top,
clientX:touch.clientX,
clientY:touch.clientY,
} }
domOperation(event) let mouseMoveOperation = (e:any)=>{
}
let domOperation = (e:any)=>{
if(mouse){ if(mouse){
el.style.left = e.clientX-mouseX - domX+'px' el.style.left = e.clientX-mouseX - domX+'px'
el.style.top = e.clientY-mouseY - domY+'px' el.style.top = e.clientY-mouseY - domY+'px'
@@ -282,8 +274,15 @@ export default defineComponent({
//操作大小 //操作大小
compile:{ compile:{
mounted (el,compile) { mounted (el,compile) {
el.addEventListener('mousedown',(e: MouseEvent)=>{ let mousedown = (event:any)=>{
e.stopPropagation() let e:any = getMousePosition(event,false)
mouseDownOperation(e)
}
let touchstart = (event:any)=>{
let e:any = getMousePosition(event,true)
mouseDownOperation(e)
}
let mouseDownOperation = (e: MouseEvent)=>{
let elParent = el.parentNode.parentNode let elParent = el.parentNode.parentNode
el.parentElement.parentNode.parentNode.children.forEach((v:any) => { el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
v.style.left = v.offsetLeft+'px' v.style.left = v.offsetLeft+'px'
@@ -307,27 +306,34 @@ export default defineComponent({
let gpsXY:any let gpsXY:any
let parent:any let parent:any
if(compile.value == 'left' || compile.value == 'right'){ if(compile.value == 'left' || compile.value == 'right'){
gpsXY = e.x gpsXY = e.clientX
parent = elParent.offsetWidth parent = elParent.offsetWidth
}else{ }else{
parent = elParent.offsetHeight parent = elParent.offsetHeight
gpsXY = e.y gpsXY = e.clientY
} }
let mouse = true let mouse = true
document.onmousemove = function(e:MouseEvent){ let mouseMove = function(event:MouseEvent){
let e:any = getMousePosition(event,false)
mouseMoveOperation(e)
}
let touchmove = function(event:any){
let e:any = getMousePosition(event,true)
mouseMoveOperation(e)
}
let mouseMoveOperation = function(e:MouseEvent){
if(mouse){ if(mouse){
if(compile.value == 'left'){ if(compile.value == 'left'){
elParent.style.width = parent + gpsXY - e.x + 'px' elParent.style.width = parent + gpsXY - e.clientX + 'px'
}else if(compile.value == 'right'){ }else if(compile.value == 'right'){
elParent.style.width = parent + e.x - gpsXY + 'px' elParent.style.width = parent + e.clientX - gpsXY + 'px'
}else if(compile.value == 'top'){ }else if(compile.value == 'top'){
elParent.style.height = parent + gpsXY - e.y + 'px' elParent.style.height = parent + gpsXY - e.clientY + 'px'
}else if(compile.value == 'bottom'){ }else if(compile.value == 'bottom'){
elParent.style.height = parent + e.y - gpsXY + 'px' elParent.style.height = parent + e.clientY - gpsXY + 'px'
} }
if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){ if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){
elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px' elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px'
} }
@@ -343,37 +349,57 @@ export default defineComponent({
} }
} }
} }
document.onmouseup = function(){
let mouseup = function(){
mouse = false mouse = false
document.onmousemove = ()=>{} document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',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)
} }
}, },
//操作旋转 //操作旋转
rotote:{ rotote:{
mounted(el){ mounted(el,item){
let mouse = true; let mouse = true;
let angle :any = 0 let angle :any = 0
let num:any let num:any
let x = 0 let x = 0
let y = 0 let y = 0
let elParent = el.parentNode.parentNode let elParent = el.parentNode.parentNode
if(document.defaultView){
let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',') let mousedown = function(event: MouseEvent){
num = Number(transform[3]) let e:any = getMousePosition(event,false)
mouseDownOperation(e)
} }
// 添加鼠标按下事件监听器
let mousedown = (e:MouseEvent) => { let touchstart = function(event: any){
e.stopPropagation() let e:any = getMousePosition(event,true)
mouseDownOperation(e)
}
let mouseDownOperation = (e:any) => {
mouse = true; mouse = true;
// let eX = (e.pageX - el.offsetLeft) + el.offsetLeft
// let eY = elParent.offsetTop + el.offsetTop
var info = el.getBoundingClientRect(); var info = el.getBoundingClientRect();
let eX = info.x + info.width / 2; let eX = info.x + info.width / 2;
let eY = info.y + info.height / 2; let eY = info.y + info.height / 2;
let mouseMove = function(event:MouseEvent){
document.addEventListener('mousemove', (e:MouseEvent) => { let e:any = getMousePosition(event,false)
mouseMoveOperation(e)
}
let touchmove = function(event:any){
let e:any = getMousePosition(event,true)
mouseMoveOperation(e)
}
let mouseMoveOperation = (e:MouseEvent) => {
if (mouse) { if (mouse) {
let X = eX let X = eX
let Y = eY let Y = eY
@@ -383,21 +409,33 @@ export default defineComponent({
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)" elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)" el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
} }
}); };
// 添加鼠标松开事件监听器 // 添加鼠标松开事件监听器
document.addEventListener('mouseup',mouseup ); let mouseup = function(){
} mouse = false
let mouseup = () => { document.removeEventListener('mousemove',mouseMove)
mouse = false; document.removeEventListener('touchmove',touchmove)
// el.removeEventListener('mousedown',mousedown)
document.removeEventListener('mouseup',mouseup) document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
//移动端
} }
el.addEventListener('mousedown',mousedown); document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
document.addEventListener('mouseup', mouseup);
document.addEventListener('touchend', mouseup);
}
el.addEventListener('mousedown',mousedown)
el.addEventListener('touchstart',touchstart)
//缩放 //缩放
let timeSwitch = true let timeSwitch = true
el.parentNode.addEventListener('mousemove', (e:MouseEvent) => { el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => { el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
if(document.defaultView){
let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
num = Number(transform[3])
}
if(timeSwitch){ if(timeSwitch){
if(angle == 0){ if(angle == 0){
function getRotationAngle(transformDom:any) { function getRotationAngle(transformDom:any) {
@@ -436,10 +474,11 @@ export default defineComponent({
setTimeout(() => { setTimeout(() => {
timeSwitch = true timeSwitch = true
}, 100); }, 100);
let instance:any = item.instance
instance.moodItemScale = num * 100
item.value.zoom = num
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)" elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
} }
}); });
}); });
} }
@@ -448,9 +487,16 @@ export default defineComponent({
angle:{ angle:{
mounted(el,angle){ mounted(el,angle){
let mouse = false; let mouse = false;
el.addEventListener('mousedown', (e:MouseEvent) => { let mousedown = function(event: MouseEvent){
e.stopPropagation() let e:any = getMousePosition(event,false)
mouseDownOperation(e)
}
let touchstart = function(event: any){
let e:any = getMousePosition(event,true)
mouseDownOperation(e)
}
let mouseDownOperation = (e:MouseEvent) => {
el.parentNode.children.forEach((v:any) =>{ el.parentNode.children.forEach((v:any) =>{
v.classList.add('eventNode') v.classList.add('eventNode')
}) })
@@ -459,7 +505,15 @@ export default defineComponent({
let eX:any let eX:any
let eY:any let eY:any
let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2) let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
let mouseMove = (e:MouseEvent)=>{ let mouseMove = function(event:MouseEvent){
let e:any = getMousePosition(event,false)
mouseMoveOperation(e)
}
let touchmove = function(event:any){
let e:any = getMousePosition(event,true,el.parentNode)
mouseMoveOperation(e)
}
let mouseMoveOperation = (e:MouseEvent)=>{
if (mouse) { if (mouse) {
if(angle.value == 'right'){ if(angle.value == 'right'){
eX = elParent.offsetWidth - e.offsetX eX = elParent.offsetWidth - e.offsetX
@@ -474,7 +528,7 @@ export default defineComponent({
eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
} }
let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2 let mouseSide = Math.sqrt(eX*eX + eY *eY)/2
// el.style.left = e.offsetX /2 +'px' // el.style.left = e.offsetX /2 +'px'
// el.style.top = e.offsetY /2+'px' // el.style.top = e.offsetY /2+'px'
if(100 - 100 * mouseSide/elParentSide <= 50){ if(100 - 100 * mouseSide/elParentSide <= 50){
@@ -523,28 +577,40 @@ export default defineComponent({
} }
} }
} }
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', mouseup);
} }
let mouseup = () => { let mouseup = function(){
mouse = false; mouse = false
el.parentNode.removeEventListener('mousemove',mouseMove)
el.parentNode.children.forEach((v:any) =>{ el.parentNode.children.forEach((v:any) =>{
v.classList.remove('eventNode') v.classList.remove('eventNode')
}) })
document.removeEventListener('mouseup', mouseup); el.parentNode.removeEventListener('mousemove',mouseMove)
el.parentNode.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
//移动端
} }
el.parentNode.addEventListener('mousemove', mouseMove); el.parentNode.addEventListener('mousemove', mouseMove);
el.parentNode.addEventListener('touchmove', touchmove);
}) document.addEventListener('mouseup', mouseup);
document.addEventListener('touchend', mouseup);
}
el.addEventListener('mousedown',mousedown)
el.addEventListener('touchstart',touchstart)
} }
}, },
//移动图片 //移动图片
translate:{ translate:{
mounted (el,layout:any,binding) { mounted (el,layout:any,binding) {
el.addEventListener('mousedown',(e: MouseEvent)=>{ let mousedown = function(event: MouseEvent){
e.stopPropagation() let e:any = getMousePosition(event,false)
mouseDownOperation(e)
}
let touchstart = function(event: any){
let e:any = getMousePosition(event,true)
mouseDownOperation(e)
}
let mouseDownOperation = (e: MouseEvent)=>{
let elParent = el.parentNode.parentNode let elParent = el.parentNode.parentNode
el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%' el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
el.style.top = (el.offsetTop+2)/(elParent.offsetHeight)*100+'%' el.style.top = (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
@@ -555,10 +621,18 @@ export default defineComponent({
let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值 let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
let domY = e.clientY - e.offsetY - el.offsetTop let domY = e.clientY - e.offsetY - el.offsetTop
let mouse = true let mouse = true
document.onmousemove = function(e:MouseEvent){ let mouseMove = function(event:MouseEvent){
let e:any = getMousePosition(event,false)
mouseMoveOperation(e)
}
let touchmove = function(event:any){
let e:any = getMousePosition(event,true)
mouseMoveOperation(e)
}
let mouseMoveOperation = function(e:MouseEvent){
if(mouse){ if(mouse){
let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%' let left = ( e.clientX-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
let top = (e.y-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%' let top = (e.clientY-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
el.style.left = left el.style.left = left
el.style.top = top; el.style.top = top;
el.previousSibling.style.top = top el.previousSibling.style.top = top
@@ -594,11 +668,21 @@ export default defineComponent({
} }
} }
} }
document.onmouseup = function(){ let mouseup = function(){
mouse = false mouse = false
document.onmousemove = ()=>{} document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',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)
}, },
}, },
modelImg:{ modelImg:{
@@ -634,9 +718,10 @@ export default defineComponent({
v.setPitch = false v.setPitch = false
}) })
this.layoutList = parentList this.layoutList = parentList
this.moodbList = this.moodb[parentList.length-1] this.moodbList = this.moodb[parentList.length-1]
this.moodbClassName = this.styleObj.class this.moodbClassName = this.styleObj.class?this.styleObj.class:[]
this.moodItemScale = this.layoutList[0].zoom*100
this.initDomStyle() this.initDomStyle()
}, },
@@ -644,6 +729,11 @@ export default defineComponent({
this.layout = false this.layout = false
}, },
setpitch(item:any,index:any){ setpitch(item:any,index:any){
if(!item.zoom){
item.zoom = 1
}
this.moodIndex = index
this.moodItemScale = (item.zoom?item.zoom:1)*100
this.layoutList.forEach((v:any)=>{ this.layoutList.forEach((v:any)=>{
v.setPitch = false v.setPitch = false
}) })
@@ -653,6 +743,11 @@ export default defineComponent({
} }
}, },
setMoodItemScale(value:any){
if(value > 2){
this.layoutList[this.moodIndex].zoom = value/100
}
},
setmoodb(item:any){ setmoodb(item:any){
this.moodbClassName = item this.moodbClassName = item
this.$emit('setmoodbClass',this.moodbClassName) this.$emit('setmoodbClass',this.moodbClassName)
@@ -1045,6 +1140,65 @@ export default defineComponent({
} }
} }
} }
.layout_right{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: calc(5rem*1.2);
// background-color: #000;
width: 8%;
height: 50%;
&.layout_left::-webkit-scrollbar {
display: none;
}
.layout_left_text{
font-size: var(--aida-fsize1-6);
margin-bottom: calc(1rem*1.2);
color: #000;
}
.layout_left_items{
width: 100%;
height: calc(6rem*1.2);
display: flex;
align-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
margin-bottom: calc(2rem*1.2);
cursor: pointer;
.layout_left_item{
box-sizing: border-box;
border: 1px solid #000;
}
}
.ant-slider{
margin: 0;
margin-top: calc(2rem*1.2);
padding: 0 calc(1rem*1.2);
.ant-slider-track,
.ant-slider-rail {
height: calc(.6rem*1.2);
background-color: #e1e1e1;
border-radius: calc(0.5rem*1.2);
}
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
.ant-slider-handle {
background-color: #2d2e76 !important;
border: none !important;
}
.ant-slider-handle:hover {
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
}
.habit_System_Designer_text_max {
display: flex;
justify-content: space-between;
.habit_System_Designer_text {
}
}
}
}
.submit_button { .submit_button {
margin: calc(2rem*1.2) auto 0; margin: calc(2rem*1.2) auto 0;
position: relative; position: relative;

28
src/tool/mdEvent.js Normal file
View File

@@ -0,0 +1,28 @@
const getMousePosition = (e,bor,dom) => {
e.stopPropagation()
if(bor){
const touch = e.changedTouches[0];
event = {
offsetX:touch.clientX - e.target.getBoundingClientRect().left,
offsetY: touch.clientY - e.target.getBoundingClientRect().top,
clientX:touch.clientX,
clientY:touch.clientY,
}
if(dom){
event.offsetX = touch.clientX - dom.getBoundingClientRect().left
event.offsetY = touch.clientY - dom.getBoundingClientRect().top
}
}else{
event = {
offsetX:e.offsetX,
offsetY:e.offsetY,
clientX:e.clientX,
clientY:e.clientY,
}
}
return event
}
export {
getMousePosition,
}

34
src/tool/util.js
View File

@@ -451,6 +451,8 @@ function segmentImage(markerImage,fullImage,size){
marker.onload = () => { marker.onload = () => {
ctx1.drawImage(marker,0,0 ,size.width, size.height); ctx1.drawImage(marker,0,0 ,size.width, size.height);
full.onload = () => { full.onload = () => {
console.log(full.height,size,full.width);
ctx2.drawImage(full,0,0, size.width, size.height); ctx2.drawImage(full,0,0, size.width, size.height);
segmentImageItem(); segmentImageItem();
}; };
@@ -466,16 +468,16 @@ function segmentImage(markerImage,fullImage,size){
const color2 = { r: 0, g: 255, b: 0 }; // 第二个颜色 const color2 = { r: 0, g: 255, b: 0 }; // 第二个颜色
const threshold = 100; // 颜色匹配的容差 const threshold = 100; // 颜色匹配的容差
// const isColorMatch = (r, g, b, color) => // const isColorMatch = (r, g, b, color) =>
// (Math.abs(r - color.r) < threshold) || (Math.abs(0 - color.r) < threshold) && // (Math.abs(r - color.r) < threshold) || (Math.abs(0 - color.r) < threshold) &&
// (Math.abs(g - color.g) < threshold) || (Math.abs(0 - color.g) < threshold) && // (Math.abs(g - color.g) < threshold) || (Math.abs(0 - color.g) < threshold) &&
// (Math.abs(b - color.b) < threshold) || (Math.abs(0 - color.b) < threshold) // (Math.abs(b - color.b) < threshold) || (Math.abs(0 - color.b) < threshold)
const isColorMatch = (r, g, b, color) => const isColorMatch = (r, g, b, color) =>
(Math.abs(r - color.r) < threshold || Math.abs(0 - color.r) < threshold) && ((color.r >= color.g) && r >= g) ||
(Math.abs(g - color.g) < threshold || Math.abs(0 - color.g) < threshold) && ((color.r < color.g) && r < g)
(Math.abs(b - color.b) < threshold || Math.abs(0 - color.b) < threshold)
// (Math.abs(b - color.b) < threshold || Math.abs(0 - color.b) < threshold)
const output1 = ctx3.createImageData(size.width, size.height); const output1 = ctx3.createImageData(size.width, size.height);
const output2 = ctx3.createImageData(size.width, size.height); const output2 = ctx3.createImageData(size.width, size.height);
@@ -483,26 +485,33 @@ function segmentImage(markerImage,fullImage,size){
const r = markerData.data[i]; const r = markerData.data[i];
const g = markerData.data[i + 1]; const g = markerData.data[i + 1];
const b = markerData.data[i + 2]; const b = markerData.data[i + 2];
let a = markerData.data[i + 3];
if (isColorMatch(r, g, b, color1)) { a>1?a = 255:0
if (r>=g && a>1) {
// 将完整图像中对应的像素复制到第一个输出图像 // 将完整图像中对应的像素复制到第一个输出图像
output1.data[i] = fullData.data[i]; output1.data[i] = fullData.data[i];
output1.data[i + 1] = fullData.data[i + 1]; output1.data[i + 1] = fullData.data[i + 1];
output1.data[i + 2] = fullData.data[i + 2]; output1.data[i + 2] = fullData.data[i + 2];
output1.data[i + 3] = fullData.data[i + 3]; output1.data[i + 3] = fullData.data[i + 3];
// output1.data[i] = 158;
// output1.data[i + 1] = 51;
// output1.data[i + 2] = 0;
// output1.data[i + 3] = 255;
// 第二个图像的像素置为透明 // 第二个图像的像素置为透明
output2.data[i] = 0; output2.data[i] = 0;
output2.data[i + 1] = 0; output2.data[i + 1] = 0;
output2.data[i + 2] = 0; output2.data[i + 2] = 0;
output2.data[i + 3] = 0; output2.data[i + 3] = 0;
} else if (isColorMatch(r, g, b, color2)) { } else if (r<g && a>1) {
// 将完整图像中对应的像素复制到第二个输出图像 // 将完整图像中对应的像素复制到第二个输出图像
output2.data[i] = fullData.data[i]; output2.data[i] = fullData.data[i];
output2.data[i + 1] = fullData.data[i + 1]; output2.data[i + 1] = fullData.data[i + 1];
output2.data[i + 2] = fullData.data[i + 2]; output2.data[i + 2] = fullData.data[i + 2];
output2.data[i + 3] = fullData.data[i + 3]; output2.data[i + 3] = fullData.data[i + 3];
// output2.data[i] = 158;
// output2.data[i + 1] = 51;
// output2.data[i + 2] = 0;
// output2.data[i + 3] = 255;
// 第一个图像的像素置为透明 // 第一个图像的像素置为透明
output1.data[i] = 0; output1.data[i] = 0;
output1.data[i + 1] = 0; output1.data[i + 1] = 0;
@@ -527,11 +536,16 @@ function segmentImage(markerImage,fullImage,size){
canvas.height = size.height; canvas.height = size.height;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.putImageData(imageData, 0, 0); ctx.putImageData(imageData, 0, 0);
return canvas.toDataURL('image/png'); let data = canvas.toDataURL('image/png')
canvas.remove()
return data;
}; };
targetBackUrl =createImageURL(output2) targetBackUrl =createImageURL(output2)
targetFrontUrl =createImageURL(output1) targetFrontUrl =createImageURL(output1)
resolve({targetFrontUrl, targetBackUrl}) resolve({targetFrontUrl, targetBackUrl})
markerCanvas.remove()
fullCanvas.remove()
nullCanvas.remove()
} }
}) })
} }

5
src/views/HomeMain.vue
View File

@@ -124,7 +124,7 @@
<i class="fi fi-rs-notebook"></i> <i class="fi fi-rs-notebook"></i>
<span class="select_item_des">{{$t('Header.ViewOrders')}}</span> <span class="select_item_des">{{$t('Header.ViewOrders')}}</span>
</div> </div>
<router-link class="select_item" :to="`/administrator`"> <router-link class="select_item" v-if="AdministratorUserIdList.indexOf(cookieUserInfo?.userId) >= 0" :to="`/administrator`">
<span class="icon iconfont icon-yonghu"></span> <span class="icon iconfont icon-yonghu"></span>
<span class="select_item_des">Administrator</span> <span class="select_item_des">Administrator</span>
</router-link> </router-link>
@@ -261,7 +261,7 @@ export default defineComponent({
}) })
} }
MyWs.linkWs("ws://"+MyWs.messageUrl,'message') MyWs.linkWs("wss://"+MyWs.messageUrl,'message')
let getWsMessage = (data)=>{ let getWsMessage = (data)=>{
store.commit('setMessageSystem',...data) store.commit('setMessageSystem',...data)
} }
@@ -375,6 +375,7 @@ export default defineComponent({
} }
}, },
mounted() { mounted() {
console.log(this.store);
let isTest = getCookie('isTest')//获取是否是试用用户 let isTest = getCookie('isTest')//获取是否是试用用户
this.isTest =JSON.parse(isTest) this.isTest =JSON.parse(isTest)
let isMurmur = getCookie('isMurmur')//获取是否是试用用户 let isMurmur = getCookie('isMurmur')//获取是否是试用用户