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

Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

Browse Source
This commit is contained in:
zhangyahui
2026-02-02 13:41:56 +08:00
parent 25e4fc06c6 4bd7740753
commit fca04ba44b
9 changed files with 338 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/component/Canvas/CanvasEditor/commands/FillRepeatCommand.js
View File

@@ -109,12 +109,19 @@ export class FillRepeatCommand extends Command {
const fdObject = this.canvasManager.getFixedLayerObject(); const fdObject = this.canvasManager.getFixedLayerObject();
const bgObject = this.canvasManager.getBackgroundLayerObject(); const bgObject = this.canvasManager.getBackgroundLayerObject();
const tObject = fdObject || bgObject; const tObject = fdObject || bgObject;
const tWidth = tObject.width;
const tHeight = tObject.height;
// const offsetX = object.fill?.hasOwnProperty("offsetX") ? object.fill.offsetX : tObject.width / 2; // const offsetX = object.fill?.hasOwnProperty("offsetX") ? object.fill.offsetX : tObject.width / 2;
// const offsetY = object.fill?.hasOwnProperty("offsetY") ? object.fill.offsetY : tObject.height / 2; // const offsetY = object.fill?.hasOwnProperty("offsetY") ? object.fill.offsetY : tObject.height / 2;
const patternTransform = object.fill?.hasOwnProperty("patternTransform") ? object.fill.patternTransform : createPatternTransform(0.3, 0); const scaleX_ = tWidth / img.width / 5;
const scaleY_ = tHeight / img.height / 5;
const scale_ = tWidth > tHeight ? scaleX_ : scaleY_;
const patternTransform = object.fill?.hasOwnProperty("patternTransform") ? object.fill.patternTransform : createPatternTransform(scale_, 0);
const scale = getTransformScaleAngle(patternTransform).scale; const scale = getTransformScaleAngle(patternTransform).scale;
const offsetX = tObject.width / 2 - img.width * scale / 2; const offsetX = tWidth / 2 - img.width * scale / 2;
const offsetY = tObject.height / 2 - img.height * scale / 2; const offsetY = tHeight / 2 - img.height * scale / 2;
const pattern = new fabric.Pattern({ const pattern = new fabric.Pattern({
source: img, source: img,
repeat: this.fillRepeat, repeat: this.fillRepeat,
@@ -146,10 +153,10 @@ export class FillRepeatCommand extends Command {
let scaleX = tObject.scaleX || 1; let scaleX = tObject.scaleX || 1;
let scaleY = tObject.scaleY || 1; let scaleY = tObject.scaleY || 1;
rect.set({ rect.set({
width: tObject.width, width: tWidth,
height: tObject.height, height: tHeight,
top: tObject.top - tObject.height * scaleY / 2, top: tObject.top - tHeight * scaleY / 2,
left: tObject.left - tObject.width * scaleX / 2, left: tObject.left - tWidth * scaleX / 2,
scaleX, scaleX,
scaleY, scaleY,
}); });
@@ -192,7 +199,7 @@ export class FillRepeatCommand extends Command {
// 复制原对象的属性 // 复制原对象的属性
copyObjectProperties(object) { copyObjectProperties(object) {
return{ return {
id: object.id, id: object.id,
layerId: object.layerId, layerId: object.layerId,
layerName: object.layerName, layerName: object.layerName,

2
src/component/Canvas/CanvasEditor/commands/LayerCommands.js
View File

@@ -283,7 +283,7 @@ export class PasteLayerCommand extends Command {
if(this.newLayer.isPrintTrims){ if(this.newLayer.isPrintTrims){
this.layers.value.forEach((layer) => { this.layers.value.forEach((layer) => {
if (layer.isPrintTrimsGroup) { if (layer.isPrintTrimsGroup) {
layer.children.push(this.newLayer); layer.children.unshift(this.newLayer);
} }
}) })
}else if (this.insertIndex !== undefined && this.insertIndex !== null) { }else if (this.insertIndex !== undefined && this.insertIndex !== null) {

4
src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
View File

@@ -126,8 +126,8 @@
:options="selectOptions" :options="selectOptions"
@change="(e) => changeFillRepeat(e, v)" @change="(e) => changeFillRepeat(e, v)"
:disabled=" :disabled="
v.layer?.metadata?.level2Type === v.layer?.metadata?.sourceData?.type ===
'Embroidery' 'trims'
" "
/> />
</div> </div>

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

@@ -991,7 +991,7 @@ defineExpose({
}, },
updateOtherLayers: async (otherData) => { updateOtherLayers: async (otherData) => {
await new Promise((resolve) => optimizeCanvasRendering(canvasManager.canvas, resolve)); await new Promise((resolve) => optimizeCanvasRendering(canvasManager.canvas, resolve));
await canvasManager?.createOtherLayers?.(otherData, true); await canvasManager?.createOtherLayers?.(otherData);
layerManager.activeLayerId.value = "" layerManager.activeLayerId.value = ""
layerManager?.sortLayers(); layerManager?.sortLayers();
await layerManager?.updateLayersObjectsInteractivity?.(true); await layerManager?.updateLayersObjectsInteractivity?.(true);

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

@@ -1160,7 +1160,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
const flScaleY = fixedLayerObj.scaleY const flScaleY = fixedLayerObj.scaleY
const prints = []; const prints = [];
const trims = []; const trims = [];
objects.forEach((v) => { objects.forEach((v, i) => {
const label = glayer.children.find((v_) => (v_.id === v.layerId || v_.id === v.id)); const label = glayer.children.find((v_) => (v_.id === v.layerId || v_.id === v.id));
const sourceData = label?.metadata?.sourceData; const sourceData = label?.metadata?.sourceData;
if(!sourceData) return; if(!sourceData) return;
@@ -1174,7 +1174,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
scale: [0, 0], scale: [0, 0],
angle: v.angle, angle: v.angle,
name: sourceData.name, name: sourceData.name,
priority: sourceData.priority, priority: i + 1,
object:{ object:{
top: 0, top: 0,
left: 0, left: 0,
@@ -1240,8 +1240,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
} }
}) })
// prints.sort((a, b) => a.ifSingle ? 1 : -1); // prints.sort((a, b) => a.ifSingle ? 1 : -1);
prints.forEach((v, i) => v.priority = i + 1); // prints.forEach((v, i) => v.priority = i + 1);
trims.forEach((v, i) => v.priority = i + 1); // trims.forEach((v, i) => v.priority = i + 1);
return {prints, trims}; return {prints, trims};
} }
@@ -1507,7 +1507,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
* 创建其他图层：印花、颜色、元素... * 创建其他图层：印花、颜色、元素...
* @param {Object} otherData - 其他图层数据 * @param {Object} otherData - 其他图层数据
*/ */
async createOtherLayers(otherData, isUpdate = false) { async createOtherLayers(otherData) {
if (!otherData) return console.warn("otherData 为空不需要添加"); if (!otherData) return console.warn("otherData 为空不需要添加");
this.canvas.loading.value = true; this.canvas.loading.value = true;
let resolve = ()=>{}; let resolve = ()=>{};
@@ -1515,17 +1515,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
const otherData_ = JSON.parse(JSON.stringify(otherData)); const otherData_ = JSON.parse(JSON.stringify(otherData));
console.log("==========创建其他图层", otherData_); console.log("==========创建其他图层", otherData_);
const updateColor = !!otherData_.color;
const updateSpecialGroup = !!otherData_.printObject || !!otherData_.trims;
// 删除颜色图层和特殊组图层 // 删除颜色图层和特殊组图层
const ids = []; const ids = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
if(isUpdate){
updateColor && ids.push(SpecialLayerId.COLOR)
updateSpecialGroup && ids.push(SpecialLayerId.SPECIAL_GROUP)
}else{
ids.push(SpecialLayerId.COLOR)
ids.push(SpecialLayerId.SPECIAL_GROUP)
}
this.layers.value = this.layers.value.filter((layer) => { this.layers.value = this.layers.value.filter((layer) => {
if(ids.includes(layer.id)){ if(ids.includes(layer.id)){
ids.push(...layer.children?.map((child) => child.id)); ids.push(...layer.children?.map((child) => child.id));
@@ -1533,11 +1524,15 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
} }
return true; return true;
}) })
this.canvas.getObjects().forEach((v) => ids.includes(v.id) && this.canvas.remove(v)) this.canvas.getObjects().forEach((v) => {
if(ids.includes(v.id) || ids.includes(v.layerId)){
this.canvas.remove(v)
}
})
// 创建颜色图层 // 创建颜色图层
otherData_.color && await this.createColorLayer(otherData_.color); await this.createColorLayer(otherData_.color);
const printTrimsLayers = [];// 印花和元素图层 const printTrimsLayers = [];// 印花和元素图层
const singleLayers = [];// 平铺图层 const singleLayers = [];// 平铺图层
@@ -1555,7 +1550,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
trims.type = "trims"; trims.type = "trims";
printTrimsLayers.unshift({...trims}); printTrimsLayers.unshift({...trims});
}) })
if(isUpdate ? updateSpecialGroup : true){ if(printTrimsLayers.length || singleLayers.length){
await this.createPrintTrimsLayers(printTrimsLayers, singleLayers); await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
} }
await this.changeCanvas(); await this.changeCanvas();
@@ -1686,7 +1681,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
let opacity = 1 let opacity = 1
let flipX = false; let flipX = false;
let flipY = false; let flipY = false;
let blendMode = BlendMode.MULTIPLY; let blendMode = BlendMode.NORMAL;
// if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常 // if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常
if(item.object){ if(item.object){
opacity = item.object.opacity opacity = item.object.opacity
@@ -1712,7 +1707,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
hasBorders: true, hasBorders: true,
isPrintTrims: true, isPrintTrims: true,
}); });
this.canvas.add(image); // this.canvas.add(image);
let layer = createLayer({ let layer = createLayer({
id: id, id: id,
name: name, name: name,
@@ -1723,7 +1718,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
isPrintTrims: true, isPrintTrims: true,
blendMode: blendMode, blendMode: blendMode,
fabricObjects: [image.toObject(["id", "layerId", "layerName"])], fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
metadata: {sourceData: item, level2Type: item.level2Type}, metadata: {sourceData: item},
object: image,
}) })
children.push(layer); children.push(layer);
}; };
@@ -1808,7 +1804,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
}, },
isPrintTrims: true, isPrintTrims: true,
}); });
this.canvas.add(rect); // this.canvas.add(rect);
let layer = createLayer({ let layer = createLayer({
id: id, id: id,
name: name, name: name,
@@ -1820,6 +1816,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
blendMode: blendMode, blendMode: blendMode,
fabricObjects: [rect.toObject(["id", "layerId", "layerName"])], fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
metadata: {sourceData: item}, metadata: {sourceData: item},
object: rect,
}) })
children.push(layer); children.push(layer);
}; };
@@ -1836,6 +1833,13 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
// children.push(layer); // children.push(layer);
// } // }
if(children.length === 0) return; if(children.length === 0) return;
// 印花元素排序
if(new Set(children.map(v => v.metadata.sourceData.priority)).size === children.length){
children.sort((a, b) => b.metadata.sourceData.priority - a.metadata.sourceData.priority);
}
children.forEach(layer => {
this.canvas.add(layer.object);
});
const groupRect = new fabric.Rect({}); const groupRect = new fabric.Rect({});
await this.setObjecCliptInfo(groupRect); await this.setObjecCliptInfo(groupRect);
// 插入组图层 // 插入组图层

