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

50
src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js
View File

@@ -480,6 +480,12 @@ export class ChangeFixedImageCommand extends Command {
this.position.x = options.left || this.canvas.width / 2;
this.position.y = options.top || this.canvas.height / 2;
this.canvasWidth = options?.canvasWidth?.value || this.canvas.width;
this.canvasHeight = options?.canvasHeight?.value || this.canvas.height;
// 底图加载方式 1.平铺 2.拉伸 3.拉伸平铺 4.拉伸平铺并裁剪 5.包含
this.imageMode = options?.imageMode || ""; // 默认 contains, stretch,tile， stretchTile, stretchTileCrop
// 用于回滚的状态
this.previousImage = null;
this.previousTransform = null;
@@ -679,6 +685,7 @@ export class ChangeFixedImageCommand extends Command {
async applyImageToLayer(newImage) {
await optimizeCanvasRendering(this.canvas, async () => {
// 设置基本属性
newImage.set({
id: this.targetLayer?.fabricObject?.id || this.newObjectId,
layerId: this.targetLayer.id,
@@ -718,6 +725,49 @@ export class ChangeFixedImageCommand extends Command {
});
}
// 如果是包含 则需要根据图像模式调整大小
switch (this.imageMode) {
case "stretch":
// 拉伸模式 - 填充整个画布
newImage.scaleToWidth(this.canvasWidth);
newImage.scaleToHeight(this.canvasHeight);
break;
case "tile":
// 平铺模式 - 保持原始大小
newImage.scaleX = 1;
newImage.scaleY = 1;
break;
case "stretchTile":
// 拉伸平铺模式 - 填充整个画布，但保持宽高比
newImage.scaleToWidth(this.canvasWidth);
newImage.scaleToHeight(this.canvasHeight);
break;
case "stretchTileCrop":
// 拉伸平铺并裁剪模式 - 填充整个画布，可能
// 会裁剪图像以适应画布
newImage.scaleToWidth(this.canvasWidth);
newImage.scaleToHeight(this.canvasHeight);
// 这里可以添加裁剪逻辑，如果需要的话
// 例如使用fabric.Image.clipPath来裁剪图像
break;
case "contains":
// 包含模式 - 保证图像在画布内完整显示
// 既要考虑画布的宽高比，也要考虑图像的宽高比
// 图片缩放后要保证最长边能完全显示在画布内
const canvasAspect = this.canvasWidth / this.canvasHeight;
const imageAspect = newImage.width / newImage.height;
// 保证图像在画布内完整显示 - 既要考虑画布的宽高比，也要考虑图像的宽高比
// 图片缩放后要保证最长边能完全显示在画布内
if (imageAspect > canvasAspect) {
// 图像更宽
newImage.scaleToWidth(this.canvasWidth);
} else {
// 图像更高
newImage.scaleToHeight(this.canvasHeight);
}
break;
}
// 使用帮助函数在指定z-index位置插入新图像
if (this.previousZIndex !== undefined && this.previousZIndex >= 0) {
const insertSuccess = insertObjectAtZIndex(

47
src/component/Canvas/CanvasEditor/index.vue
View File

@@ -78,10 +78,10 @@ const imageUploadRef = ref(null);
const currentZoom = ref(100);
// 画布设置
const canvasWidth = ref(CanvasConfig.width);
const canvasHeight = ref(CanvasConfig.height);
const canvasColor = ref(CanvasConfig.backgroundColor);
const layerWidth = ref(CanvasConfig.layerWidth);
const canvasWidth = ref(props.config.width);
const canvasHeight = ref(props.config.height);
const canvasColor = ref(props.config.backgroundColor);
// const layerWidth = ref(CanvasConfig.layerWidth);
const brushSize = ref(CanvasConfig.brushSize); // 画笔大小
const canvasManagerLoaded = ref(false); // 画布是否加载完成
@@ -315,29 +315,26 @@ onMounted(async () => {
}
}
// 如果初始化有默认底图，设置底图 - 红绿图模式不通过初始化重置底图了
if (!isRedGreenMode.value && props.clothingImageUrl) {
nextTick(() => {
setTimeout(() => {
try {
canvasManager?.changeFixedImage?.(props.clothingImageUrl, {
undoable: false, // 不可撤销操作
...(props?.clothingImageOpts || {}),
});
} catch (error) {
console.error("更换底图失败:", error);
}
}, 92); // 延迟 确保更新底图完成
});
this.canvasManager?.centerBackgroundLayer?.(
this.canvas.width,
this.canvas.height
);
}
// 初始设置
handleWindowResize(); // 设置画布大小
} else if (!isRedGreenMode.value && props.clothingImageUrl) {
nextTick(() => {
setTimeout(() => {
try {
canvasManager?.changeFixedImage?.(props.clothingImageUrl, {
undoable: false, // 不可撤销操作
...(props?.clothingImageOpts || {}),
});
} catch (error) {
console.error("更换底图失败:", error);
}
}, 92); // 延迟 确保更新底图完成
});
canvasManager?.centerBackgroundLayer?.(
canvasManager.canvas.width,
canvasManager.canvas.height
);
}
});

5
src/component/Canvas/CanvasEditor/managers/CanvasManager.js
View File

@@ -659,12 +659,15 @@ export class CanvasManager {
console.error("图层管理器未设置，无法更改固定图层图片");
return;
}
const command = new ChangeFixedImageCommand({
canvas: this.canvas,
layerManager: this.layerManager,
imageUrl: imageUrl,
targetLayerType: options.targetLayerType || "fixed", // background/fixed
options: options,
canvasWidth: this.canvasWidth,
canvasHeight: this.canvasHeight,
...options,
});
command.undoable =

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() {

243
src/component/DetailCopy/canvas/index1.vue Normal file
View File

@@ -0,0 +1,243 @@
<template>
<div class="canvasBox">
<!-- designDetailShow -->
<!-- :class="[driver__.driver?'hideEvents':'']" -->
<div class="canvasContent">
<div class="argument-box">
<argument
ref="argument"
class="argument"
v-if="canvasObj.id || frontBackCanvasObj.id"
@toolLiquefaction="toolLiquefaction"
@setFrontBackColor="setFrontBackColor"
:isEditFrontBack="isEditFrontBack">
</argument>
</div>
<div class="content-bottom">
<div class="tool-box">
<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
</div>
<div class="contet">
<div class="canvas" v-show="!isEditFrontBack" @click.stop>
<canvasContent ref="canvasContent"></canvasContent>
</div>
<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
<editFrontBack
:patchData="frontBack"
:imgDomIndex="imgDomIndex"
ref="editFrontBack">
</editFrontBack>
</div>
</div>
<!-- <div class="Finish">
<div class="gallery_btn" @click="privewDetail">Finish</div>
</div> -->
</div>
</div>
<!-- <div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div> -->
</div>
</template>
<script lang="ts">
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,watch,toRefs, reactive} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import editFrontBack from '@/component/Detail/editFrontBack.vue'
import canvasGeneral from "@/tool/canvasGeneralCopy";
import argument from './argument.vue'
import canvasContent from './canvasContent.vue'
import tool from "./tool.vue"
export default defineComponent({
components:{
tool,argument,canvasContent,editFrontBack
},
setup(props,{emit}) {
const store = useStore();
const {t} = useI18n();
const detailDom = reactive({
editFrontBack:null as any,
model:null,
})
const userDetail = computed(()=>{
return store.state.UserHabit.userDetail
})
const detailData = reactive({
canvasObj:new canvasGeneral('aa'),
frontBackCanvasObj:new canvasGeneral('vv'),
isShowMark:false,
liquefactionData:null as any,
liquefaction:null as any,
canvasType:'export',
imgDomIndex:-1,
isEditFrontBack:false,
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
})
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
// privewDetail(oldValue)
},{immediate: true})
provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
provide('canvasObj',detailData.canvasObj)
provide('isShowMark',detailData.isShowMark)
provide('canvasType',detailData.canvasType)
const setLiquefaction = async ()=>{//进入液化页面
detailData.canvasObj.getLiquefactionImgObj().then((data)=>{
if(data?.img){
detailData.liquefactionData = data
detailData.liquefaction.init(data.img)
}else {
message.info(t('exportModel.jsContent6'))
return null;
}
})
}
const toolLiquefaction = ()=>{//工具点击按钮
setLiquefaction()
}
const editFront = ()=>{//编辑前后片
detailData.isEditFrontBack = !detailData.isEditFrontBack
if(detailData.isEditFrontBack){
nextTick(()=>{
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
}
}
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
let data = await detailData.canvasObj.detailSubmit()
if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = data
}
const setFrontBackColor = (data:any)=>{
detailDom.editFrontBack.setBackground(data)
}
onBeforeUnmount(()=>{
privewDetail()
})
return{
...toRefs(detailDom),
...toRefs(detailData),
toolLiquefaction,
editFront,
privewDetail,
setFrontBackColor,
}
},
provide() {
return {
}
},
mounted(){
},
})
</script>
<style lang="less" scoped>
.canvasBox{
flex: 1;
overflow: hidden;
// top: -100%;
display: flex;
align-items: center;
.tool-box{
width: 4rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.Finish{
margin-top: auto;
> .gallery_btn{
cursor: pointer;
}
}
.argument-box{
height: 4rem;
width: 100%;
margin-bottom: 3rem;
margin-left: 4rem;
}
.argument-box,
.content-bottom,
.detail-box{
:deep(i){
font-size: 2.5rem;
cursor: pointer;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all .3s;
margin-bottom: .5rem;
&.active{
border: 1px solid;
border-radius: .4rem;
}
&.icon-xiala{
transform: rotate(-90deg);
}
&.icon-xialaActive{
transform: rotate(90deg);
}
&.eventNone{
cursor: no-drop;
border: none;
opacity: .5;
}
}
}
.canvasContent{
height: 100%;
// height: 70rem;
width: 100%;
border: 2px solid #000;
border-radius: 3rem;
padding: 4rem;
display: flex;
flex-direction: column;
}
.content-bottom{
flex: 1;
overflow: hidden;
display: flex;
> .contet{
flex: 1;
overflow: hidden;
position: relative;
.canvas,.editFrontBack{
width: 100%;
height: 100%;
}
.editFrontBack{
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
}
}
}
</style>

8
src/component/DetailCopy/detailLeft/module/selectList.vue
View File

@@ -25,12 +25,12 @@
</div>
</div>
<div class="print_content_list">
<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element' && deReconstructionList.length == 0">
<currentList ref="currentList" :level1Type="level1Type" :type="type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
</div>
<div class="content_item" v-show="selectTitle == 'upload'" v-if="type != 'element'">
<uploadList v-if="!isSegmentation" @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
<uploadSegmentation v-if="isSegmentation" :segmentationType="segmentationType" @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadSegmentation>
<uploadSegmentation v-if="isSegmentation" :segmentationType="segmentationType" :deReconstructionList=deReconstructionList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadSegmentation>
</div>
<div class="content_item" v-show="selectTitle == 'library'">
<libraryList :isSegmentation="isSegmentation" @selectImgItem="selectImgItem" :randomId="randomId" :level1Type="level1Type" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
@@ -90,6 +90,10 @@ export default defineComponent({
type:Boolean,
default:true,
required:false
},
deReconstructionList:{
type:Array,
default:()=>[]
}
},
emits:['selectImgItem'],

1
src/component/DetailCopy/detailLeft/module/uploadList.vue
View File

@@ -2,7 +2,6 @@
<template>
<div class="uploadList">
<div class="uploadList_box">
<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>

10
src/component/DetailCopy/detailLeft/module/uploadSegmentation.vue
View File

@@ -2,10 +2,10 @@
<template>
<div class="uploadList">
<div class="uploadList_box">
<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true"></sketchCategory>
</div>
</div>
<div class="upload_item">
@@ -55,6 +55,10 @@ export default defineComponent({
type:String,
default:'' as any,
},
deReconstructionList:{
type:Array,
default:()=>[]
}
},
emits:['selectImgItem'],
setup(props,{emit}) {
@@ -115,6 +119,10 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.imageSegmentation, param, config)
.then((rv: any) => {
rv.forEach((item:any)=>{
item.category = props.deReconstructionList[0].name
item.categoryValue = props.deReconstructionList[0].value
})
detailData.uploadList.unshift(...rv);
detailData.isShowMark = false;
})

7
src/component/home/design/index.vue
View File

@@ -50,6 +50,9 @@
</div>
</div>
</div>
<div class="gallery_btn" @click="openCanvas()" style="margin-left: auto;">
Canvas
</div>
<!-- <div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
@click="resDesignCollection()">
@@ -435,6 +438,9 @@ export default defineComponent({
const openEditTools = ()=>{
dataDom.designTools.init(speed.speedData.value,likeDesignCollectionList.value)
}
const openCanvas = ()=>{
dataDom.designTools.init('editCanvas')
}
const editToolsSuccess = ()=>{
nextTick().then(()=>{
designData.isUnfold = true
@@ -1155,6 +1161,7 @@ export default defineComponent({
openSpeed,
setSpeed,
openEditTools,
openCanvas,
editToolsSuccess,
likeItemDom,

23
src/component/home/design/tools.vue
View File

@@ -28,7 +28,7 @@
<!-- <div class="modal_title_text">
<div>Setting</div>
</div> -->
<div class="collectionBox">
<div class="collectionBox" :class="{editCanvas:openType == 'editCanvas'}">
<toProductRelight ref="toProduct"
:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}"
:isDesignPage="true"
@@ -46,6 +46,10 @@
v-if="openType == 'relight'"
></toProductRelight>
<poseTransfer v-if="openType == 'poseTransfer'" :isDesignPage="true" @setLike="designLike" ref="poseTransfer"></poseTransfer>
<div class="canvasBox" ref="canvasBox">
<editCanvas v-if="openType == 'editCanvas'" ref="editCanvas"
></editCanvas>
</div>
</div>
</div>
<div class="mark_loading" v-show="isShowMark">
@@ -61,10 +65,11 @@ import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import toProductRelight from '../tools/toProduct/index.vue'
import poseTransfer from '../tools/poseTransfer/index.vue'
import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
export default defineComponent({
components:{
toProductRelight,poseTransfer
toProductRelight,poseTransfer,editCanvas
},
props:{
},
@@ -83,12 +88,14 @@ export default defineComponent({
toProduct:null as any,
relight:null as any,
poseTransfer:null as any,
editCanvas:null as any,
}) as any
const init = (value:any,list:any)=>{
data.designTools = true
data.openType = value
if(value == 'editCanvas')
return
data.likeDesignList = list
console.log(list)
nextTick(()=>{
let fileList = [] as any
if(value == 'toProduct'){
@@ -169,6 +176,16 @@ export default defineComponent({
height: 100%;
> .collectionBox{
height: 100%;
&.editCanvas{
padding-top: 5rem;
padding-right: 5rem;
display: flex;
}
> .canvasBox{
height: 100%;
flex:1;
position: relative;
}
}
}
.fullScreen{

43
src/component/home/tools/deReconstruction/canvas/index.vue
View File

@@ -1,7 +1,13 @@
<template>
<div class="generalCanvas">
<div class="canvasBox">
<editCanvas v-if="canvasLoad" ref="editCanvas"></editCanvas>
<div class="canvasBox" ref="canvasBox">
<editCanvas v-if="canvasLoad" ref="editCanvas"
:config="canvasConfig"
:clothingImageUrl="modelUrl"
:clothing-image-opts="{
imageMode:'contains',
}"
></editCanvas>
</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
@@ -17,7 +23,7 @@ import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import canvasGeneral from "@/tool/canvasGeneralCopy";
import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
import defaultModel from "@/assets/images/homePage/defaultModel.png"
export default defineComponent({
components: {
@@ -32,17 +38,20 @@ export default defineComponent({
})
const data = reactive({
canvasLoad:false,
canvasConfig:{},
modelUrl:'',
})
const dataDom = reactive({
editCanvas:null,
canvasBox:null
})
const openSetData = ()=>{
data.canvasLoad = true
// dataDom.canvasContent.openSetData()
}
const addImage = (value)=>{
console.log(value)
dataDom.editCanvas.addImageToLayer(value.imgUrl)
// dataDom.editCanvas.addImageToLayer(value.imgUrl)
dataDom.editCanvas.addImageToLayer(value.url)
}
const addBottomImage = (value)=>{
dataDom.editCanvas.changeFixedImage(value)
@@ -54,7 +63,31 @@ export default defineComponent({
return canvasExport
}
const setCanvas = (url)=>{
return new Promise((res,rev)=>{
let img = new Image()
console.log(url)
img.onload = ()=>{
let wH = [1,1]
let domHeight = dataDom.canvasBox.offsetHeight - 200
let imgHeight = img.height
wH = [1,domHeight/imgHeight]
data.canvasConfig.width = img.width * wH[1]
data.canvasConfig.height = domHeight
console.log(data.canvasConfig,123123123)
data.canvasLoad = true
res('')
}
img.src = url
})
}
onMounted(() => {
nextTick(()=>{
let url = new URL(defaultModel, import.meta.url).href
data.modelUrl = url
setCanvas(url).then(()=>{
})
})
});
onBeforeUnmount(()=>{
data.canvasLoad = false

5
src/component/home/tools/deReconstruction/index.vue
View File

@@ -19,7 +19,7 @@
<input type="radio" value="sketch" v-model="segmentationType">
</label> -->
</div>
<selectList @selectImgItem="selectImgItem" :segmentationType="segmentationType" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
<selectList @selectImgItem="selectImgItem" :deReconstructionList="segmentationTypeList" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
</div>
<div class="canvas itemBox">
<canvasBox @setGenerateImg="setGenerateImg" ref="canvasBox"></canvasBox>
@@ -66,6 +66,7 @@ export default defineComponent({
return store.state.Workspace.probjects.positionList
}),
segmentationType:'product',
segmentationTypeList:[{value:'product',name:'product'},{value:'sketch',name:'sketch'}],
generateImg:computed(()=>store.state.HomeStoreModule.deReconstruction) as any,
ceditorConfig:{
width: 800,
@@ -206,6 +207,8 @@ export default defineComponent({
// flex: 1;
&.selectSektch{
width: 37rem;
display:flex;
flex-direction: column;
flex-shrink: 0;
> .type{
display: flex;

30
src/component/modules/generalMiniCanvas.vue
View File

@@ -1,8 +1,14 @@
<template>
<div class="generalCanvas">
<div class="canvasBox" ref="canvasBox">
<editCanvas v-if="canvasLoad" :config="canvasConfig" :clothingImageUrl="imgUrl" ref="editCanvas"></editCanvas>
<editCanvas v-if="canvasLoad" :config="canvasConfig"
:clothingImageUrl="imgUrl"
:clothing-image-opts="{
imageMode:'contains',
}"
ref="editCanvas"></editCanvas>
</div>
<div class="gallery_btn" @click="canvasSave" style="width: min-content;margin: 0 auto;">Save</div>
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
@@ -63,14 +69,31 @@ export default defineComponent({
return canvasExport
}
const canvasSave = ()=>{
dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:true}).then((rv)=>{
emit('submitBase64Data',rv)
})
}
onMounted(() => {
if(props.imgUrl){
let img = new Image()
img.onload = ()=>{
let domHeight = dataDom.canvasBox.offsetHeight
let wH = [1,1]
// if(img.width > img.height){
// let domHeight = dataDom.canvasBox.offsetWidth
// let imgWidth = img.width
// data.canvasConfig.height = domHeight
// data.canvasConfig.width = imgHeight/domHeight * img.width
// }else{
// }
let domHeight = dataDom.canvasBox.offsetHeight - 200
let imgHeight = img.height
wH = [1,domHeight/imgHeight]
console.log(domHeight,img.height,img.width)
data.canvasConfig.height = domHeight
data.canvasConfig.width = imgHeight/domHeight * img.width
data.canvasConfig.width = wH[1] * img.width
// canvasWH.value = height
// // canvasBox.style.width = height+'px'
// let wScale = 1
@@ -107,6 +130,7 @@ export default defineComponent({
addImage,
getData,
getCanvasData,
canvasSave,
};
},
data(prop) {

4
src/views/HomeMain.vue
View File

@@ -455,6 +455,9 @@ export default defineComponent({
}
getUnreadCount()
nextTick(()=>{
homeMainData.historyData.isShowLoading = false
homeMainData.historyData.isNoData = false
homeMainData.historyData.page = 1
setPorfolioDom()
})
})
@@ -540,6 +543,7 @@ export default defineComponent({
}
}
const getHistory = ()=>{
console.log(123)
if(homeMainData.historyData.isShowLoading && !homeMainData.historyData.isNoData)return
homeMainData.historyData.isShowLoading = true
let data = {