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

修改sketch或者切换sketch bug修复

Browse Source
This commit is contained in:
X1627315083
2026-01-20 13:49:34 +08:00
parent 747a3b0ebc
commit 25ad9799f8
5 changed files with 144 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -161,7 +161,7 @@ export default defineComponent({
isEditPattern:{
value:'' as any,
},// 是否编辑图案
canvasKey:0,
canvasKey:computed(()=>store.state.DesignDetail.canvasKey),
singleOveral:{
value:'overall'
},
@@ -191,7 +191,7 @@ export default defineComponent({
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
if(newValue?.path)await getSketchSize()
if(newValue?.id && oldValue?.id && (newValue.id != oldValue.id)){
detailData.canvasKey += 1
store.commit('DesignDetail/changeCanvasKey')
}
// privewDetail(oldValue)
},{immediate: true})
@@ -336,9 +336,11 @@ export default defineComponent({
detailData.selectDetail.sketchString = rv
})
if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
let otherData = await updateOtherLayers('single')
await detailDom.canvasBox.updateOtherLayers(otherData)
await detailDom.canvasBox.privewDetail()
if(detailDom.canvasBox && (detailData.currentDetailType != 'sketch' || detailData.isEditPattern.value == 'canvasEditor')){
let otherData = await updateOtherLayers('single')
await detailDom.canvasBox.updateOtherLayers(otherData)
await detailDom.canvasBox.privewDetail()
}
for(let i = 0;i<list.length;i++){
detailData.selectDetail
let {scale,offset,priority,transpose,rotate,maskUrl,maskMinioUrl} = await (detailDom.model as any).getSubmitData(list[i])
@@ -358,7 +360,6 @@ export default defineComponent({
(list[i].color?.rgba?.r?
`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:
'')
console.log(color,'==============================')
if(detailData.currentDetailType == 'sketch' && newData){
color = detailData.designDetail.clothes?.[0]?.color?.rgba?.r?`${detailData.designDetail.clothes?.[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:''
detailData.selectDetail.maskUrl = ''
@@ -417,45 +418,65 @@ export default defineComponent({
}
const getSubmitData = async (str:string)=>{
// return
let workspace = store.state.Workspace.probjects
if(!detailData?.selectDetail?.path && !detailData?.selectDetail?.newDetail?.sketch?.minIOPath)return
let clothes:any
if(detailData.currentDetailType == 'models'){
clothes = await setClothes(detailData.designDetail.clothes,str)
}else{
clothes = await setClothes([detailData.selectDetail],str)
}
let data = {
designItemId:detailData.designDetail.designItemId,
designSingleItemDTOList:clothes,
isPreview:str == 'sub'?false:true,
// ifSubmit:designItemDetail.isPreview,
gender:workspace?.sex,
sketchString:'',
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:'',
designType:detailData.selectDetail.id?'merge':'default',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
processId:userDetail.value.userId,
probjectId:store.state.Workspace.probjects.id,
}
detailData.loadingShow = true
Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
let value = {
currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)),
rv:rv,
fun:setRevocation
await new Promise<void>(async (resolve, reject) => {
let workspace = store.state.Workspace.probjects
if(!detailData?.selectDetail?.path && !detailData?.selectDetail?.newDetail?.sketch?.minIOPath)return
let clothes:any
if(detailData.currentDetailType == 'models'){
clothes = await setClothes(detailData.designDetail.clothes,str)
}else{
clothes = await setClothes([detailData.selectDetail],str)
}
if(detailData?.designDetail?.newModel)detailData.designDetail.oldModel = JSON.parse(JSON.stringify(detailData.designDetail.newModel))
// delete detailData.designDetail.newModel
detailData.selectDetail.sketchString = null
store.commit('DesignDetail/setPraeview',value)
detailData.loadingShow = false
canvasReload()
// setRevocation()
}).catch(res=>{
detailData.loadingShow = false
});
let isDefault = detailData.selectDetail.sketchString || (!detailData.selectDetail.id || (detailData.selectDetail?.newDetail?.sketch && detailData.currentDetailType == 'sketch'))
let data = {
designItemId:detailData.designDetail.designItemId,
designSingleItemDTOList:clothes,
isPreview:str == 'sub'?false:true,
// ifSubmit:designItemDetail.isPreview,
gender:workspace?.sex,
sketchString:'',
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:'',
designType:isDefault?'default':'merge',
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
processId:userDetail.value.userId,
probjectId:store.state.Workspace.probjects.id,
}
await Https.axiosPost(Https.httpUrls.designSingle, data).then(async (rv)=>{
let value = {
currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)),
rv:rv,
fun:setRevocation
}
if(detailData?.designDetail?.newModel)detailData.designDetail.oldModel = JSON.parse(JSON.stringify(detailData.designDetail.newModel))
// delete detailData.designDetail.newModel
let el:any = document.querySelector('.molepositon .perview_img')
let scale = 0
await new Promise<void>(async (resolve, reject) => {
const img = new Image();
img.src = detailData.frontBack.body.path;
img.onload = () => {
scale = el.parentNode.offsetWidth / img.width;
resolve(true)
};
})
value.scale = scale
store.commit('DesignDetail/setPraeview',value)
store.commit('DesignDetail/changeCanvasKey')
// console.log(detailData.selectDetail)
// if(detailData.selectDetail.sketchString || (detailData.selectDetail?.newDetail?.sketch && detailData.currentDetailType == 'sketch')){
// detailData.canvasKey += 1
// }
detailData.selectDetail.sketchString = null
resolve(true)
canvasReload()
// setRevocation()
}).catch(res=>{
resolve(true)
});
})
}
const submit = async ()=>{
let workspace = store.state.Workspace.probjects
@@ -505,9 +526,16 @@ export default defineComponent({
});
}
const previwe = async ()=>{
detailData.loadingShow = true
if((detailData.currentDetailType == 'sketch' && !detailData.isEditPattern.value) || detailData.isEditPattern.value == 'editSketch'){
let data = getSubmitData('preview')
store.dispatch('DesignDetail/setSubmit',data)
await getSubmitData('preview')
await getSketchSize()
detailDom.canvasBox.changeSketchUpdateFrontBack = async ()=>{
await detailDom.canvasBox.privewDetail()
detailDom?.model?.updateRect()
await upDateFrontBackSketch()
detailData.loadingShow = false
}
}else{
//走画布合成图片并且直接分割
if(detailData.isEditPattern.value !== 'canvasEditor'){
@@ -516,6 +544,13 @@ export default defineComponent({
await detailDom.canvasBox.updateOtherLayers(otherData)
}
await detailDom.canvasBox.privewDetail()
await upDateFrontBackSketch()
saveCanvasJSONToSession()
detailData.loadingShow = false
}
}
const upDateFrontBackSketch = async ()=>{//更新模特身上的分割图
await new Promise<void>(async(resolve, reject) => {
let img = new Image()
img.onload = ()=>{
let partialDesign = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.partialDesign.partialDesignPath
@@ -534,11 +569,11 @@ export default defineComponent({
front.imageUrl = rv.targetFrontUrl
back.imageUrl = rv.targetBackUrl
store.commit('DesignDetail/canvasPreviewUpdata',{type:detailData.isEditPattern.value?'all':detailData.currentDetailType,callBack:setRevocation})
resolve()
})
}
img.src = detailData.selectDetail.path
saveCanvasJSONToSession()
}
})
}
const saveCanvasJSONToSession = ()=>{
let canvasJSON = detailDom.canvasBox.getCanvasJSON()
@@ -631,7 +666,6 @@ export default defineComponent({
otherData.trims = detailData.selectDetail.newDetail?.element?.length>0?{prints:detailData.selectDetail.newDetail?.element}:detailData.selectDetail.trims || null
}
}
console.log(JSON.parse(JSON.stringify(otherData)),'=======',JSON.parse(JSON.stringify(detailData.selectDetail)))
return otherData
}
const uploadElement = async ()=>{//取出画布数据更新到detail
@@ -674,7 +708,6 @@ export default defineComponent({
if(canvasColor.gradient){
value.data.gradient = canvasColor.gradient
}
console.log(value,'=======')
store.commit('DesignDetail/setNewDetail',value)
if(allInfo.color.color.gradient)detailData.selectDetail.color.gradient = allInfo.color.color.gradient
if(detailData.currentDetailType == 'color'){
@@ -687,7 +720,6 @@ export default defineComponent({
if(detailData.isEditPattern.value){
await detailDom.canvasBox.saveCanvas()
}
detailData.canvasKey += 1
}
const sketchSysToLibrary = ()=>{//系统sketch添加到library更新library
coverRevocation()
@@ -711,7 +743,7 @@ export default defineComponent({
onBeforeUnmount(()=>{
sessionStorage.removeItem('oppositeRevocation')
sessionStorage.removeItem('revocation')
store.commit('DesignDetail/clearDesignDetail')
store.commit('DesignDetail/clearDetailData')
})

19
src/component/Detail/canvas/index.vue
View File

@@ -123,6 +123,7 @@ export default defineComponent({
printObject: store.state.DesignDetail.selectDetail.printObject,
trims: store.state.DesignDetail.selectDetail.trims,
})),
changeSketchUpdateFrontBack:null as any,//切换sketch后是否需要合成图片进行风格
})
watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -177,22 +178,16 @@ export default defineComponent({
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
// if(!detailDom.editCanvas)return
return new Promise(async (res,reject)=>{
console.log(detailDom.editCanvas)
await detailDom.editCanvas.exportImage({
isContainFixed:true,
width:props.sketchSize.width,
height:props.sketchSize.height,
}).then((rv)=>{
console.log(rv,'================')
console.log(rv,'================',props.sketchSize)
if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
})
//包含平铺图层 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
// })
await setUndivideLayer()
res('')
})
@@ -344,6 +339,11 @@ export default defineComponent({
const canvasLoadJsonSuccess = async ()=>{
let otherData = await props.updateOtherLayers()
await updateOtherLayers(otherData)
if(detailData.changeSketchUpdateFrontBack){
await detailData.changeSketchUpdateFrontBack()
detailData.changeSketchUpdateFrontBack = null
}
setUndivideLayer()
}
const setUndivideLayer = async ()=>{
@@ -421,7 +421,6 @@ export default defineComponent({
})
}
}
setCanvas(detailData.selectDetail.path).then(()=>{
detailData.canvasLoad = true
})

6
src/component/Detail/model/index.vue
View File

@@ -128,7 +128,10 @@ export default defineComponent({
getDetailListDom.position?.updataPosition?.()
getDetailListDom.modelNav?.setItemPosition?.()
getDetailListDom.position?.updateRect?.()
},500)
},200)
}
const updateRect = ()=>{
getDetailListDom.position?.updateRect?.()
}
const setBack = ()=>{
showDesignImgDetail(getDetailListData.isEditPattern.value)
@@ -156,6 +159,7 @@ export default defineComponent({
oppositeRevocation,
mousedownDesignImg,
setBack,
updateRect,
}
},

4
src/component/Detail/model/modelPosition.vue
View File

@@ -155,8 +155,8 @@ export default defineComponent({
};
const updateRect = ()=>{
setTimeout(() => {
moveableInstance.value.updateRect()
}, 500);
if(moveableInstance.value)moveableInstance.value.updateRect()
}, 200);
}
const initMoveableForSelected = () => {
// 销毁旧的实例

140
src/store/Detail/designDetail.ts
View File

@@ -12,6 +12,7 @@ interface DesignDetail{
//值都有 sketch，color,print,element
currentDetailType:any,
currentPrintElement:any,
canvasKey:any,
}
const DesignDetail : Module<DesignDetail,RootState> = {
@@ -28,6 +29,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
printZIndex:-1,
currentDetailType:'',
currentPrintElement:null,
canvasKey:0,
},
mutations:{
clearDetailData(state){
@@ -42,6 +44,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
state.printZIndex = -1
state.currentDetailType = ''
state.currentPrintElement = null
state.canvasKey = 0
},
setDesignDetail(state,data){
if(data.others.length > 0 && data.others[0].type == "Body"){
@@ -63,7 +66,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
}
}
v?.printObject?.prints?.forEach((item:any) => {
console.log(item.object)
if(isJSONString(item.object)){
item.object = JSON.parse(item.object)
}
@@ -115,18 +117,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
}
});
},
clearDesignDetail(state){
state.designDetail = null
state.designPreviewData = {}
state.frontBack = {
front:[],
back:[],
body:{},
}
state.selectDetail = null
state.currentDetailType = ''
state.printZIndex = -1
},
addDesign(state,data){
},
@@ -226,21 +216,22 @@ const DesignDetail : Module<DesignDetail,RootState> = {
});
state.selectDetail = data
},
changeCanvasKey(state){
state.canvasKey+=1
},
canvasPreviewUpdata(state,{type,callBack}){
console.log(state.selectDetail,type)
// state.selectDetail.newDetail?.print?.forEach((item:any) => {
// state.selectDetail.printObject.prints = []
// state.selectDetail.printObject.push({
// })
// });
if(type == 'print' || type == 'all')state.selectDetail.printObject.prints = state.selectDetail.newDetail?.print
if(type == 'color' || type == 'all')state.selectDetail.color = {
if((type == 'print' || type == 'all') && state.selectDetail.newDetail?.print)state.selectDetail.printObject.prints = state.selectDetail.newDetail?.print
if((type == 'color' || type == 'all') && state.selectDetail.newDetail?.color?.rgba)state.selectDetail.color = {
...state.selectDetail.newDetail?.color,
...state.selectDetail.newDetail?.color?.rgba,
...state.selectDetail.newDetail?.color?.hsv,
}
console.log(state.selectDetail,type,state.selectDetail.newDetail)
if(type == 'element' || type == 'all')state.selectDetail.trims.prints = state.selectDetail.newDetail?.element
if((type == 'element' || type == 'all') && state.selectDetail.newDetail?.element)state.selectDetail.trims.prints = state.selectDetail.newDetail?.element
if(type == 'all'){
state.selectDetail.newDetail = {}
}else{
@@ -248,7 +239,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
}
callBack()
},
async setPraeview(state,value){//preview
setPraeview(state,value){//preview
let data = value?.rv || value
let currentType = value?.currentType
if(state.designDetail.oldModel?.url)state.frontBack.body.path = state.designDetail.oldModel.url
@@ -267,50 +258,41 @@ const DesignDetail : Module<DesignDetail,RootState> = {
}else{
id_ = item.id
}
let el:any = document.querySelector('.molepositon .perview_img')
await new Promise((resolve, reject) => {
if(!state.frontBack?.body?.path){
resolve('')
if(state.frontBack?.body?.path){
let scale:any = value.scale
if(state.selectDetail?.newDetail?.sketch?.id && !state.selectDetail.id){
state.frontBack.front.push({id:state.selectDetail.newDetail?.sketch?.id})
state.frontBack.back.push({id:state.selectDetail.newDetail?.sketch?.id})
}
const img = new Image();
img.src = state.frontBack.body.path;
img.onload = () => {
let scale:any = el.parentNode.offsetWidth / img.width;
if(state.selectDetail?.newDetail?.sketch?.id && !state.selectDetail.id){
state.frontBack.front.push({id:state.selectDetail.newDetail?.sketch?.id})
state.frontBack.back.push({id:state.selectDetail.newDetail?.sketch?.id})
}
state.frontBack.front.forEach((v:any,index:any)=>{
if(v.id == id_){
for (let i = item.layersObject.length-1; i >= 0; i--) {
item.layersObject[i].style = {
top:item.layersObject[i].position?.[0] * scale + 'px',
left:item.layersObject[i].position?.[1] * scale + 'px',
width:item.layersObject[i].imageSize?.[0] * scale + 'px',
height:item.layersObject[i].imageSize?.[1] * scale + 'px',
zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length,
transform:`rotate(${item.layersObject?.[i]?.rotate || 0}deg) scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1})`,
}
item.layersObject[i].centers={
left:0,
top:0,
}
item.layersObject[i].designOpenrtionBtn = false
if(item.layersObject[i].imageCategory.indexOf("back") == -1){
state.frontBack.front[index] = item.layersObject[i]
// state.frontBack.front[index].style.zIndex = v.priority
state.frontBack.front[index].id = item.id
}else{
state.frontBack.back[index] = item.layersObject[i]
// state.frontBack.back[index].style.zIndex = v.priority
state.frontBack.back[index].id = item.id
}
state.frontBack.front.forEach((v:any,index:any)=>{
if(v.id == id_){
for (let i = item.layersObject.length-1; i >= 0; i--) {
item.layersObject[i].style = {
top:item.layersObject[i].position?.[0] * scale + 'px',
left:item.layersObject[i].position?.[1] * scale + 'px',
width:item.layersObject[i].imageSize?.[0] * scale + 'px',
height:item.layersObject[i].imageSize?.[1] * scale + 'px',
zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length,
transform:`rotate(${item.layersObject?.[i]?.rotate || 0}deg) scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1})`,
}
item.layersObject[i].centers={
left:0,
top:0,
}
item.layersObject[i].designOpenrtionBtn = false
if(item.layersObject[i].imageCategory.indexOf("back") == -1){
state.frontBack.front[index] = item.layersObject[i]
// state.frontBack.front[index].style.zIndex = v.priority
state.frontBack.front[index].id = item.id
}else{
state.frontBack.back[index] = item.layersObject[i]
// state.frontBack.back[index].style.zIndex = v.priority
state.frontBack.back[index].id = item.id
}
}
})
resolve('')
};
})
}
})
}
let uploadDetail = (detailItem)=>{
detailItem.change = item.change
if(detailItem?.newDetail?.color && currentType != 'color'){
@@ -321,6 +303,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
detailItem.partialDesign = item.partialDesign
}
detailItem.designType = item.designType
detailItem.canvasId = item.canvasId
detailItem.layersObject = item.layersObject
detailItem.path = item.path
detailItem.minIOPath = item.minIOPath
@@ -357,44 +340,9 @@ const DesignDetail : Module<DesignDetail,RootState> = {
}else{
uploadDetail(state.selectDetail)
}
if(state.currentDetailType != 'models'){
// state.selectDetail.change = item.change
// if(state.selectDetail?.newDetail?.color && currentType != 'color'){
// state.selectDetail.color = state.selectDetail?.newDetail?.color
// state.selectDetail.newDetail.color = null
// }
// if(item.partialDesign){
// state.selectDetail.partialDesign = item.partialDesign
// }
// state.selectDetail.designType = item.designType
// state.selectDetail.layersObject = item.layersObject
// state.selectDetail.path = item.path
// state.selectDetail.minIOPath = item.minIOPath
// state.selectDetail.scale = [1,1]
// state.selectDetail.offset = [0,0]
// state.selectDetail.printObject = item.printObject
// state.selectDetail.trims = item.trims
// state.selectDetail.type = item.type
// state.selectDetail.maskMinioUrl = item.layersObject?.[0]?.maskMinioUrl
// state.selectDetail.maskUrl = item.layersObject?.[0]?.maskUrl
// state.selectDetail.color = {
// ...item.color,
// rgba:{
// r:item.color?.r,
// g:item.color?.g,
// b:item.color?.b,
// },
// gradient:item.gradient,
// }
// if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
// state.designDetail.clothes.push(state.selectDetail)
// }
// state.selectDetail.id = item.id
// if(currentType)if(state.selectDetail.newDetail?.[currentType] && currentType != 'color')delete state.selectDetail.newDetail[currentType]
}
}
if(value.fun)value.fun()
},
// setDesignItemOthers(state,data){