69
src/component/Canvas/canvasExample.vue
View File

@@ -337,46 +337,49 @@
color: { rgba: { r: 255, g: 0, b: 0, a: 1 } }, color: { rgba: { r: 255, g: 0, b: 0, a: 1 } },
printObject: { printObject: {
prints: [ prints: [
// { {
// ifSingle: false, ifSingle: false,
// level2Type: "Pattern", level2Type: "Pattern",
// designType: "Library", designType: "Library",
// path: "/src/assets/images/canvas/yinhua1.jpg", path: "/src/assets/images/canvas/yinhua1.jpg",
// location: [800, 600], location: [800, 600],
// scale: [1, 1], scale: [1, 1],
// angle: 0, angle: 0,
// object: { priority: 1,
// top: 300, object: {
// left: 400, top: 300,
// scaleX: 0.5, left: 400,
// scaleY: 0.5, scaleX: 0.5,
// opacity: 1, scaleY: 0.5,
// angle: 0, opacity: 1,
// flipX: false, angle: 0,
// flipY: false, flipX: false,
// blendMode: "multiply", flipY: false,
// gapX: 0, // blendMode: "multiply",
// gapY: 0, gapX: 0,
// }, gapY: 0,
// }, },
// { },
// ifSingle: true,
// level2Type: "Pattern",
// designType: "Library",
// path: "/src/assets/images/canvas/yinhua1.jpg",
// location: [550, 650],
// scale: [0.15, 0.2],
// angle: 0,
// },
{ {
ifSingle: true, ifSingle: true,
level2Type: "Pattern", level2Type: "Pattern",
designType: "Library", designType: "Library",
path: "/src/assets/images/canvas/yinhua1.jpg", path: "/src/assets/images/canvas/yinhua1.jpg",
location: [700, 400], location: [550, 650],
scale: [0.1, 0.133], scale: [0.15, 0.2],
angle: 0, angle: 0,
priority: 2,
}, },
// {
// ifSingle: true,
// level2Type: "Pattern",
// designType: "Library",
// path: "/src/assets/images/canvas/yinhua1.jpg",
// location: [700, 400],
// scale: [0.1, 0.133],
// angle: 0,
// priority: 3,
// },
], ],
}, },
}); });

