diff --git a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js index 97f551be..1dffba96 100644 --- a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js +++ b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js @@ -116,7 +116,7 @@ export class AddLayerCommand extends Command { parentLayer.children.splice(insertIndex, 0, newLayer); console.log( - `新图层已插入到子图层位置: ${insertIndex} (父图层: ${parentLayer.name})` + `新图层已插入到子图层位置: ${insertIndex} (父图层: ${parentLayer.name})` ); } else { // 当前激活图层是一级图层 @@ -2569,7 +2569,6 @@ export class CreateImageLayerCommand extends Command { this.fabricImage = options.fabricImage; this.toolManager = options.toolManager; this.layerName = options.layerName || null; - this.imageId = generateId("image_"); // 存储执行过程中的结果 @@ -2617,6 +2616,18 @@ export class CreateImageLayerCommand extends Command { this.commands.push(createLayerCmd); this.executedCommands.push(createLayerCmd); + // 新加功能-选区套索内添加图片自动居中 + const { parent } = findLayerRecursively(this.layerManager.layers.value, this.newLayerId); + if(parent && parent.selectObject){ + let {top,left,width,height} = parent.selectObject; + const ltop = top + height / 2; + const lleft = left + width / 2; + this.fabricImage.set({ + top: ltop, + left: lleft, + }) + } + // 2. 添加图片对象到图层命令 const addObjectCmd = new AddObjectToLayerCommand({ canvas: this.layerManager.canvas, @@ -4197,6 +4208,7 @@ export class RemoveChildLayerCommand extends Command { this.isActiveLayer = this.layerId === this.activeLayerId.value; this.originalObjects = this.canvas.getObjects().filter((obj) => { + obj.parentId = this.parentId; return obj.layerId === this.layerId; }); } diff --git a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue index 77bc67a6..8f573217 100644 --- a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue +++ b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue @@ -398,7 +398,7 @@ const handleToolClick = (tool) => { .tools-list{ display: flex; flex-direction: column; - gap: 1.0rem; + gap: 0.7rem; flex: 1; overflow-y: auto; overflow-x: hidden; diff --git a/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js b/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js index 8306e125..e906d467 100644 --- a/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js +++ b/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js @@ -706,7 +706,8 @@ export class CanvasEventManager { if (e.target.id) { // 如果该元素是分组图层的一部分,也更新分组图层的缩略图 if (e.target.parentId) { - setTimeout(() => this.updateLayerThumbnail(e.target.parentId), 50); + // setTimeout(() => this.updateLayerThumbnail(e.target.parentId), 50); + this.thumbnailManager.generateLayerThumbnail(e.target.parentId); } } }