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
2025-06-23 09:27:29 +08:00
parent fad2c220af
commit 7ab32c9c77
14 changed files with 518 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/component/DetailCopy/canvas/index.vue
View File

@@ -2,8 +2,8 @@
<div class="canvasBox">
<!-- designDetailShow -->
<!-- :class="[driver__.driver?'hideEvents':'']" -->
<div class="canvasContent">
<div class="argument-box">
<div class="canvasContent" ref="canvasContent">
<!-- <div class="argument-box">
<argument
ref="argument"
class="argument"
@@ -12,22 +12,37 @@
@setFrontBackColor="setFrontBackColor"
:isEditFrontBack="isEditFrontBack">
</argument>
</div>
<div class="content-bottom">
<div class="tool-box">
</div> -->
<div class="content-bottom" ref="canvasContent">
<!-- <div class="tool-box">
<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
</div>
</div> -->
<div class="contet">
<div class="canvas" v-show="!isEditFrontBack" @click.stop>
<canvasContent ref="canvasContent"></canvasContent>
<editCanvas v-if="canvasLoad" :config="canvasConfig"
:clothingImageUrl="selectDetail.undividedLayer"
:clothing-image-opts="{
imageMode:'contains',
}"
ref="editCanvas"></editCanvas>
<!-- <canvasContent ref="canvasContent"></canvasContent> -->
</div>
<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
<editFrontBack
<!-- <editFrontBack
:patchData="frontBack"
:imgDomIndex="imgDomIndex"
ref="editFrontBack">
</editFrontBack>
</editFrontBack> -->
<editCanvas v-if="isEditFrontBack" :config="canvasConfig"
:enabledRedGreenMode="true"
:clothingImageUrl="selectDetail.undividedLayer"
:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
@trigger-red-green-mouseup="frontBackChange"
:clothing-image-opts="{
imageMode:'contains',
}"
ref="editCanvasBackFront"></editCanvas>
</div>
</div>
@@ -35,6 +50,9 @@
<div class="gallery_btn" @click="privewDetail">Finish</div>
</div> -->
</div>
<div class="Finish">
<div class="gallery_btn" @click="editFront">EditFrontBack</div>
</div>
</div>
<!-- <div class="mark_loading" v-show="isShowMark">
@@ -51,6 +69,8 @@ import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import editFrontBack from '@/component/Detail/editFrontBack.vue'
import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
import { formatTime,segmentImage } from "@/tool/util";
import canvasGeneral from "@/tool/canvasGeneralCopy";
@@ -60,7 +80,7 @@ import tool from "./tool.vue"
export default defineComponent({
components:{
tool,argument,canvasContent,editFrontBack
tool,argument,editFrontBack,editCanvas
},
setup(props,{emit}) {
const store = useStore();
@@ -69,6 +89,8 @@ export default defineComponent({
const detailDom = reactive({
editFrontBack:null as any,
model:null,
editCanvas:null as any,
canvasContent:null as any,
})
const userDetail = computed(()=>{
return store.state.UserHabit.userDetail
@@ -84,6 +106,9 @@ export default defineComponent({
isEditFrontBack:false,
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
canvasLoad:false,
canvasConfig:{
} as any,
})
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -112,14 +137,16 @@ export default defineComponent({
detailData.isEditFrontBack = !detailData.isEditFrontBack
if(detailData.isEditFrontBack){
nextTick(()=>{
detailDom.editFrontBack.init(detailData.frontBack.front[detailData.imgDomIndex],'')
//关闭开启键盘事件
detailData.canvasObj.currentOperation = false
detailData.frontBackCanvasObj.currentOperation = true
setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
detailData.isEditFrontBack = true
})
// detailDom.editFrontBack.init(detailData.frontBack.front[detailData.imgDomIndex],'')
// detailData.canvasObj.currentOperation = false
// detailData.frontBackCanvasObj.currentOperation = true
})
}else{
detailData.canvasObj.currentOperation = true
detailData.frontBackCanvasObj.currentOperation = false
// detailData.canvasObj.currentOperation = true
// detailData.frontBackCanvasObj.currentOperation = false
}
}
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
@@ -129,9 +156,49 @@ export default defineComponent({
const setFrontBackColor = (data:any)=>{
detailDom.editFrontBack.setBackground(data)
}
const setCanvas = (url:any)=>{
return new Promise((res,rev)=>{
let img = new Image()
img.onload = ()=>{
let wH = [1,1]
let domHeight = detailDom.canvasContent.offsetHeight - 200
let imgHeight = img.height
wH = [1,domHeight/imgHeight]
console.log(domHeight,img.height,img.width)
console.log(detailData.selectDetail.undividedLayer)
console.log(detailData.canvasConfig)
detailData.canvasConfig.width = img.width * wH[1]
detailData.canvasConfig.height = domHeight
res('')
}
img.src = url
})
}
const frontBackChange = (value:any)=>{
let full = detailData.frontBack.front[detailData.imgDomIndex].undividedLayer
let size = {
...detailData.canvasConfig,
}
segmentImage(value,full,size).then((rv)=>{
detailData.frontBack.front[detailData.imgDomIndex].imageUrl = rv.targetFrontUrl
detailData.frontBack.back[detailData.imgDomIndex].imageUrl = rv.targetBackUrl
detailData.frontBack.front[detailData.imgDomIndex].maskUrl = value
store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:value})
})
}
onBeforeUnmount(()=>{
detailData.canvasLoad = false
privewDetail()
})
onMounted(()=>{
nextTick(()=>{
setCanvas(detailData.selectDetail.undividedLayer).then(()=>{
detailData.canvasLoad = true
})
})
})
return{
...toRefs(detailDom),
...toRefs(detailData),
@@ -139,6 +206,7 @@ export default defineComponent({
editFront,
privewDetail,
setFrontBackColor,
frontBackChange,
}
},
provide() {