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

添加印花元素排序priority

Browse Source
This commit is contained in:
李志鹏
2026-02-02 09:47:10 +08:00
parent 811e179889
commit fdb6a87ab4
5 changed files with 64 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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);

46
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,11 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
// children.push(layer); // children.push(layer);
// } // }
if(children.length === 0) return; if(children.length === 0) return;
// 印花元素排序
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);
// 插入组图层 // 插入组图层

67
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,
flipY: false,
// blendMode: "multiply", // blendMode: "multiply",
// gapX: 0, gapX: 0,
// gapY: 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,
// },
], ],
}, },
}); });