diff --git a/src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js b/src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js index 87dbcd70..9b3ffaa6 100644 --- a/src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js +++ b/src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js @@ -1,4 +1,8 @@ -import { findObjectById, generateId, optimizeCanvasRendering } from "../utils/helper.js"; +import { + findObjectById, + generateId, + optimizeCanvasRendering, +} from "../utils/helper.js"; import { imageModeHandler } from "../utils/imageHelper.js"; import { LayerType, OperationType } from "../utils/layerHelper.js"; import { Command, CompositeCommand } from "./Command.js"; @@ -54,7 +58,9 @@ export class BatchInitializeRedGreenModeCommand extends Command { const layers = this.layerManager.layers?.value || []; const backgroundLayer = layers.find((layer) => layer.isBackground); const fixedLayer = layers.find((layer) => layer.isFixed); - const normalLayers = layers.filter((layer) => !layer.isBackground && !layer.isFixed); + const normalLayers = layers.filter( + (layer) => !layer.isBackground && !layer.isFixed + ); if (!backgroundLayer || !fixedLayer || normalLayers.length === 0) { throw new Error("缺少必要的图层结构"); @@ -70,7 +76,9 @@ export class BatchInitializeRedGreenModeCommand extends Command { } : null; - this.originalFixedObjects = fixedLayer.fabricObject ? [fixedLayer.fabricObject] : []; + this.originalFixedObjects = fixedLayer.fabricObject + ? [fixedLayer.fabricObject] + : []; this.originalNormalObjects = normalLayer.fabricObjects ? [...normalLayer.fabricObjects] @@ -110,7 +118,11 @@ export class BatchInitializeRedGreenModeCommand extends Command { await this._setupClothingImage(clothingImg, fixedLayer); // 7. 设置红绿图到普通图层,位置和大小与衣服底图一致 - await this._setupRedGreenImage(redGreenImg, normalLayer, this.clothingImage); + await this._setupRedGreenImage( + redGreenImg, + normalLayer, + this.clothingImage + ); // 4. 确保背景图层大小和衣服地图大小一致 const backgroundObject = await this._setupBackgroundLayer( @@ -146,7 +158,6 @@ export class BatchInitializeRedGreenModeCommand extends Command { this.redGreenImageMask.set({ absolutePositioned: true, opacity: 0.01, // 设置为几乎透明 - type: "redGreenImageMask", id: generateId("redGreenImageMask_"), }); // this.canvas.add(this.redGreenImageMask); @@ -195,9 +206,13 @@ export class BatchInitializeRedGreenModeCommand extends Command { async _createAndActivateEmptyLayer() { // 创建新的空白图层 const newLayerName = "绘制图层"; - const newLayerId = await this.layerManager.createLayer(newLayerName, LayerType.BITMAP, { - undoable: false, - }); + const newLayerId = await this.layerManager.createLayer( + newLayerName, + LayerType.BITMAP, + { + undoable: false, + } + ); // 设置为活动图层 if (newLayerId) { @@ -212,14 +227,19 @@ export class BatchInitializeRedGreenModeCommand extends Command { await optimizeCanvasRendering(this.canvas, async () => { // 1. 恢复画布背景 if (this.originalCanvasBackground !== null) { - this.canvas.setBackgroundColor(this.originalCanvasBackground, () => {}); + this.canvas.setBackgroundColor( + this.originalCanvasBackground, + () => {} + ); } // 2. 恢复图层对象 const layers = this.layerManager.layers?.value || []; const backgroundLayer = layers.find((layer) => layer.isBackground); const fixedLayer = layers.find((layer) => layer.isFixed); - const normalLayers = layers.filter((layer) => !layer.isBackground && !layer.isFixed); + const normalLayers = layers.filter( + (layer) => !layer.isBackground && !layer.isFixed + ); // 移除当前添加的对象 if (this.clothingImage) { @@ -231,7 +251,9 @@ export class BatchInitializeRedGreenModeCommand extends Command { // 移除新创建的空白图层 if (this.newEmptyLayerId) { - const emptyLayerIndex = layers.findIndex((layer) => layer.id === this.newEmptyLayerId); + const emptyLayerIndex = layers.findIndex( + (layer) => layer.id === this.newEmptyLayerId + ); if (emptyLayerIndex !== -1) { layers.splice(emptyLayerIndex, 1); } @@ -247,7 +269,9 @@ export class BatchInitializeRedGreenModeCommand extends Command { // 恢复固定图层 if (fixedLayer) { fixedLayer.fabricObject = - this.originalFixedObjects.length > 0 ? this.originalFixedObjects[0] : null; + this.originalFixedObjects.length > 0 + ? this.originalFixedObjects[0] + : null; if (fixedLayer.fabricObject) { this.canvas.add(fixedLayer.fabricObject); @@ -286,7 +310,8 @@ export class BatchInitializeRedGreenModeCommand extends Command { // 4. 恢复工具状态 if (this.toolManager && this.originalToolState) { - this.toolManager.isRedGreenMode = this.originalToolState.isRedGreenMode; + this.toolManager.isRedGreenMode = + this.originalToolState.isRedGreenMode; if (this.originalToolState.currentTool) { this.toolManager.setTool(this.originalToolState.currentTool); } @@ -408,7 +433,10 @@ export class BatchInitializeRedGreenModeCommand extends Command { // 清除固定图层原有内容 if (fixedLayer.fabricObject) { - const { object } = findObjectById(this.canvas, fixedLayer.fabricObject.id); + const { object } = findObjectById( + this.canvas, + fixedLayer.fabricObject.id + ); if (object) this.canvas.remove(object); }