136
src/component/Detail/detailRight/editPrintElement.vue
View File

@@ -89,8 +89,8 @@
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${item.pattern?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> <img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${item.pattern?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
</div> </div>
</div> </div>
<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg"> --> <!-- <img :src="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.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))">
@@ -160,7 +160,6 @@ export default defineComponent({
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,
printStyleList:{ printStyleList:{
print:{ print:{
single:[], single:[],
@@ -174,7 +173,6 @@ export default defineComponent({
type:props.type, type:props.type,
imgDomIndex:-1, imgDomIndex:-1,
direction:'',//判断点的那条边 direction:'',//判断点的那条边
printZIndex:2,//印花优先级
sketchWH:{ sketchWH:{
width:0, width:0,
height:0, height:0,
@@ -225,6 +223,7 @@ export default defineComponent({
img.onload = ()=>{ img.onload = ()=>{
let imgScale = img.width / img.height let imgScale = img.width / img.height
let zoom = 2 let zoom = 2
console.log(editPrintElementData.sketchWH)
let width = editPrintElementData.sketchWH.width / zoom let width = editPrintElementData.sketchWH.width / zoom
let height = width / editPrintElementData.sketchWH.height let height = width / editPrintElementData.sketchWH.height
@@ -238,24 +237,44 @@ export default defineComponent({
x = sketchW / 2 x = sketchW / 2
y = sketchH / 2 y = sketchH / 2
} }
x = sketchW / 2
y = sketchH / 2
let location = [x,y] let location = [x,y]
resolve({scale,location}) resolve({scale,location})
} }
img.src = item.url img.src = item.url || item.path
}) })
} }
const addPrintELement = async (data:any)=>{ const addPrintELement = async (data:any)=>{
if(!editPrintElementData.isSketchLoad)return if(!editPrintElementData.isSketchLoad)return
let {scale,location} = await setScaleLocation(data) let {scale,location} = await setScaleLocation(data)
let printIndex = 0
let allElementPrint = []
if(props.type == 'print'){
allElementPrint = [
...(editPrintElementData.printStyleList.print.single || []),
...(editPrintElementData.printStyleList.print.overall || []),
...(editPrintElementData.selectDetail.trims.prints || []),
]
}else{
allElementPrint = [
...(editPrintElementData.printStyleList.element.single || []),
...(editPrintElementData.selectDetail.printObject.prints || []),
]
}
printIndex = Math.max(...allElementPrint.map(item => Number(item.priority))) + 1
console.log(printIndex)
let item = { let item = {
angle:0, angle:0,
designType:data.designType, designType:data.designType,
ifSingle:editPrintElementData.stateOverallSingle == 'single', ifSingle:editPrintElementData.stateOverallSingle == 'single',
level2Type:data.level2Type, level2Type:data.level2Type,
location:editPrintElementData.stateOverallSingle == 'single'?location:[0,0], location:location,
// location:editPrintElementData.stateOverallSingle == 'single'?location:[0,0],
minIOPath:data.minIOPath || data.originalUrl, minIOPath:data.minIOPath || data.originalUrl,
path:data.url, path:data.url,
priority:editPrintElementData.printZIndex, priority:printIndex,
scale, scale,
globalCompositeOperation:'', globalCompositeOperation:'',
} }
@@ -286,7 +305,7 @@ export default defineComponent({
angle : item.pattern.transform.rotateZ, angle : item.pattern.transform.rotateZ,
// angle : !this.overallSingle ? 0:item.pattern.transform.rotateZ, // angle : !this.overallSingle ? 0:item.pattern.transform.rotateZ,
location : location, location : location,
priority:index, priority:item.priority,
scale: scale, scale: scale,
designType:item.designType, designType:item.designType,
level2Type:item.level2Type, level2Type:item.level2Type,
@@ -301,10 +320,14 @@ export default defineComponent({
if(editPrintElementData.printStyleList[props.type].single.length>0){ if(editPrintElementData.printStyleList[props.type].single.length>0){
sort(editPrintElementData.printStyleList[props.type].single) sort(editPrintElementData.printStyleList[props.type].single)
} }
if(editPrintElementData.printStyleList[props.type].overall.length>0){
sort(editPrintElementData.printStyleList[props.type].overall)
}
editPrintElementData.printStyleList[props.type].overall.forEach((item:any)=>{ editPrintElementData.printStyleList[props.type].overall.forEach((item:any)=>{
data.push(setData(item,index)) data.push(setData(item,index))
index++ index++
}) })
console.log(editPrintElementData.printStyleList[props.type].single)
editPrintElementData.printStyleList[props.type].single.forEach((item:any)=>{ editPrintElementData.printStyleList[props.type].single.forEach((item:any)=>{
data.push(setData(item,index)) data.push(setData(item,index))
index++ index++
@@ -336,10 +359,10 @@ export default defineComponent({
top = item.location[1] / editPrintElementData.sketchWH.scale[1] top = item.location[1] / editPrintElementData.sketchWH.scale[1]
}else{ }else{
//overall //overall
editPrintElementData.systemDesignerPercentage = item.scale[0]*1000 console.log(item)
left = item.location[0] / editPrintElementData.sketchWH.scale[0] left = item.location[0] / editPrintElementData.sketchWH.scale[0]
top = item.location[1] / editPrintElementData.sketchWH.scale[1] top = item.location[1] / editPrintElementData.sketchWH.scale[1]
editPrintElementData.systemDesignerPercentage = item.scale?.[0]?item.scale[0]*100:30 item.scale = [1,1]
} }
let pattern = { let pattern = {
centers:{left:0,top:0}, centers:{left:0,top:0},
@@ -357,7 +380,6 @@ export default defineComponent({
}, },
designOpenrtionBtn:false designOpenrtionBtn:false
} }
editPrintElementData.printZIndex++
item.pattern = pattern item.pattern = pattern
if(item.object){ if(item.object){
@@ -400,51 +422,49 @@ export default defineComponent({
} }
} }
} }
const setPosition = ()=>{ const setPosition = async ()=>{
nextTick(()=>{ await new Promise<void>((resolve, reject) => {
let img = new Image nextTick(()=>{
img.onload = ()=>{ let img = new Image
// let sketchScale = editPrintElementData.selectDetail.layersObject[0].scale img.onload = ()=>{
let sketchScale = [1,1] // let sketchScale = editPrintElementData.selectDetail.layersObject[0].scale
let scaleX = img.width * sketchScale[0] / editPrintElementDom.sketchImg.offsetWidth let sketchScale = [1,1]
let scaleY = img.height * sketchScale[1] / editPrintElementDom.sketchImg.offsetHeight let scaleX = img.width * sketchScale[0] / editPrintElementDom.sketchImg.offsetWidth
let scaleY = img.height * sketchScale[1] / editPrintElementDom.sketchImg.offsetHeight
editPrintElementData.sketchWH = { editPrintElementData.sketchWH = {
width:editPrintElementDom.sketchImg.offsetWidth, width:editPrintElementDom.sketchImg.offsetWidth,
height:editPrintElementDom.sketchImg.offsetHeight, height:editPrintElementDom.sketchImg.offsetHeight,
scale:[scaleX,scaleY], scale:[scaleX,scaleY],
}
if(!editPrintElementData.selectDetail.printObject.prints)return
let state = true
// editPrintElementData.stateOverallSingle = 'single'
let arr:any = editPrintElementData.selectDetail.printObject.prints
if(props.type == 'element'){
arr = editPrintElementData.selectDetail.trims.prints
}
// if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
// arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
// }
if(arr && arr.length > 0){
editPrintElementData.printStyleList[props.type].single = []
editPrintElementData.printStyleList[props.type].overall = []
arr.forEach((item:any)=>{
// if(!item.ifSingle){
// editPrintElementData.stateOverallSingle = 'overall',
// state = false
// }
getItemPosition(item)
})
setItemPosition()
}
resolve('')
} }
if(!editPrintElementData.selectDetail.printObject.prints)return img.src = editPrintElementData.selectDetail.path
let state = true })
// editPrintElementData.stateOverallSingle = 'single'
let arr:any = editPrintElementData.selectDetail.printObject.prints
if(props.type == 'element'){
arr = editPrintElementData.selectDetail.trims.prints
}
// if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
// arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
// }
if(arr && arr.length > 0){
editPrintElementData.printStyleList[props.type].single = []
editPrintElementData.printStyleList[props.type].overall = []
arr.forEach((item:any)=>{
// if(!item.ifSingle){
// editPrintElementData.stateOverallSingle = 'overall',
// state = false
// }
getItemPosition(item)
})
setItemPosition()
}
// if(props.type == 'print'){
// editPrintElementData.overallSingle = state
// }
}
// undividedLayer
//计算宽高使用editPrintElementData.selectDetail.path
// img.src = editPrintElementData.selectDetail.path
img.src = editPrintElementData.selectDetail.undividedLayer?editPrintElementData.selectDetail.undividedLayer:editPrintElementData.selectDetail.path
}) })
} }
// watch(()=>editPrintElementData.selectDetail?.id,(newVal)=>{ // watch(()=>editPrintElementData.selectDetail?.id,(newVal)=>{
// if(!newVal)return // if(!newVal)return
@@ -518,7 +538,6 @@ export default defineComponent({
let scale = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0]) let scale = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
let rotateZ = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0]) let rotateZ = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.designOpenrtionBtn = true editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.designOpenrtionBtn = true
// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.zIndex = editPrintElementData.printZIndex++
editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.transform = { editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.transform = {
scale:scale, scale:scale,
rotateZ:rotateZ?rotateZ:0, rotateZ:rotateZ?rotateZ:0,
@@ -652,7 +671,6 @@ export default defineComponent({
top:editPrintElementDom.imgDom.offsetTop+'px', top:editPrintElementDom.imgDom.offsetTop+'px',
height:editPrintElementDom.imgDom.offsetHeight+'px', height:editPrintElementDom.imgDom.offsetHeight+'px',
width:editPrintElementDom.imgDom.offsetWidth+'px', width:editPrintElementDom.imgDom.offsetWidth+'px',
// zIndex:editPrintElementData.printZIndex
} }
document.removeEventListener('mousemove',sizeMouseMove) document.removeEventListener('mousemove',sizeMouseMove)
document.removeEventListener('touchmove',sizeTouchmove) document.removeEventListener('touchmove',sizeTouchmove)
@@ -804,7 +822,8 @@ export default defineComponent({
}; };
} }
}; };
elList[item.index].sort = moveIndex; let index = elList.findIndex((elListItem:any)=>item.id == elListItem.id)
elList[index].sort = moveIndex;
moveItem(); moveItem();
} }
} }
@@ -835,6 +854,7 @@ export default defineComponent({
collItemSize.elList.forEach((elItem:any)=>{ collItemSize.elList.forEach((elItem:any)=>{
let clothesIndex = arr.findIndex((item:any)=>item.uniqueId == elItem.uniqueId) let clothesIndex = arr.findIndex((item:any)=>item.uniqueId == elItem.uniqueId)
arr[clothesIndex].pattern.style.zIndex = elItem.sort arr[clothesIndex].pattern.style.zIndex = elItem.sort
arr[clothesIndex].priority = elItem.id.split('_')[0]
// let clothesId = editPrintElementData.designDetail.clothes[clothesIndex].id // let clothesId = editPrintElementData.designDetail.clothes[clothesIndex].id
// editPrintElementData.designDetail.clothes[clothesIndex].priority = elItem.sort // editPrintElementData.designDetail.clothes[clothesIndex].priority = elItem.sort
// let frontIndex = editPrintElementData.frontBack_.front.findIndex((item:any)=>item.id == clothesId) // let frontIndex = editPrintElementData.frontBack_.front.findIndex((item:any)=>item.id == clothesId)
@@ -855,7 +875,6 @@ export default defineComponent({
let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle] let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
arr.forEach((item,index) => {item.uniqueId = `${Date.now()}_${index}`}); arr.forEach((item,index) => {item.uniqueId = `${Date.now()}_${index}`});
const sortedArray = [...arr].sort((a, b) => a.priority - b.priority); const sortedArray = [...arr].sort((a, b) => a.priority - b.priority);
const sortMap = {} as any; const sortMap = {} as any;
sortedArray.forEach((item, index) => { sortedArray.forEach((item, index) => {
@@ -866,7 +885,8 @@ export default defineComponent({
el: elArr[i], el: elArr[i],
// sort: elArr.length - i -1, // sort: elArr.length - i -1,
sort: sortMap[arr[i].priority], sort: sortMap[arr[i].priority],
index: i, id: `${arr[i].priority}_${Date.now() + i}`,
// index: i,
uniqueId:arr[i]?.uniqueId || 99999, uniqueId:arr[i]?.uniqueId || 99999,
}); });
} }

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

File diff suppressed because one or more lines are too long

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

@@ -81,7 +81,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
left:v.layersObject[i].position?.[1], left:v.layersObject[i].position?.[1],
width:v.layersObject[i].imageSize?.[0], width:v.layersObject[i].imageSize?.[0],
height:v.layersObject[i].imageSize?.[1], height:v.layersObject[i].imageSize?.[1],
transform:`scaleX(${v.layersObject[i].transpose?.[0] || 1}) scaleY(${v.layersObject[i].transpose?.[1] || 1}) rotate(${v.layersObject?.[i]?.rotate || 0}deg)`, transform:`rotate(${v.layersObject?.[i]?.rotate || 0}deg) scaleX(${v.layersObject[i].transpose?.[0] || 1}) scaleY(${v.layersObject[i].transpose?.[1] || 1})`,
} }
v.layersObject[i].centers={ v.layersObject[i].centers={
left:0, left:0,