diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index 23bc7bad..4e29940b 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js @@ -44,7 +44,7 @@ import { } from "../utils/layerUtils"; import { imageModeHandler } from "../utils/imageHelper"; import { getObjectAlphaToCanvas } from "../utils/objectHelper"; -import { AddLayerCommand } from "../commands/LayerCommands"; +import { AddLayerCommand, RemoveLayerCommand } from "../commands/LayerCommands"; import { fa, id } from "element-plus/es/locales.mjs"; import i18n from "@/lang/index.ts"; const {t} = i18n.global; @@ -1344,7 +1344,7 @@ export class CanvasManager { // console.log("图层关联验证结果:", isValidate); // 排序 // 使用LayerSort工具重新排列画布对象(如果可用) - // await this?.layerManager?.layerSort?.rearrangeObjects(); + await this?.layerManager?.layerSort?.rearrangeObjects(); this.layerManager.activeLayerId.value = this.layers.value[0] .children?.length @@ -1393,28 +1393,37 @@ export class CanvasManager { if (!otherData) return console.warn("otherData 为空不需要添加"); const otherData_ = JSON.parse(JSON.stringify(otherData)); console.log("==========创建其他图层", otherData_); + + // 删除颜色图层和特殊组图层 + const ids = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP]; + this.layers.value = this.layers.value.filter((layer) => { + if(ids.includes(layer.id)){ + ids.push(...layer.children?.map((child) => child.id)); + return false; + } + return true; + }) + this.canvas.getObjects().forEach((v) => ids.includes(v.id) && this.canvas.remove(v)) + + // 创建颜色图层 await this.createColorLayer(otherData_.color); - if(findLayer(this.layers.value, SpecialLayerId.SPECIAL_GROUP)){ - console.warn("画布中已存在印花和元素组图层"); - }else{ - const printTrimsLayers = [];// 印花和元素图层 - const singleLayers = [];// 平铺图层 - otherData_?.printObject?.prints?.forEach((print, index) => { - print.name = t("Canvas.Print") + (index + 1); - if(print.ifSingle){ - printTrimsLayers.unshift({...print}); - }else{ - singleLayers.unshift({...print}); - } - }) - otherData_?.trims?.prints?.forEach((trims, index) => { - trims.name = t("Canvas.Elements") + (index + 1); - printTrimsLayers.unshift({...trims}); - }) - await this.createPrintTrimsLayers(printTrimsLayers, singleLayers); - } + const printTrimsLayers = [];// 印花和元素图层 + const singleLayers = [];// 平铺图层 + otherData_?.printObject?.prints?.forEach((print, index) => { + print.name = t("Canvas.Print") + (index + 1); + if(print.ifSingle){ + printTrimsLayers.unshift({...print}); + }else{ + singleLayers.unshift({...print}); + } + }) + otherData_?.trims?.prints?.forEach((trims, index) => { + trims.name = t("Canvas.Elements") + (index + 1); + printTrimsLayers.unshift({...trims}); + }) + await this.createPrintTrimsLayers(printTrimsLayers, singleLayers); await this.changeCanvas(); } @@ -1457,7 +1466,9 @@ export class CanvasManager { } async createColorLayer(color){ if(!color) return console.warn("颜色为空不需要添加"); - if(findLayer(this.layers.value, SpecialLayerId.COLOR)) return console.warn("画布中已存在颜色图层"); + // if(findLayer(this.layers.value, SpecialLayerId.COLOR)) { + // return console.warn("画布中已存在颜色图层"); + // } console.log("==========添加颜色图层", color, this.layers.value.length) // 创建颜色图层对象 const colorRect = new fabric.Rect({ @@ -1466,6 +1477,9 @@ export class CanvasManager { layerName: t("Canvas.color"), isVisible: true, isLocked: true, + selectable: false, + hasControls: false, + hasBorders: false, globalCompositeOperation: BlendMode.MULTIPLY, originColor: color, }); @@ -1496,6 +1510,9 @@ export class CanvasManager { // 创建印花和元素图层 async createPrintTrimsLayers(printTrimsLayers, singleLayers){ + // if(findLayer(this.layers.value, SpecialLayerId.SPECIAL_GROUP)) { + // return console.warn("画布中已存在印花和元素组图层"); + // } console.log("==========添加印花和元素图层组", printTrimsLayers, singleLayers) const fixedLayerObj = this.getFixedLayerObject(); const flWidth = fixedLayerObj.width