合并画布，部分样式调整
This commit is contained in:
X1627315083
@@ -12,7 +12,7 @@
|
||||
:closable="false"
|
||||
:mask="false"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="false"
|
||||
:destroyOnClose="true"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
@@ -28,7 +28,7 @@
|
||||
<!-- <div class="modal_title_text">
|
||||
<div>Setting</div>
|
||||
</div> -->
|
||||
<div class="collectionBox" :class="{editCanvas:openType == 'editCanvas'}">
|
||||
<div class="collectionBox">
|
||||
<toProductRelight ref="toProduct"
|
||||
:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}"
|
||||
:isDesignPage="true"
|
||||
@@ -46,9 +46,19 @@
|
||||
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 v-if="openType == 'editCanvas'" class="canvasBox" :class="{editCanvas:openType == 'editCanvas'}">
|
||||
<div class="canvas" ref="canvasBox">
|
||||
<editCanvas @changeCanvas="changeCanvas" ref="editCanvas">
|
||||
<template #existsImageList>
|
||||
<ExistsImageList :list="canvasSelectList" @select="handleImageSelect" />
|
||||
</template>
|
||||
</editCanvas>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div class="gallery_btn" @click="saveCanvas">Save</div>
|
||||
<div class="gallery_btn">Share</div>
|
||||
<div class="gallery_btn" @click="exportElement">Export</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,10 +76,12 @@ 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";
|
||||
import ExistsImageList from "@/component/Canvas/ExistsImageList/index.vue";
|
||||
import JSZip, { forEach } from "jszip";
|
||||
|
||||
export default defineComponent({
|
||||
components:{
|
||||
toProductRelight,poseTransfer,editCanvas
|
||||
toProductRelight,poseTransfer,editCanvas,ExistsImageList
|
||||
},
|
||||
props:{
|
||||
},
|
||||
@@ -83,6 +95,8 @@ export default defineComponent({
|
||||
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
||||
createProbject:inject('createProbject',()=>{}) as any,
|
||||
likeDesignList:[],
|
||||
canvasSelectList:[] as any,
|
||||
canvasDetailData:null as any,
|
||||
})
|
||||
const dataDom = reactive({
|
||||
toProduct:null as any,
|
||||
@@ -93,8 +107,10 @@ export default defineComponent({
|
||||
const init = (value:any,list:any)=>{
|
||||
data.designTools = true
|
||||
data.openType = value
|
||||
if(value == 'editCanvas')
|
||||
return
|
||||
if(value == 'editCanvas'){
|
||||
getSelectCanvasImg()
|
||||
return
|
||||
}
|
||||
data.likeDesignList = list
|
||||
nextTick(()=>{
|
||||
let fileList = [] as any
|
||||
@@ -118,13 +134,180 @@ export default defineComponent({
|
||||
dataDom[value].openSetData(fileList)
|
||||
})
|
||||
}
|
||||
|
||||
let cleardata = async ()=>{
|
||||
data.openType = ''
|
||||
data.likeDesignList = []
|
||||
data.designTools = false
|
||||
}
|
||||
const designLike = ()=>{
|
||||
|
||||
}
|
||||
|
||||
|
||||
//画布相关
|
||||
const getSelectCanvasImg = ()=>{
|
||||
let allCollection = store.state.UploadFilesModule.allBoardData
|
||||
let allCollectionStr = [
|
||||
{value:'disposeMoodboard',name:'Entirety Moodboard'},
|
||||
{value:'moodboardFiles',name:'Moodboard'},
|
||||
{value:'printboardFiles',name:'Printboard'},
|
||||
{value:'sketchboardFiles',name:'Sketchboard'},
|
||||
]
|
||||
allCollectionStr.forEach((itemStr:any)=>{
|
||||
let list = [] as any
|
||||
allCollection[itemStr.value].forEach((imgItem)=>{
|
||||
list.push({url:imgItem.url || imgItem.imgUrl})
|
||||
})
|
||||
let obj = {
|
||||
value:itemStr.value,
|
||||
type:itemStr.name,
|
||||
imgList:list,
|
||||
}
|
||||
if(list.length > 0){
|
||||
data.canvasSelectList.push(obj)
|
||||
}
|
||||
})
|
||||
let designData = store.state.HomeStoreModule.likeDesignCollectionList
|
||||
if(designData.length > 0){
|
||||
let list = [] as any
|
||||
designData.forEach((item:any)=>{
|
||||
list.push({url:item.designOutfitUrl || item.url})
|
||||
if(item.childList.length > 0){
|
||||
item.childList.forEach((childItem)=>{
|
||||
list.push({url:childItem.designOutfitUrl || childItem.url})
|
||||
})
|
||||
}
|
||||
})
|
||||
let obj = {
|
||||
value:'design',
|
||||
type:'Design',
|
||||
imgList:list
|
||||
}
|
||||
if(list.length > 0){
|
||||
data.canvasSelectList.push(obj)
|
||||
}
|
||||
}
|
||||
let mannquinList = data.selectObject.model
|
||||
let list = [] as any
|
||||
mannquinList.forEach((item:any)=>{
|
||||
list.push({url:item.url})
|
||||
})
|
||||
let obj = {
|
||||
value:'mannquin',
|
||||
type:'Mannquin',
|
||||
imgList:list
|
||||
}
|
||||
if(list.length > 0){
|
||||
data.canvasSelectList.push(obj)
|
||||
}
|
||||
console.log(mannquinList)
|
||||
}
|
||||
const handleImageSelect = (value:any)=>{
|
||||
dataDom.editCanvas.addImageToLayer(value.url)
|
||||
}
|
||||
const saveCanvas = ()=>{
|
||||
let canvasJSON = dataDom.editCanvas.getJSON()
|
||||
console.log(JSON.parse(canvasJSON))
|
||||
if(!canvasJSON)return
|
||||
let blob = new Blob([canvasJSON], { type: "application/json" });
|
||||
let formData = new FormData();
|
||||
formData.append("file", blob, "data.json");
|
||||
formData.append("module", "canvas");
|
||||
formData.append("projectId", store.state.Workspace.probjects.id)
|
||||
let config = {
|
||||
headers: { "Content-Type": "multipart/form-data", Accept: "*/*" },
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.exportSave, formData, config).then(
|
||||
(rv) => {
|
||||
console.log(rv)
|
||||
}
|
||||
);
|
||||
}
|
||||
const exportElement = async ()=>{
|
||||
//设置导出
|
||||
console.log(data.canvasDetailData)
|
||||
let img = [] as any;
|
||||
if(data.canvasDetailData.commandManager.undoStack.length > 0){
|
||||
await dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:false}).then((rv:any)=>{
|
||||
var imageDataURL = rv
|
||||
img.push({
|
||||
imgUrl: imageDataURL,
|
||||
name: "collection.png",
|
||||
});
|
||||
})
|
||||
}
|
||||
for(let i = 0; i < data.canvasSelectList.length;i++){
|
||||
let item = data.canvasSelectList[i]
|
||||
console.log(item)
|
||||
item.imgList.forEach((imgItem:any,index:any)=>{
|
||||
let nameTail = imgItem.url?.split(".").pop().split("?").shift();
|
||||
img.push({
|
||||
imgUrl:imgItem.url,
|
||||
name:`${item.type}${index}.${nameTail}`
|
||||
})
|
||||
})
|
||||
}
|
||||
console.log(img)
|
||||
if(img.length>0)downImg(img);
|
||||
}
|
||||
let getImgArrayBuffer = (url) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
//通过请求获取文件blob格式
|
||||
let xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open("GET", url, true);
|
||||
xmlhttp.responseType = "blob";
|
||||
xmlhttp.withCredentials = false;
|
||||
xmlhttp.onload = function () {
|
||||
if (this.status == 200) {
|
||||
resolve(this.response);
|
||||
} else {
|
||||
reject(this.status);
|
||||
}
|
||||
};
|
||||
xmlhttp.send();
|
||||
});
|
||||
};
|
||||
let downImg = (imagesParams:any) => {
|
||||
let zip = new JSZip();
|
||||
let cache = {};
|
||||
let promises = [];
|
||||
for (let item of imagesParams) {
|
||||
const promise = getImgArrayBuffer(item.imgUrl).then((value) => {
|
||||
// 下载文件, 并存成ArrayBuffer对象(blob)
|
||||
zip.file(item.name, value, { binary: true }); // 逐个添加文件
|
||||
cache[item.title] = value;
|
||||
})
|
||||
promises.push(promise);
|
||||
}
|
||||
Promise.all(promises)
|
||||
.then(() => {
|
||||
function downloadBlob(blob, filename) {
|
||||
const link = document.createElement('a');
|
||||
const url = URL.createObjectURL(blob);
|
||||
link.href = url;
|
||||
link.download = filename;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
zip.generateAsync({ type: "blob" }).then((content) => {
|
||||
// 生成二进制流
|
||||
downloadBlob(content,'DesignFiles')
|
||||
// FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件 自定义文件名
|
||||
data.isShowMark = false;
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
.catch((res) => {
|
||||
// message.warning(t('HomeView.jsContent3'));
|
||||
data.isShowMark = false;
|
||||
});
|
||||
};
|
||||
const changeCanvas = (value:any)=>{
|
||||
data.canvasDetailData = value
|
||||
}
|
||||
return{
|
||||
...toRefs(dataDom),
|
||||
@@ -132,6 +315,10 @@ export default defineComponent({
|
||||
cleardata,
|
||||
init,
|
||||
designLike,
|
||||
handleImageSelect,
|
||||
saveCanvas,
|
||||
exportElement,
|
||||
changeCanvas,
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
@@ -176,15 +363,27 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
> .collectionBox{
|
||||
height: 100%;
|
||||
&.editCanvas{
|
||||
padding-top: 5rem;
|
||||
padding-right: 5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> .canvasBox{
|
||||
height: 100%;
|
||||
flex:1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
&.editCanvas{
|
||||
padding-top: 5rem;
|
||||
display: flex;
|
||||
}
|
||||
> .canvas{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
> .btn{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
> div{
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user