-
{
- setCanvas(detailData.selectDetail?.undividedLayerWithSinglePrint || detailData.selectDetail.undividedLayer || detailData.selectDetail.path).then(()=>{
+ setCanvas(detailData.selectDetail.path).then(()=>{
// detailData.canvasLoad = true
})
})
@@ -166,18 +165,25 @@ export default defineComponent({
const updateOtherLayers = (obj:any)=>{
if(!detailDom.editCanvas)return
return new Promise(async (res,reject)=>{
- console.log(obj,'====')
await detailDom?.editCanvas.updateOtherLayers(obj)
res('')
})
}
const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
// if(!detailDom.editCanvas)return
- return new Promise((res,reject)=>{
- detailDom.editCanvas.exportImage({isContainFixedOther:true,isContainFixed:true}).then((rv)=>{
+ return new Promise(async (res,reject)=>{
+ await detailDom.editCanvas.exportImage({isContainFixed:true}).then((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 = ()=>{
@@ -246,7 +252,7 @@ export default defineComponent({
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 = {
...detailData.canvasConfig,
}
@@ -267,7 +273,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.getCanvasIfEdit.fun = getCanvasLength
detailData.isShowMark = false
@@ -276,20 +288,19 @@ export default defineComponent({
const getCanvasLength = ()=>{
return detailData.canvasInstance?.commandManager?.undoStack?.length
}
- const saveCanvas = async (type:string = '')=>{
- if(type !== 'auto'){
- detailData.isShowMark = true
- }
- const index = detailData.designDetail.clothes.findIndex(item => item.id === detailData.selectDetail.id);
+ const getCanvasJSON = ()=>{
+ if(!detailDom?.editCanvas)return ''
+ return detailDom?.editCanvas?.getJSON()
+ }
+ const saveCanvas = async (canvasData:any)=>{
+ const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasData.id);
await new Promise((resolve, reject) => {
- if(!detailDom?.editCanvas)return resolve()
- let canvasJSON = detailDom?.editCanvas?.getJSON()
- let canvasData = JSON.parse(canvasJSON)
- if(!canvasData)return resolve()
- canvasData.canvas.objects.forEach((objectsItem:any) => {
- if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
- });
- let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
+ let canvasJSON = JSON.parse(canvasData.canvasJSON)
+ if(!canvasJSON)return resolve()
+ // 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 formData = new FormData();
formData.append("file", blob, "data.json");
formData.append("designItemDetailId", detailData.selectDetail.id);
@@ -320,6 +331,11 @@ export default defineComponent({
const canvasLoadJsonSuccess = async ()=>{
let otherData = await props.updateOtherLayers()
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 = ()=>{
@@ -342,6 +358,12 @@ export default defineComponent({
onMounted(()=>{
nextTick(async ()=>{
// 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){
detailData.isShowMark = true
await new Promise((resolve, reject) => {
@@ -359,7 +381,7 @@ export default defineComponent({
});
})
}
- setCanvas(detailData.selectDetail?.undividedLayerWithSinglePrint || detailData.selectDetail.undividedLayer || detailData.selectDetail.path).then(()=>{
+ setCanvas(detailData.selectDetail.path).then(()=>{
detailData.canvasLoad = true
})
})
@@ -371,12 +393,14 @@ export default defineComponent({
privewDetail,
setFrontBackColor,
frontBackChange,
- canvasInit,
+ editSketchCanvasInit,
+ editFrontBackCanvasInit,
saveCanvas,
getCanvasElement,
updateOtherLayers,
canvasLoadJsonSuccess,
submitBase64Data,
+ getCanvasJSON,
}
},
provide() {
diff --git a/src/component/Detail/detailRight/editPrintElement.vue b/src/component/Detail/detailRight/editPrintElement.vue
index a6938fb7..8ee209a3 100644
--- a/src/component/Detail/detailRight/editPrintElement.vue
+++ b/src/component/Detail/detailRight/editPrintElement.vue
@@ -16,20 +16,21 @@
-
-
-
+
-
+
+
![]()
-
+
-
![]()
-
+ -->
+
-
+
- ![]()
+ ![]()
![]()
@@ -148,21 +149,13 @@ export default defineComponent({
const editPrintElementDom = reactive({
imgDom:null as any,
sketchImg:null as any,
+ pingpuRef:null as any,
})
const editPrintElementData = reactive({
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
systemDesignerPercentage:0,
- overallDetail:{
- url: '',
- offsetX: 0, // px
- offsetY: 0, // px
- angle: 0, // 角度
- scale: 100, // %
- gapX: 0, // px
- gapY: 0, // px
- },
printStyleList:{
print:{
single:[],
@@ -172,9 +165,9 @@ export default defineComponent({
single:[],
}
} as any,
- stateOverallSingle:'single',
+ stateOverallSingle:'single' as any,
type:props.type,
- imgDomIndex:0,
+ imgDomIndex:-1,
direction:'',//判断点的那条边
printZIndex:2,//印花优先级
sketchWH:{
@@ -186,6 +179,13 @@ export default defineComponent({
printElementList:null as any,
isSketchLoad:false,
})
+ const ACTIONS = {
+ ADD: "add",
+ UPDATE: "update",
+ DELETE: "delete",
+ SELECT: "select",
+ SORT: "sort",
+ };
const collItemSize = reactive({
collValue:18,
num:1,
@@ -205,13 +205,14 @@ export default defineComponent({
})
const setOveralSingle = ()=>{
+
setItemPosition()
}
const formatter = (value:any)=>{
return `${value}%`;
}
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)=>{
return new Promise((resolve, reject) => {
@@ -265,7 +266,6 @@ export default defineComponent({
let scale,location
let style = item.pattern.style
let sketchWH = editPrintElementData.sketchWH.scale
- let overallDetail = {}
if(item.ifSingle){
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]]
@@ -276,14 +276,6 @@ export default defineComponent({
scale =[ editPrintElementData.systemDesignerPercentage/100, editPrintElementData.systemDesignerPercentage/100]
// 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]
- 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 ={
angle : item.pattern.transform.rotateZ,
@@ -297,9 +289,8 @@ export default defineComponent({
minIOPath:item.minIOPath,
ifSingle:!!item.ifSingle,
globalCompositeOperation:'',
- object:null,
- // ...overallDetail,
}
+ if(item.object)value.object = item.object
return value
}
if(editPrintElementData.printStyleList[props.type].single.length>0){
@@ -332,7 +323,6 @@ export default defineComponent({
}
const getItemPosition = (item:any)=>{
let left,top
-
if(item.ifSingle){
//single
left = item.location[0] / editPrintElementData.sketchWH.scale[0]
@@ -362,22 +352,46 @@ export default defineComponent({
}
editPrintElementData.printZIndex++
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){
editPrintElementData.printStyleList[props.type].single.push(item)
}else{
- editPrintElementData.printStyleList[props.type].overall = []
- editPrintElementData.overallDetail = {
- url: item.path,
- offsetX: 0, // px
- offsetY: 0, // px
- angle: 0, // 角度
- scale: 100, // %
- gapX: 0, // px
- gapY: 0, // px
- }
+ item.token = Date.now().toString() + (editPrintElementData.printStyleList[props.type].overall.length + '')
+ // editPrintElementData.printStyleList[props.type].overall = []
editPrintElementData.printStyleList[props.type].overall.push(item)
+ editPrintElementDom.pingpuRef.updataList([
+ {
+ action: ACTIONS.ADD,
+ data: item,
+ },
+ ]);
}
-
}
const setPosition = ()=>{
nextTick(()=>{
@@ -405,7 +419,7 @@ export default defineComponent({
}
if(arr && arr.length > 0){
arr.forEach((item:any)=>{
- if(!item.ifSingle && arr.length == 1){
+ if(!item.ifSingle){
editPrintElementData.stateOverallSingle = 'overall',
state = false
}
@@ -436,7 +450,7 @@ export default defineComponent({
addPrintELement(newVal)
}
})
- watch(()=>((editPrintElementData.selectDetail?.undividedLayer || editPrintElementData.selectDetail?.id)),(newVal)=>{
+ watch(()=>((editPrintElementData.selectDetail?.id)),(newVal)=>{
if(!newVal)return
editPrintElementData.isSketchLoad = false,
editPrintElementData.printStyleList[props.type] = {
@@ -444,27 +458,34 @@ export default defineComponent({
overall:[],
}
if(!editPrintElementData.selectDetail.sketchMask){
- sketchToMask(newVal).then((res:any)=>{
+ sketchToMask(editPrintElementData.selectDetail?.layersObject[0].maskUrl).then((res:any)=>{
editPrintElementData.selectDetail.sketchMask = res
})
}
setPosition()
},{immediate: true,})
watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
- if(newVal == 'overall'){
- let overallPrint = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]?.[0]
- if(!overallPrint?.path)return
- editPrintElementData.overallDetail = {
- url: overallPrint.path,
- offsetX: overallPrint.offsetX || 0, // px
- offsetY: overallPrint.offsetY || 0, // px
- angle: overallPrint.angle || 0, // 角度
- scale: overallPrint.scale || 100, // %
- gapX: overallPrint.gapX || 0, // px
- gapY: overallPrint.gapY || 0, // px
+ let arr = editPrintElementData.printStyleList[props.type][newVal]
+ if(arr.length > 0){
+ editPrintElementData.imgDomIndex = 0
+ if(newVal == 'overall'){
+ arr.forEach((item:any,index:number) => {
+ item.id_ = index
+ });
}
+ }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)=>{
if (event.target.tagName === 'IMG' || event.target.nodeName === 'IMG')return
@@ -728,7 +749,17 @@ export default defineComponent({
}
//排序 从大到小
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)=>{
let elList:any = collItemSize.elList
@@ -771,6 +802,14 @@ export default defineComponent({
const navDelete = (item:any)=>{
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
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)
setItemPosition()
}
@@ -817,19 +856,105 @@ export default defineComponent({
collItemSize.prentWidth = (collItemSize.padding + remValue) * elArr.length + 'px'
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)=>{
- 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)=>{
- editPrintElementData.overallDetail.offsetX = offset.left
- editPrintElementData.overallDetail.offsetY = offset.top
+ let arr = editPrintElementData.printStyleList[props.type].overall
+ 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)=>{
- 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)=>{
- editPrintElementData.overallDetail.gapX = x
- editPrintElementData.overallDetail.gapY = y
+ let arr = editPrintElementData.printStyleList[props.type].overall
+ 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(()=>{
if(props.type == 'element'){
@@ -854,10 +979,12 @@ export default defineComponent({
clearOverall,
designMousedown,
navDelete,
+ updateCanvas,
inputFillAngle,
inputFillOffset,
inputFillScale,
inputFill_Gap,
+ overallSetIndex,
}
},
directives:{
@@ -1022,6 +1149,9 @@ export default defineComponent({
cursor: pointer;
border-radius: 1rem;
overflow: hidden;
+ &.active{
+ border: 2px solid #B4B4B4;
+ }
> img{
width: 100%;
height: 100%;
@@ -1075,6 +1205,9 @@ export default defineComponent({
overflow-x: hidden;
// max-height: 80%;
position: relative;
+ &::-webkit-scrollbar {
+ display: none;
+ }
>img{
z-index: 2;
position: relative;
@@ -1087,6 +1220,7 @@ export default defineComponent({
top: 0;
left: 0;
pointer-events: none;
+ height: 100%;
}
}
.designOpenrtion_sketch_mask{
diff --git a/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue
index 63d02093..02434fab 100644
--- a/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue
+++ b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue
@@ -1,9 +1,11 @@
-
@@ -109,7 +110,7 @@
-
+ {{ }}
{{ t("Canvas.angle") }}
@@ -52,9 +54,9 @@
{{ t("Canvas.offset") }}
@@ -74,15 +76,38 @@
required: true,
type: Object,
},
+ sketchPath: {
+ required: true,
+ type: String,
+ },
});
const angle = computed(() => props.object?.angle || 0);
const scale = computed(() => {
// let scaleValue = 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 gapY = computed(() => props.object?.gapY || 0);
+ const offset = ref([0,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([
"inputFillAngle",
"changeFillAngle",
@@ -94,9 +119,13 @@
"changeFill_Gap",
]);
const inputFillScale = (e) => {
- // const scale = e * 10;
- emit("inputFillScale", e);
+ const scale = e / 100;
+ console.log(scale)
+ emit("inputFillScale", scale);
};
+ const inputOffset = async (e:any)=>{
+ emit('inputFillOffset', {...e,size: await sketchSize()})
+ }