Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite

This commit is contained in:
李志鹏
2026-01-15 17:15:21 +08:00
8 changed files with 389 additions and 185 deletions

View File

@@ -61,12 +61,10 @@
<model <model
ref="model" ref="model"
:key="positionKey" :key="positionKey"
@canvasReload="canvasReload"
@detailEdit="detailEdit" @detailEdit="detailEdit"
@addSketch="()=>isEditPattern.value = ''" @addSketch="()=>isEditPattern.value = ''"
@revocation="revocation" @revocation="revocation"
@oppositeRevocation="oppositeRevocation" @oppositeRevocation="oppositeRevocation"
@modelOnLoad="modelOnLoad"
@sketchSysToLibrary="sketchSysToLibrary" @sketchSysToLibrary="sketchSysToLibrary"
></model> ></model>
<div class="btn"> <div class="btn">
@@ -171,12 +169,11 @@ export default defineComponent({
fun:null, fun:null,
}, },
positionKey:0, positionKey:0,
isUndividedLayerWithSinglePrint:false,
detailLeftColorKey:0, detailLeftColorKey:0,
}) })
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{ watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id) detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
if(newValue?.undividedLayer)newValue.undividedLayer_ = newValue.undividedLayer detailData.canvasKey += 1
// privewDetail(oldValue) // privewDetail(oldValue)
},{immediate: true}) },{immediate: true})
@@ -198,6 +195,11 @@ export default defineComponent({
detailData.loadingShow = true detailData.loadingShow = true
Https.axiosGet(url).then( Https.axiosGet(url).then(
async (rv: any) => { async (rv: any) => {
//清除画布JSON数据
sessionStorage.removeItem('canvasList');
sessionStorage.removeItem('revocation');
sessionStorage.removeItem('oppositeRevocation');
sessionStorage.setItem('key', 'value');
store.commit('DesignDetail/setDesignDetail',rv) store.commit('DesignDetail/setDesignDetail',rv)
rv.clothes.forEach((item:any)=>{ rv.clothes.forEach((item:any)=>{
let a let a
@@ -231,25 +233,17 @@ export default defineComponent({
element.designType = 'Library' element.designType = 'Library'
} }
}); });
if(!item.layersObject[0].undividedLayerWithSinglePrint){
detailData.isUndividedLayerWithSinglePrint = true
}
}) })
detailData.singleOveral.value = rv.singleOverall detailData.singleOveral.value = rv.singleOverall
detailData.designDetailShow = true detailData.designDetailShow = true
// this.deleteShow = false // this.deleteShow = false
initialize()
setRevocation() setRevocation()
if(rv.singleOverall == "single"){ if(rv.singleOverall == "single"){
store.commit('DesignDetail/setDesignColthes',rv.clothes[0].id) store.commit('DesignDetail/setDesignColthes',rv.clothes[0].id)
modelOnLoad()
} }
if(detailData.isUndividedLayerWithSinglePrint){ detailData.loadingShow = false
}else{
detailData.loadingShow = false
}
resolve(rv) resolve(rv)
} }
).catch(rv=>{ ).catch(rv=>{
@@ -259,12 +253,6 @@ export default defineComponent({
}) })
} }
const initialize = ()=>{//design后初始化
sessionStorage.removeItem('oppositeRevocation')
sessionStorage.removeItem('revocation')
}
//撤回 //撤回
const setRevocation = ()=>{//设置撤销 const setRevocation = ()=>{//设置撤销
let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail)) let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
@@ -331,7 +319,7 @@ export default defineComponent({
}) })
for(let i = 0;i<list.length;i++){ for(let i = 0;i<list.length;i++){
detailData.selectDetail detailData.selectDetail
let {scale,offset,priority,transpose,rotate,maskUrl,maskMinioUrl} = await (detailDom.model as any).getSubmitData(list[i],detailData.isUndividedLayerWithSinglePrint) let {scale,offset,priority,transpose,rotate,maskUrl,maskMinioUrl} = await (detailDom.model as any).getSubmitData(list[i])
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail() if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
let gradient = null let gradient = null
let newData = list[i]?.newDetail?.[detailData.currentDetailType] let newData = list[i]?.newDetail?.[detailData.currentDetailType]
@@ -354,6 +342,32 @@ export default defineComponent({
detailData.selectDetail.maskUrl = '' detailData.selectDetail.maskUrl = ''
detailData.selectDetail.maskMinioUrl = '' detailData.selectDetail.maskMinioUrl = ''
} }
function isNetworkPath(str) {
if (typeof str !== 'string' || str.trim() === '') {
return false;
}
const urlPatterns = [
/^https?:\/\//i, // http:// 或 https://
/^ftp:\/\//i, // ftp://
/^ws:\/\//i, // ws://
/^wss:\/\//i, // wss://
/^\/\//, // 协议相对路径 //example.com
/^data:/i, // data:image/png;base64,...这是Base64不是网络路径
];
// 排除data:URL这实际上是Base64
if (str.startsWith('data:')) {
return false;
}
return urlPatterns.some(pattern => pattern.test(str));
}
const printObjectToJSON = (list:any)=>{
if(list?.length > 0){
list.forEach((item:any)=>{
if(item.object)item.object = JSON.stringify(item.object)
})
}
}
let data:any = { let data:any = {
changed:false, changed:false,
color, color,
@@ -361,7 +375,7 @@ export default defineComponent({
id:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.id:list[i].id, id:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.id:list[i].id,
maskMinioUrl:((newData && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskMinioUrl, maskMinioUrl:((newData && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskMinioUrl,
// maskUrl:'', // maskUrl:'',
maskUrl:((newData && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskUrl, maskUrl:list[i]?.maskUrl || '',
// offset:[ // offset:[
// -233.13985, // -233.13985,
// 406.90964 // 406.90964
@@ -369,7 +383,7 @@ export default defineComponent({
offset, offset,
transpose, transpose,
rotate, rotate,
partialDesign:(detailData.currentDetailType == 'sketch' || detailData.isEditPattern.value == 'editSketch')?{}:list[i].partialDesign, partialDesign:list[i].partialDesign,
// partialDesign:detailData.isEditPattern.value?list[i].partialDesign:{}, // partialDesign:detailData.isEditPattern.value?list[i].partialDesign:{},
path:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.minIOPath:list[i].minIOPath, path:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.minIOPath:list[i].minIOPath,
printObject:(newData && detailData.currentDetailType == 'print' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]}, printObject:(newData && detailData.currentDetailType == 'print' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
@@ -384,6 +398,8 @@ export default defineComponent({
trims:(newData && detailData.currentDetailType == 'element' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]}, trims:(newData && detailData.currentDetailType == 'element' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
accessory:(newData && detailData.currentDetailType == 'accessory' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]}, accessory:(newData && detailData.currentDetailType == 'accessory' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
} }
data.printObject.prints = printObjectToJSON(data.printObject.prints)
data.trims.prints = printObjectToJSON(data.trims.prints)
if((detailData.isEditPattern.value && list[i].color?.gradient) || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){ if((detailData.isEditPattern.value && list[i].color?.gradient) || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){
gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
gradient.colorImg = await setGradual(gradient,320,700) gradient.colorImg = await setGradual(gradient,320,700)
@@ -398,7 +414,7 @@ export default defineComponent({
let workspace = store.state.Workspace.probjects let workspace = store.state.Workspace.probjects
if(!detailData?.selectDetail?.path && !detailData?.selectDetail?.newDetail?.sketch?.minIOPath)return if(!detailData?.selectDetail?.path && !detailData?.selectDetail?.newDetail?.sketch?.minIOPath)return
let clothes:any let clothes:any
if(detailData.currentDetailType == 'models' || detailData.isUndividedLayerWithSinglePrint){ if(detailData.currentDetailType == 'models'){
clothes = await setClothes(detailData.designDetail.clothes,str) clothes = await setClothes(detailData.designDetail.clothes,str)
}else{ }else{
clothes = await setClothes([detailData.selectDetail],str) clothes = await setClothes([detailData.selectDetail],str)
@@ -412,6 +428,7 @@ export default defineComponent({
sketchString:'', sketchString:'',
modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'', modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'', modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
designType:detailData.selectDetail.id?'merage':'default',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
processId:userDetail.value.userId, processId:userDetail.value.userId,
probjectId:store.state.Workspace.probjects.id, probjectId:store.state.Workspace.probjects.id,
@@ -428,7 +445,6 @@ export default defineComponent({
detailData.selectDetail.sketchString = null detailData.selectDetail.sketchString = null
store.commit('DesignDetail/setPraeview',value) store.commit('DesignDetail/setPraeview',value)
detailData.loadingShow = false detailData.loadingShow = false
detailData.isUndividedLayerWithSinglePrint = false
canvasReload() canvasReload()
// setRevocation() // setRevocation()
}).catch(res=>{ }).catch(res=>{
@@ -447,13 +463,21 @@ export default defineComponent({
sketchString:'', sketchString:'',
modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'', modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'', modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
designType:detailData.selectDetail.id?'merage':'default',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
processId:userDetail.value.userId, processId:userDetail.value.userId,
probjectId:store.state.Workspace.probjects.id, probjectId:store.state.Workspace.probjects.id,
} }
detailData.loadingShow = true detailData.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{ Https.axiosPost(Https.httpUrls.designSingle, data).then(async (rv)=>{
saveCanvasJSONToSession()
// store.commit('DesignDetail/setPraeview',rv) // store.commit('DesignDetail/setPraeview',rv)
const sessionCanvasList = sessionStorage.getItem('canvasList');
const canvasList = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
for (let i = 0; i < canvasList.length; i++) {
const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasList[i].id);
if(index>-1)await detailDom.canvasBox.saveCanvas(canvasList[i])
}
let designCollectionList = store.state.HomeStoreModule.designCollectionList let designCollectionList = store.state.HomeStoreModule.designCollectionList
let likeDesignCollectionList = store.state.HomeStoreModule.likeDesignCollectionList let likeDesignCollectionList = store.state.HomeStoreModule.likeDesignCollectionList
designCollectionList.forEach((item:any) => { designCollectionList.forEach((item:any) => {
@@ -503,19 +527,29 @@ export default defineComponent({
front.imageUrl = rv.targetFrontUrl front.imageUrl = rv.targetFrontUrl
back.imageUrl = rv.targetBackUrl back.imageUrl = rv.targetBackUrl
detailData.selectDetail.undividedLayerWithSinglePrint = partialDesign
store.commit('DesignDetail/canvasPreviewUpdata',{type:detailData.isEditPattern.value?'all':detailData.currentDetailType,callBack:setRevocation}) store.commit('DesignDetail/canvasPreviewUpdata',{type:detailData.isEditPattern.value?'all':detailData.currentDetailType,callBack:setRevocation})
}) })
} }
img.src = detailData.selectDetail.path img.src = detailData.selectDetail.path
saveCanvasJSONToSession()
} }
} }
const modelOnLoad = ()=>{ const saveCanvasJSONToSession = ()=>{
if(!detailData.isUndividedLayerWithSinglePrint)return let canvasJSON = detailDom.canvasBox.getCanvasJSON()
setTimeout(()=>{ const sessionCanvasList = sessionStorage.getItem('canvasList');
let data = getSubmitData('sub') const list = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
store.dispatch('DesignDetail/setSubmit',data) let index = -1
list.forEach((item:any,i:number)=>{
if(item.id == detailData.selectDetail.id){
index = i
}
}) })
if(index < 0){
list.push({id:detailData.selectDetail.id,canvasJSON:canvasJSON})
}else{
list[index].canvasJSON = canvasJSON
}
sessionStorage.setItem('canvasList', JSON.stringify(list));
} }
const detailEdit = async (str:any)=>{ const detailEdit = async (str:any)=>{
if(str){ if(str){
@@ -574,10 +608,13 @@ export default defineComponent({
} }
if(detailData.currentDetailType == 'color'){ if(detailData.currentDetailType == 'color'){
let color = detailData.selectDetail.newDetail?.color let color = detailData.selectDetail.newDetail?.color
console.log(color)
// let colorData:any = await getColorName(color?.rgba) // let colorData:any = await getColorName(color?.rgba)
if(detailData.selectDetail.newDetail?.color?.rgba?.r){ if(detailData.selectDetail.newDetail?.color){
color.rgba = {r:color.r,g:color.g,b:color.b,a:color.a} if(color.r){
color.rgba = {r:color.r,g:color.g,b:color.b,a:color.a}
}else{
color.rbga = {}
}
otherData.color = color otherData.color = color
} }
} }
@@ -685,7 +722,6 @@ export default defineComponent({
oppositeRevocation, oppositeRevocation,
detailEdit, detailEdit,
canvasReload, canvasReload,
modelOnLoad,
sketchSysToLibrary, sketchSysToLibrary,
setSloganData, setSloganData,
updateOtherLayers,//更新到画布图层 再canvasInit中执行 updateOtherLayers,//更新到画布图层 再canvasInit中执行

View File

@@ -5,14 +5,13 @@
<div class="canvasContent" ref="canvasContent"> <div class="canvasContent" ref="canvasContent">
<div class="content-bottom" ref="canvasContent"> <div class="content-bottom" ref="canvasContent">
<div class="contet"> <div class="contet">
<!-- :clothingImageUrl="selectDetail?.undividedLayerWithSinglePrint || selectDetail.undividedLayer || selectDetail.path" -->
<div class="canvas" :class="{'active': currentView === 'canvasEditor'}"@click.stop> <div class="canvas" :class="{'active': currentView === 'canvasEditor'}"@click.stop>
<editCanvas v-if="canvasLoad" :config="canvasConfig" <editCanvas v-if="canvasLoad" :config="canvasConfig"
@canvasInit="canvasInit" @canvasInit="editSketchCanvasInit"
is-edit is-edit
:clothingMinIOPath="selectDetail.minIOPath" :clothingMinIOPath="selectDetail.minIOPath"
:clothingImageUrl="selectDetail.path" :clothingImageUrl="selectDetail.path"
:clothingImageUrl2="selectDetail.undividedLayer_" :clothingImageUrl2="selectDetail.layersObject[0].maskUrl"
showFixedLayer showFixedLayer
:canvasJSON="canvasJSON" :canvasJSON="canvasJSON"
@canvasLoadJsonSuccess="canvasLoadJsonSuccess" @canvasLoadJsonSuccess="canvasLoadJsonSuccess"
@@ -26,7 +25,7 @@
</div> </div>
<div class="editFrontBack" v-if="currentView === 'redGreenExample'" @click.stop> <div class="editFrontBack" v-if="currentView === 'redGreenExample'" @click.stop>
<editCanvas v-if="canvasLoad" :config="canvasConfig" <editCanvas v-if="canvasLoad" :config="canvasConfig"
@canvasInit="canvasInit" @canvasInit="editFrontBackCanvasInit"
:enabledRedGreenMode="true" :enabledRedGreenMode="true"
:clothingImageUrl="selectDetail.path" :clothingImageUrl="selectDetail.path"
:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl" :redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
@@ -151,7 +150,7 @@ export default defineComponent({
}else{ }else{
if(detailData.currentView === 'redGreenExample'){ if(detailData.currentView === 'redGreenExample'){
nextTick(()=>{ nextTick(()=>{
setCanvas(detailData.selectDetail?.undividedLayerWithSinglePrint || detailData.selectDetail.undividedLayer || detailData.selectDetail.path).then(()=>{ setCanvas(detailData.selectDetail.path).then(()=>{
// detailData.canvasLoad = true // detailData.canvasLoad = true
}) })
}) })
@@ -167,18 +166,25 @@ export default defineComponent({
const updateOtherLayers = (obj:any)=>{ const updateOtherLayers = (obj:any)=>{
if(!detailDom.editCanvas)return if(!detailDom.editCanvas)return
return new Promise(async (res,reject)=>{ return new Promise(async (res,reject)=>{
console.log(obj,'====')
await detailDom?.editCanvas.updateOtherLayers(obj) await detailDom?.editCanvas.updateOtherLayers(obj)
res('') res('')
}) })
} }
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{ const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
// if(!detailDom.editCanvas)return // if(!detailDom.editCanvas)return
return new Promise((res,reject)=>{ return new Promise(async (res,reject)=>{
detailDom.editCanvas.exportImage({isContainFixedOther:true,isContainFixed:true}).then((rv)=>{ await detailDom.editCanvas.exportImage({isContainFixed:true}).then((rv)=>{
if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
res('')
}) })
//包含平铺图层 single+overall模式的图
await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:true,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
oldSelectDetail.undividedLayerWithSinglePrint = rv
})
//不包含平铺图层overall模式的图
await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:false,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
oldSelectDetail.undividedLayer = rv
})
res('')
}) })
} }
const getCanvasElement = ()=>{ const getCanvasElement = ()=>{
@@ -247,7 +253,7 @@ export default defineComponent({
const frontBackChange = (value:any)=>{ const frontBackChange = (value:any)=>{
let full = detailData.frontBack.front[detailData.imgDomIndex]?.undividedLayerWithSinglePrint || detailData.frontBack.front[detailData.imgDomIndex].undividedLayer || detailData.selectDetail.path let full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.path
let size = { let size = {
...detailData.canvasConfig, ...detailData.canvasConfig,
} }
@@ -268,7 +274,13 @@ export default defineComponent({
}) })
} }
const canvasInit = (value:any)=>{ const editSketchCanvasInit = (value:any)=>{
detailData.canvasInstance = value
detailData.getCanvasIfEdit.fun = getCanvasLength
detailData.isShowMark = false
console.log('初始化完成')
}
const editFrontBackCanvasInit = (value:any)=>{
detailData.canvasInstance = value detailData.canvasInstance = value
detailData.getCanvasIfEdit.fun = getCanvasLength detailData.getCanvasIfEdit.fun = getCanvasLength
detailData.isShowMark = false detailData.isShowMark = false
@@ -277,20 +289,19 @@ export default defineComponent({
const getCanvasLength = ()=>{ const getCanvasLength = ()=>{
return detailData.canvasInstance?.commandManager?.undoStack?.length return detailData.canvasInstance?.commandManager?.undoStack?.length
} }
const saveCanvas = async (type:string = '')=>{ const getCanvasJSON = ()=>{
if(type !== 'auto'){ if(!detailDom?.editCanvas)return ''
detailData.isShowMark = true return detailDom?.editCanvas?.getJSON()
} }
const index = detailData.designDetail.clothes.findIndex(item => item.id === detailData.selectDetail.id); const saveCanvas = async (canvasData:any)=>{
const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasData.id);
await new Promise<void>((resolve, reject) => { await new Promise<void>((resolve, reject) => {
if(!detailDom?.editCanvas)return resolve() let canvasJSON = JSON.parse(canvasData.canvasJSON)
let canvasJSON = detailDom?.editCanvas?.getJSON() if(!canvasJSON)return resolve()
let canvasData = JSON.parse(canvasJSON) // canvasData.canvas.objects.forEach((objectsItem:any) => {
if(!canvasData)return resolve() // if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
canvasData.canvas.objects.forEach((objectsItem:any) => { // });
if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src) let blob = new Blob([JSON.stringify(canvasJSON)], { type: "application/json" });
});
let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
let formData = new FormData(); let formData = new FormData();
formData.append("file", blob, "data.json"); formData.append("file", blob, "data.json");
formData.append("designItemDetailId", detailData.selectDetail.id); formData.append("designItemDetailId", detailData.selectDetail.id);
@@ -321,6 +332,11 @@ export default defineComponent({
const canvasLoadJsonSuccess = async ()=>{ const canvasLoadJsonSuccess = async ()=>{
let otherData = await props.updateOtherLayers() let otherData = await props.updateOtherLayers()
updateOtherLayers(otherData) updateOtherLayers(otherData)
if(detailData.selectDetail.undividedLayerColor){
await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsRepeat:false,isPrintTrimsNoRepeat:false,isContainNormalLayer:false}).then((rv)=>{
detailData.selectDetail.undividedLayerColor = rv
})
}
} }
const submitBase64Data = ()=>{ const submitBase64Data = ()=>{
@@ -343,6 +359,12 @@ export default defineComponent({
onMounted(()=>{ onMounted(()=>{
nextTick(async ()=>{ nextTick(async ()=>{
// detailData.currentView = 'canvasEditor' // detailData.currentView = 'canvasEditor'
const sessionCanvasList = sessionStorage.getItem('canvasList');
const canvasList = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
let canvasIndex = canvasList.findIndex(item => item.id === detailData.selectDetail.id);
if(canvasIndex>1){
detailData.canvasJSON = canvasList[canvasIndex].canvasJSON
}
if(detailData.selectDetail.canvasId){ if(detailData.selectDetail.canvasId){
detailData.isShowMark = true detailData.isShowMark = true
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
@@ -360,7 +382,7 @@ export default defineComponent({
}); });
}) })
} }
setCanvas(detailData.selectDetail?.undividedLayerWithSinglePrint || detailData.selectDetail.undividedLayer || detailData.selectDetail.path).then(()=>{ setCanvas(detailData.selectDetail.path).then(()=>{
detailData.canvasLoad = true detailData.canvasLoad = true
}) })
}) })
@@ -372,12 +394,14 @@ export default defineComponent({
privewDetail, privewDetail,
setFrontBackColor, setFrontBackColor,
frontBackChange, frontBackChange,
canvasInit, editSketchCanvasInit,
editFrontBackCanvasInit,
saveCanvas, saveCanvas,
getCanvasElement, getCanvasElement,
updateOtherLayers, updateOtherLayers,
canvasLoadJsonSuccess, canvasLoadJsonSuccess,
submitBase64Data, submitBase64Data,
getCanvasJSON,
} }
}, },
provide() { provide() {

View File

@@ -16,20 +16,21 @@
</div> </div>
</div> </div>
<div class="printElementListBorder" :class="{'single':stateOverallSingle == 'single'}"> <div class="printElementListBorder single">
<div class="printElementList" ref="printElementList" :style="{height:stateOverallSingle == 'overall'?'14rem':'10rem'}"> <div class="printElementList" ref="printElementList" :style="{height:'10rem'}">
<div class="itemList" :style="{width:stateOverallSingle == 'single'?(prentWidth || 0) : '100%'}"> <div class="itemList" :style="{width:(prentWidth || 0)}">
<div class="imgItem" <div class="imgItem"
v-if="stateOverallSingle == 'single'" v-for="item,index in printStyleList[type][stateOverallSingle]"
v-for="item in printStyleList[type][stateOverallSingle]"
:key="item" :key="item"
:class="{active:stateOverallSingle == 'overall' && index == imgDomIndex}"
@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')" @mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')"
@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')" @touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
@click.stop="overallSetIndex(item)"
> >
<img :src="item.path" alt=""> <img :src="item.path" alt="">
<i class="fi fi-rr-trash" @click="navDelete(item)"></i> <i class="fi fi-rr-trash" @click.stop="navDelete(item)"></i>
</div> </div>
<div class="imgItem" <!-- <div class="imgItem"
v-if="stateOverallSingle == 'overall'" v-if="stateOverallSingle == 'overall'"
v-for="item in printStyleList[type][stateOverallSingle]" v-for="item in printStyleList[type][stateOverallSingle]"
:key="item" :key="item"
@@ -37,11 +38,11 @@
> >
<img :src="item.path" alt=""> <img :src="item.path" alt="">
<i class="fi fi-rr-trash" @click="navDelete(item)"></i> <i class="fi fi-rr-trash" @click="navDelete(item)"></i>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
<div v-show="stateOverallSingle != 'single'" class="habit_System_Designer"> <div v-if="imgDomIndex >= 0" v-show="stateOverallSingle != 'single'" class="habit_System_Designer">
<!-- <a-slider id="system_silder" <!-- <a-slider id="system_silder"
class="system_silder" class="system_silder"
:min="20" :min="20"
@@ -57,10 +58,11 @@
> >
<template #content> <template #content>
<repeat-setting <repeat-setting
:object="overallDetail" :object="printStyleList[type].overall[imgDomIndex]"
@inputFillAngle="inputFillAngle" @inputFillAngle="inputFillAngle"
@inputFillOffset="inputFillOffset" @inputFillOffset="inputFillOffset"
@inputFillScale="inputFillScale" @inputFillScale="inputFillScale"
:sketchPath="selectDetail.path"
@inputFill_Gap=" @inputFill_Gap="
(x, y) => inputFill_Gap(x, y)" (x, y) => inputFill_Gap(x, y)"
/> />
@@ -74,12 +76,11 @@
<div class="designOpenrtion_centent" id="designOpenrtionCentent"> <div class="designOpenrtion_centent" id="designOpenrtionCentent">
<!-- <div class="designOpenrtion_imgMask" :style="sketch"> --> <!-- <div class="designOpenrtion_imgMask" :style="sketch"> -->
<div class="designOpenrtion_imgMask"> <div class="designOpenrtion_imgMask">
<div class="designOpenrtion_print"> <div class="designOpenrtion_print" v-if="stateOverallSingle == 'single'">
<div <div
v-for="item,index in printStyleList[type][stateOverallSingle]" v-for="item,index in printStyleList[type][stateOverallSingle]"
:key="item" :key="item"
v-if="stateOverallSingle == 'single'" :style="{...item?.pattern?.style,opacity:item?.object?.opacity || 1}"
:style="item?.pattern?.style"
@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
class="modal_imgItem" class="modal_imgItem"
ref="content" ref="content"
@@ -88,7 +89,7 @@
</div> </div>
</div> </div>
<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg"> --> <!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg"> -->
<img :src="selectDetail?.undividedLayerWithSinglePrint?selectDetail.undividedLayerWithSinglePrint:selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg" @load="()=>isSketchLoad = true"> <img :src="stateOverallSingle == 'single'?(selectDetail.undividedLayer||selectDetail.path):(selectDetail.undividedLayerColor || selectDetail.path)" alt="" class="designOpenrtion_sketch" ref="sketchImg" @load="()=>isSketchLoad = true">
<img :src="selectDetail.sketchMask" alt="" class="designOpenrtion_sketchMask" ref="sketchMask"> <img :src="selectDetail.sketchMask" alt="" class="designOpenrtion_sketchMask" ref="sketchMask">
<div class="designOpenrtion_btn" v-if="stateOverallSingle == 'single'" > <div class="designOpenrtion_btn" v-if="stateOverallSingle == 'single'" >
<ul v-for="item,index in printStyleList[type][stateOverallSingle]" :key="item" :class="{active:item?.pattern.designOpenrtionBtn?item?.pattern.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.pattern.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"> <ul v-for="item,index in printStyleList[type][stateOverallSingle]" :key="item" :class="{active:item?.pattern.designOpenrtionBtn?item?.pattern.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.pattern.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
@@ -109,7 +110,7 @@
</ul> --> </ul> -->
</div> </div>
<div class="designOpenrtion_pingpu" v-else> <div class="designOpenrtion_pingpu" v-else>
<pingpu v-if="overallDetail.url" v-bind="overallDetail"></pingpu> <pingpu :list="printStyleList[type].overall" ref="pingpuRef" @change-canvas="updateCanvas"></pingpu>
</div> </div>
</div> </div>
</div> </div>
@@ -148,21 +149,13 @@ export default defineComponent({
const editPrintElementDom = reactive({ const editPrintElementDom = reactive({
imgDom:null as any, imgDom:null as any,
sketchImg:null as any, sketchImg:null as any,
pingpuRef:null as any,
}) })
const editPrintElementData = reactive({ const editPrintElementData = reactive({
selectDetail:computed(()=>store.state.DesignDetail.selectDetail), selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType), currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement), currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
systemDesignerPercentage:0, systemDesignerPercentage:0,
overallDetail:{
url: '',
offsetX: 0, // px
offsetY: 0, // px
angle: 0, // 角度
scale: 100, // %
gapX: 0, // px
gapY: 0, // px
},
printStyleList:{ printStyleList:{
print:{ print:{
single:[], single:[],
@@ -172,9 +165,9 @@ export default defineComponent({
single:[], single:[],
} }
} as any, } as any,
stateOverallSingle:'single', stateOverallSingle:'single' as any,
type:props.type, type:props.type,
imgDomIndex:0, imgDomIndex:-1,
direction:'',//判断点的那条边 direction:'',//判断点的那条边
printZIndex:2,//印花优先级 printZIndex:2,//印花优先级
sketchWH:{ sketchWH:{
@@ -186,6 +179,13 @@ export default defineComponent({
printElementList:null as any, printElementList:null as any,
isSketchLoad:false, isSketchLoad:false,
}) })
const ACTIONS = {
ADD: "add",
UPDATE: "update",
DELETE: "delete",
SELECT: "select",
SORT: "sort",
};
const collItemSize = reactive({ const collItemSize = reactive({
collValue:18, collValue:18,
num:1, num:1,
@@ -205,13 +205,14 @@ export default defineComponent({
}) })
const setOveralSingle = ()=>{ const setOveralSingle = ()=>{
setItemPosition() setItemPosition()
} }
const formatter = (value:any)=>{ const formatter = (value:any)=>{
return `${value}%`; return `${value}%`;
} }
const deletePrint = ()=>{ const deletePrint = ()=>{
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1) if(editPrintElementData.imgDomIndex>-1)editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].splice(editPrintElementData.imgDomIndex,1)
} }
const setScaleLocation:any = (item:any)=>{ const setScaleLocation:any = (item:any)=>{
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@@ -265,7 +266,6 @@ export default defineComponent({
let scale,location let scale,location
let style = item.pattern.style let style = item.pattern.style
let sketchWH = editPrintElementData.sketchWH.scale let sketchWH = editPrintElementData.sketchWH.scale
let overallDetail = {}
if(item.ifSingle){ if(item.ifSingle){
scale = [style.width.replace(/px/g,'')/(editPrintElementData.sketchWH.width),(style.height.replace(/px/g,'')/(editPrintElementData.sketchWH.height))] scale = [style.width.replace(/px/g,'')/(editPrintElementData.sketchWH.width),(style.height.replace(/px/g,'')/(editPrintElementData.sketchWH.height))]
location = [style.left.replace(/px/g,'')*sketchWH[0],style.top.replace(/px/g,'')*sketchWH[1]] location = [style.left.replace(/px/g,'')*sketchWH[0],style.top.replace(/px/g,'')*sketchWH[1]]
@@ -276,14 +276,6 @@ export default defineComponent({
scale =[ editPrintElementData.systemDesignerPercentage/100, editPrintElementData.systemDesignerPercentage/100] scale =[ editPrintElementData.systemDesignerPercentage/100, editPrintElementData.systemDesignerPercentage/100]
// scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width] // scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width]
// location = [item.pattern.style.left,item.pattern.style.top] // location = [item.pattern.style.left,item.pattern.style.top]
overallDetail = {
offsetX: editPrintElementData.overallDetail.offsetX, // px
offsetY: editPrintElementData.overallDetail.offsetY, // px
angle: editPrintElementData.overallDetail.angle, // 角度
scale: editPrintElementData.overallDetail.scale, // %
gapX: editPrintElementData.overallDetail.gapX, // px
gapY: editPrintElementData.overallDetail.gapY, // px
}
} }
let value ={ let value ={
angle : item.pattern.transform.rotateZ, angle : item.pattern.transform.rotateZ,
@@ -297,9 +289,8 @@ export default defineComponent({
minIOPath:item.minIOPath, minIOPath:item.minIOPath,
ifSingle:!!item.ifSingle, ifSingle:!!item.ifSingle,
globalCompositeOperation:'', globalCompositeOperation:'',
object:null,
// ...overallDetail,
} }
if(item.object)value.object = item.object
return value return value
} }
if(editPrintElementData.printStyleList[props.type].single.length>0){ if(editPrintElementData.printStyleList[props.type].single.length>0){
@@ -332,7 +323,6 @@ export default defineComponent({
} }
const getItemPosition = (item:any)=>{ const getItemPosition = (item:any)=>{
let left,top let left,top
if(item.ifSingle){ if(item.ifSingle){
//single //single
left = item.location[0] / editPrintElementData.sketchWH.scale[0] left = item.location[0] / editPrintElementData.sketchWH.scale[0]
@@ -362,22 +352,46 @@ export default defineComponent({
} }
editPrintElementData.printZIndex++ editPrintElementData.printZIndex++
item.pattern = pattern item.pattern = pattern
function isJSONString(str) {
try {
JSON.parse(str);
return true; // 解析成功是有效的JSON字符串
} catch (e) {
return false; // 解析失败不是有效的JSON字符串
}
}
if(item.object){
if(isJSONString(item.object)){
item.object = JSON.parse(item.object)
}
}else{
item.object = {
top: 0,
left: 0,
scaleX: 1,
scaleY: 1,
opacity: 1,
angle: 0,
flipX: false,
flipY: false,
blendMode: "multiply",
gapX: 0,
gapY: 0,
}
}
if(item.ifSingle){ if(item.ifSingle){
editPrintElementData.printStyleList[props.type].single.push(item) editPrintElementData.printStyleList[props.type].single.push(item)
}else{ }else{
editPrintElementData.printStyleList[props.type].overall = [] item.token = Date.now().toString() + (editPrintElementData.printStyleList[props.type].overall.length + '')
editPrintElementData.overallDetail = { // editPrintElementData.printStyleList[props.type].overall = []
url: item.path,
offsetX: 0, // px
offsetY: 0, // px
angle: 0, // 角度
scale: 100, // %
gapX: 0, // px
gapY: 0, // px
}
editPrintElementData.printStyleList[props.type].overall.push(item) editPrintElementData.printStyleList[props.type].overall.push(item)
editPrintElementDom.pingpuRef.updataList([
{
action: ACTIONS.ADD,
data: item,
},
]);
} }
} }
const setPosition = ()=>{ const setPosition = ()=>{
nextTick(()=>{ nextTick(()=>{
@@ -405,7 +419,7 @@ export default defineComponent({
} }
if(arr && arr.length > 0){ if(arr && arr.length > 0){
arr.forEach((item:any)=>{ arr.forEach((item:any)=>{
if(!item.ifSingle && arr.length == 1){ if(!item.ifSingle){
editPrintElementData.stateOverallSingle = 'overall', editPrintElementData.stateOverallSingle = 'overall',
state = false state = false
} }
@@ -436,7 +450,7 @@ export default defineComponent({
addPrintELement(newVal) addPrintELement(newVal)
} }
}) })
watch(()=>((editPrintElementData.selectDetail?.undividedLayer || editPrintElementData.selectDetail?.id)),(newVal)=>{ watch(()=>((editPrintElementData.selectDetail?.id)),(newVal)=>{
if(!newVal)return if(!newVal)return
editPrintElementData.isSketchLoad = false, editPrintElementData.isSketchLoad = false,
editPrintElementData.printStyleList[props.type] = { editPrintElementData.printStyleList[props.type] = {
@@ -444,27 +458,34 @@ export default defineComponent({
overall:[], overall:[],
} }
if(!editPrintElementData.selectDetail.sketchMask){ if(!editPrintElementData.selectDetail.sketchMask){
sketchToMask(newVal).then((res:any)=>{ sketchToMask(editPrintElementData.selectDetail?.layersObject[0].maskUrl).then((res:any)=>{
editPrintElementData.selectDetail.sketchMask = res editPrintElementData.selectDetail.sketchMask = res
}) })
} }
setPosition() setPosition()
},{immediate: true,}) },{immediate: true,})
watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{ watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
if(newVal == 'overall'){ let arr = editPrintElementData.printStyleList[props.type][newVal]
let overallPrint = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]?.[0] if(arr.length > 0){
if(!overallPrint?.path)return editPrintElementData.imgDomIndex = 0
editPrintElementData.overallDetail = { if(newVal == 'overall'){
url: overallPrint.path, arr.forEach((item:any,index:number) => {
offsetX: overallPrint.offsetX || 0, // px item.id_ = index
offsetY: overallPrint.offsetY || 0, // px });
angle: overallPrint.angle || 0, // 角度
scale: overallPrint.scale || 100, // %
gapX: overallPrint.gapX || 0, // px
gapY: overallPrint.gapY || 0, // px
} }
}else{
editPrintElementData.imgDomIndex = -1
} }
}) })
watch(()=>editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].length,(newVal)=>{
if(newVal > 0){
if(editPrintElementData.imgDomIndex < 0)editPrintElementData.imgDomIndex = 0
}
})
const addOverallToCanvas = ()=>{
editPrintElementDom.pingpuRef
}
//设置移动 //设置移动
const itemMoveMousedown = (index:number,event:any)=>{ const itemMoveMousedown = (index:number,event:any)=>{
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
@@ -728,7 +749,17 @@ export default defineComponent({
} }
//排序 从大到小 //排序 从大到小
const sortDesignCollection = ()=> { const sortDesignCollection = ()=> {
if(editPrintElementData.stateOverallSingle == 'overall'){
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
let tokenList = arr.map((item)=>({token:item.token,srot:item.pattern.style.zIndex}))
let tokens = tokenList.sort((a:any,b:any)=>a.srot - b.srot).map((item:any)=>item.token)
editPrintElementDom.pingpuRef.updataList([
{
action: ACTIONS.SORT,
tokens: tokens,
},
]);
}
} }
const reRange = (item:any, x:number, y:number,str?:string)=>{ const reRange = (item:any, x:number, y:number,str?:string)=>{
let elList:any = collItemSize.elList let elList:any = collItemSize.elList
@@ -771,6 +802,14 @@ export default defineComponent({
const navDelete = (item:any)=>{ const navDelete = (item:any)=>{
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle] let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
let index = arr.findIndex((arrItem:any)=>arrItem.uniqueId == item.uniqueId) let index = arr.findIndex((arrItem:any)=>arrItem.uniqueId == item.uniqueId)
if(editPrintElementData.stateOverallSingle == 'overall'){
editPrintElementDom.pingpuRef.updataList([
{
action: ACTIONS.DELETE,
token: arr[index].token,
},
]);
}
arr.splice(index,1) arr.splice(index,1)
setItemPosition() setItemPosition()
} }
@@ -817,19 +856,105 @@ export default defineComponent({
collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px' collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
moveItem() moveItem()
} }
const updateCanvas = (arr)=>{//画布操作更新对应的参数
let list = editPrintElementData.printStyleList[props.type].overall
arr.forEach((item)=>{
const obj = list.find((v) => v.token === item.token);
if (item.action === ACTIONS.UPDATE) {
if (item.action === ACTIONS.UPDATE) {
try {
const key = item.key;
const str = /^\[/.test(item.key)
? "obj" + key
: "obj." + key;
eval(`${str} = item.value`);
} catch (error) {
console.error(error);
}
}
} else if (item.action === ACTIONS.SELECT) {
overallSetIndex(obj)
}
})
}
const inputFillAngle = (angle:any)=>{ const inputFillAngle = (angle:any)=>{
editPrintElementData.overallDetail.angle = angle let arr = editPrintElementData.printStyleList[props.type].overall
arr[editPrintElementData.imgDomIndex].angle = angle
editPrintElementDom.pingpuRef.updataList([
{
action: ACTIONS.UPDATE,
token: arr[editPrintElementData.imgDomIndex].token,
key: 'angle',
value: angle,
},
]);
} }
const inputFillOffset = (offset:any)=>{ const inputFillOffset = (offset:any)=>{
editPrintElementData.overallDetail.offsetX = offset.left let arr = editPrintElementData.printStyleList[props.type].overall
editPrintElementData.overallDetail.offsetY = offset.top arr[editPrintElementData.imgDomIndex].location = [offset.left * offset.size[0] / 100,offset.top * offset.size[1] / 100]
editPrintElementDom.pingpuRef.updataList([
{
action: ACTIONS.UPDATE,
token: arr[editPrintElementData.imgDomIndex].token,
key: 'location[0]',
value: offset.left,
},
]);
editPrintElementDom.pingpuRef.updataList([
{
action: ACTIONS.UPDATE,
token: arr[editPrintElementData.imgDomIndex].token,
key: 'location[1]',
value: offset.top,
},
]);
// editPrintElementData.overallDetail.offsetX = offset.left
// editPrintElementData.overallDetail.offsetY = offset.top
} }
const inputFillScale = (scale:any)=>{ const inputFillScale = (scale:any)=>{
editPrintElementData.overallDetail.scale = scale let arr = editPrintElementData.printStyleList[props.type].overall
arr[editPrintElementData.imgDomIndex].scale = [scale,scale]
editPrintElementDom.pingpuRef.updataList([
{
action: ACTIONS.UPDATE,
token: arr[editPrintElementData.imgDomIndex].token,
key: 'scale[0]',
value: scale,
},
]);
} }
const inputFill_Gap = (x:any,y:any)=>{ const inputFill_Gap = (x:any,y:any)=>{
editPrintElementData.overallDetail.gapX = x let arr = editPrintElementData.printStyleList[props.type].overall
editPrintElementData.overallDetail.gapY = y arr[editPrintElementData.imgDomIndex].object.gapX = x
arr[editPrintElementData.imgDomIndex].object.gapY = y
editPrintElementDom.pingpuRef.updataList([
{
action: ACTIONS.UPDATE,
token: arr[editPrintElementData.imgDomIndex].token,
key: "object.gapX",
value: x,
},
]);
editPrintElementDom.pingpuRef.updataList([
{
action: ACTIONS.UPDATE,
token: arr[editPrintElementData.imgDomIndex].token,
key: "object.gapY",
value: y,
},
]);
}
const overallSetIndex = (item)=>{
if(editPrintElementData.stateOverallSingle !== 'overall')return
let arr = editPrintElementData.printStyleList[props.type].overall
let index = arr.findIndex((arrItem:any)=>arrItem.token == item.token)
editPrintElementData.imgDomIndex = index
editPrintElementDom.pingpuRef.updataList([
{
action: ACTIONS.SELECT,
token: arr[index].token,
},
]);
} }
onMounted(()=>{ onMounted(()=>{
if(props.type == 'element'){ if(props.type == 'element'){
@@ -854,10 +979,12 @@ export default defineComponent({
clearOverall, clearOverall,
designMousedown, designMousedown,
navDelete, navDelete,
updateCanvas,
inputFillAngle, inputFillAngle,
inputFillOffset, inputFillOffset,
inputFillScale, inputFillScale,
inputFill_Gap, inputFill_Gap,
overallSetIndex,
} }
}, },
directives:{ directives:{
@@ -1022,6 +1149,9 @@ export default defineComponent({
cursor: pointer; cursor: pointer;
border-radius: 1rem; border-radius: 1rem;
overflow: hidden; overflow: hidden;
&.active{
border: 2px solid #B4B4B4;
}
> img{ > img{
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -1075,6 +1205,9 @@ export default defineComponent({
overflow-x: hidden; overflow-x: hidden;
// max-height: 80%; // max-height: 80%;
position: relative; position: relative;
&::-webkit-scrollbar {
display: none;
}
>img{ >img{
z-index: 2; z-index: 2;
position: relative; position: relative;
@@ -1087,6 +1220,7 @@ export default defineComponent({
top: 0; top: 0;
left: 0; left: 0;
pointer-events: none; pointer-events: none;
height: 100%;
} }
} }
.designOpenrtion_sketch_mask{ .designOpenrtion_sketch_mask{

View File

@@ -1,9 +1,11 @@
<template> <template>
<div class="repeat-setting"> <div class="repeat-setting">
{{ }}
<div class="repeat-setting-item"> <div class="repeat-setting-item">
<span class="label">{{ t("Canvas.angle") }}</span> <span class="label">{{ t("Canvas.angle") }}</span>
<angle-tool <angle-tool
:angle="angle" :angle="angle"
styleType="2"
@input="(e) => emit('inputFillAngle', e)" @input="(e) => emit('inputFillAngle', e)"
/> />
</div> </div>
@@ -52,9 +54,9 @@
<div class="repeat-setting-item"> <div class="repeat-setting-item">
<span class="label">{{ t("Canvas.offset") }}</span> <span class="label">{{ t("Canvas.offset") }}</span>
<offset-tool <offset-tool
:top="(props.object.fill?.offsetY / props.object.height) * 100" :top="offset[1]"
:left="(props.object.fill?.offsetX / props.object.width) * 100" :left="offset[0]"
@input="(e) => emit('inputFillOffset', e)" @input="inputOffset"
@change="(e) => emit('changeFillOffset', e)" @change="(e) => emit('changeFillOffset', e)"
/> />
</div> </div>
@@ -74,15 +76,38 @@
required: true, required: true,
type: Object, type: Object,
}, },
sketchPath: {
required: true,
type: String,
},
}); });
const angle = computed(() => props.object?.angle || 0); const angle = computed(() => props.object?.angle || 0);
const scale = computed(() => { const scale = computed(() => {
// let scaleValue = props.object?.scale/10; // let scaleValue = props.object?.scale/10;
// return props.object?.scale/10; // return props.object?.scale/10;
return props.object?.scale return props.object?.scale[0] * 100;
}); });
const gapX = computed(() => props.object?.gapX || 0); const offset = ref([0,0])
const gapY = computed(() => props.object?.gapY || 0); const sketchSize:any = async ()=>{
let img = new Image();
let size = [0,0];
img.src = props.sketchPath;
await new Promise((resolve, reject) => {
img.onload = () => {
size = [img.width, img.height]
resolve([img.width, img.height]);
}
img.onerror = reject;
});
return size
}
watch (() => props.object.path || props.object.location, async () => {
let size = await sketchSize();
offset.value[0] = props.object.location[0] / size[0] * 100;
offset.value[1] = props.object.location[1] / size[1] * 100;
},{immediate: true})
const gapX = computed(() => props.object.object?.gapX || 0);
const gapY = computed(() => props.object.object?.gapY || 0);
const emit = defineEmits([ const emit = defineEmits([
"inputFillAngle", "inputFillAngle",
"changeFillAngle", "changeFillAngle",
@@ -94,9 +119,13 @@
"changeFill_Gap", "changeFill_Gap",
]); ]);
const inputFillScale = (e) => { const inputFillScale = (e) => {
// const scale = e * 10; const scale = e / 100;
emit("inputFillScale", e); console.log(scale)
emit("inputFillScale", scale);
}; };
const inputOffset = async (e:any)=>{
emit('inputFillOffset', {...e,size: await sketchSize()})
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">

View File

@@ -4,7 +4,7 @@
<div class="back" v-show="isEditPattern.value"> <div class="back" v-show="isEditPattern.value">
<i class="fi fi-br-angle-left" @click="setBack"></i> <i class="fi fi-br-angle-left" @click="setBack"></i>
</div> </div>
<modelNav ref="modelNav" @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" @sketchSysToLibrary="()=>$emit('sketchSysToLibrary')" @deleteItem="deleteItem"></modelNav> <modelNav ref="modelNav" @addSketch="()=>$emit('addSketch')" @sketchSysToLibrary="()=>$emit('sketchSysToLibrary')" @deleteItem="deleteItem"></modelNav>
</div> </div>
<div class="modelindex_right" ref="modelindexRight"> <div class="modelindex_right" ref="modelindexRight">
<div class="detail_btn"> <div class="detail_btn">
@@ -32,7 +32,7 @@
</i> </i>
</div> </div>
<position ref="position" @modelOnLoad="()=>$emit('modelOnLoad')" @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" :imgDesignImg=imgDesignImg></position> <position ref="position" @addSketch="()=>$emit('addSketch')" :imgDesignImg=imgDesignImg></position>
</div> </div>
</div> </div>
@@ -51,7 +51,7 @@ export default defineComponent({
components:{ components:{
position,modelNav position,modelNav
}, },
emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation','modelOnLoad','sketchSysToLibrary'], emits:['detailEdit','addSketch','revocation','oppositeRevocation','sketchSysToLibrary'],
setup(props,{emit}) { setup(props,{emit}) {
const {t} = useI18n() const {t} = useI18n()
const store = useStore(); const store = useStore();
@@ -71,8 +71,8 @@ export default defineComponent({
modelindexRight:null as any, modelindexRight:null as any,
modelNav:null as any, modelNav:null as any,
}) })
const getSubmitData = (value:any,boolean)=>{ const getSubmitData = (value:any)=>{
return getDetailListDom.position.getSubmitData(value,boolean) return getDetailListDom.position.getSubmitData(value,)
} }
const showDesignImgDetail = (str:any)=>{ const showDesignImgDetail = (str:any)=>{
emit('detailEdit',str) emit('detailEdit',str)

View File

@@ -34,7 +34,7 @@ export default defineComponent({
components:{ components:{
position, position,
}, },
emits:['canvasReload','addSketch','deleteItem','sketchSysToLibrary'], emits:['addSketch','deleteItem','sketchSysToLibrary'],
props:{ props:{
}, },
setup(props,{emit}) { setup(props,{emit}) {
@@ -79,25 +79,25 @@ export default defineComponent({
detailData.selectDetail?.id && detailData.selectDetail?.id &&
detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0 detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
){ ){
Modal.confirm({ resolve()
title: t('collectionModal.jsContent6'), // Modal.confirm({
icon: createVNode(ExclamationCircleOutlined), // title: t('collectionModal.jsContent6'),
okText: 'Yes', // icon: createVNode(ExclamationCircleOutlined),
cancelText: 'No', // okText: 'Yes',
mask:false, // cancelText: 'No',
centered:true, // mask:false,
onOk() { // centered:true,
resolve(true) // onOk() {
emit('canvasReload') // resolve(true)
}, // emit('canvasReload')
onCancel(){ // },
resolve(false) // onCancel(){
} // resolve(false)
}); // }
// });
}else{ }else{
resolve(true) resolve(true)
if(detailData.selectDetail.id !== item.id){ if(detailData.selectDetail.id !== item.id){
emit('canvasReload')
} }
} }
}).then((rv)=>{ }).then((rv)=>{
@@ -117,7 +117,6 @@ export default defineComponent({
const maxObj = detailData.designDetail.clothes.find(item => item.priority === maxValue); const maxObj = detailData.designDetail.clothes.find(item => item.priority === maxValue);
store.commit('DesignDetail/setDesignColthes',maxObj.id) store.commit('DesignDetail/setDesignColthes',maxObj.id)
} }
emit('canvasReload')
emit('deleteItem') emit('deleteItem')
} }
const addSketch = ()=>{ const addSketch = ()=>{

View File

@@ -49,7 +49,7 @@ export default defineComponent({
type:Boolean, type:Boolean,
} }
}, },
emits:['canvasReload','addSketch','modelOnLoad'], emits:['addSketch'],
setup(props,{emit}) { setup(props,{emit}) {
const {t} = useI18n() const {t} = useI18n()
const store = useStore(); const store = useStore();
@@ -137,7 +137,6 @@ export default defineComponent({
} }
}); });
setTimeout(() => { setTimeout(() => {
emit('modelOnLoad')
initMoveableForSelected() initMoveableForSelected()
},500); },500);
}; };
@@ -403,7 +402,7 @@ export default defineComponent({
const upDataDetail = async ()=>{ const upDataDetail = async ()=>{
//同步到selectDetail数据中 //同步到selectDetail数据中
// getDetailListData.designDetail // getDetailListData.designDetail
let {scale,offset,priority,transpose,rotate,position,imageSize} = await getSubmitData(selectItem.selectDetail,false) let {scale,offset,priority,transpose,rotate,position,imageSize} = await getSubmitData(selectItem.selectDetail)
selectItem.selectDetail.layersObject[0].scale = scale selectItem.selectDetail.layersObject[0].scale = scale
selectItem.selectDetail.layersObject[1].scale = scale selectItem.selectDetail.layersObject[1].scale = scale
selectItem.selectDetail.layersObject[0].offset = offset selectItem.selectDetail.layersObject[0].offset = offset
@@ -428,9 +427,9 @@ export default defineComponent({
}); });
return arr return arr
} }
const getSubmitData = async (value:any,isNoComputed)=>{ const getSubmitData = async (value:any)=>{
let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect() let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize || isNoComputed){ if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize){
return{ return{
scale:value.layersObject[0].scale, scale:value.layersObject[0].scale,
offset:value.layersObject[0].offset, offset:value.layersObject[0].offset,

View File

@@ -73,14 +73,10 @@ const DesignDetail : Module<DesignDetail,RootState> = {
front[index] = v.layersObject[i] front[index] = v.layersObject[i]
front[index].style.zIndex = v.priority + 10 front[index].style.zIndex = v.priority + 10
front[index].id = v.id front[index].id = v.id
front[index].undividedLayer = v.undividedLayer
front[index].undividedLayerWithSinglePrint = v?.undividedLayerWithSinglePrint
}else{ }else{
back[index] = v.layersObject[i] back[index] = v.layersObject[i]
back[index].style.zIndex = v.priority back[index].style.zIndex = v.priority
back[index].id = v.id back[index].id = v.id
back[index].undividedLayer = v.undividedLayer
back[index].undividedLayerWithSinglePrint = v?.undividedLayerWithSinglePrint
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++ // back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
} }
if(state.printZIndex < v.priority){ if(state.printZIndex < v.priority){
@@ -200,11 +196,8 @@ const DesignDetail : Module<DesignDetail,RootState> = {
printObject:null, printObject:null,
trims:null, trims:null,
type:null, type:null,
undividedLayer:null,
undividedLayer_:null,
transpose:[1,1], transpose:[1,1],
rotate:0, rotate:0,
undividedLayerWithSinglePrint:null,
} }
if(!state.currentDetailType)state.currentDetailType = 'sketch' if(!state.currentDetailType)state.currentDetailType = 'sketch'
state.designDetail.clothes.forEach((item:any) => { state.designDetail.clothes.forEach((item:any) => {
@@ -258,8 +251,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
let el:any = document.querySelector('.molepositon .perview_img') let el:any = document.querySelector('.molepositon .perview_img')
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
if(!state.frontBack?.body?.path){ if(!state.frontBack?.body?.path){
state.frontBack.front[0].undividedLayer = value.rv.clothes[0].undividedLayer
state.frontBack.front[0].undividedLayerWithSinglePrint = value.rv.clothes[0]?.undividedLayerWithSinglePrint
resolve('') resolve('')
} }
const img = new Image(); const img = new Image();
@@ -290,14 +281,10 @@ const DesignDetail : Module<DesignDetail,RootState> = {
state.frontBack.front[index] = item.layersObject[i] state.frontBack.front[index] = item.layersObject[i]
// state.frontBack.front[index].style.zIndex = v.priority // state.frontBack.front[index].style.zIndex = v.priority
state.frontBack.front[index].id = item.id state.frontBack.front[index].id = item.id
state.frontBack.front[index].undividedLayer = item.undividedLayer
state.frontBack.front[index].undividedLayerWithSinglePrint = item?.undividedLayerWithSinglePrint
}else{ }else{
state.frontBack.back[index] = item.layersObject[i] state.frontBack.back[index] = item.layersObject[i]
// state.frontBack.back[index].style.zIndex = v.priority // state.frontBack.back[index].style.zIndex = v.priority
state.frontBack.back[index].id = item.id state.frontBack.back[index].id = item.id
state.frontBack.back[index].undividedLayer = item.undividedLayer
state.frontBack.back[index].undividedLayerWithSinglePrint = item?.undividedLayerWithSinglePrint
} }
} }
} }
@@ -336,8 +323,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
}, },
gradient:item.gradient, gradient:item.gradient,
} }
detailItem.undividedLayer = item.undividedLayer
detailItem.undividedLayerWithSinglePrint = item?.undividedLayerWithSinglePrint
if(detailItem.newDetail?.sketch?.id && !detailItem.id){ if(detailItem.newDetail?.sketch?.id && !detailItem.id){
state.designDetail.clothes.push(detailItem) state.designDetail.clothes.push(detailItem)
} }
@@ -383,8 +368,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
// }, // },
// gradient:item.gradient, // gradient:item.gradient,
// } // }
// state.selectDetail.undividedLayer = item.undividedLayer
// state.selectDetail.undividedLayerWithSinglePrint = item?.undividedLayerWithSinglePrint
// if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){ // if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
// state.designDetail.clothes.push(state.selectDetail) // state.designDetail.clothes.push(state.selectDetail)
// } // }