From 10fc0dab106dbaadcd9bf410aed88f7f469e4fd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Thu, 2 Oct 2025 13:41:03 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E7=94=BB=E5=B8=83=E9=80=89=E5=8C=BA?= =?UTF-8?q?=E7=BC=A9=E7=95=A5=E5=9B=BE=E6=9B=B4=E6=96=B0=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Canvas/CanvasEditor/commands/LayerCommands.js | 3 ++- src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue | 2 +- .../Canvas/CanvasEditor/managers/events/CanvasEventManager.js | 3 ++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js index 97f551be..a1fda200 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})`, newLayer.fabricObjects.length ); } else { // 当前激活图层是一级图层 @@ -4197,6 +4197,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); } } } From 8c6f124a86256c857147c2be23ec51be7458ca71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Thu, 2 Oct 2025 15:29:11 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E9=80=89=E5=8C=BA=E5=A5=97=E7=B4=A2?= =?UTF-8?q?=E5=86=85=E6=B7=BB=E5=8A=A0=E5=9B=BE=E7=89=87=E8=87=AA=E5=8A=A8?= =?UTF-8?q?=E5=B1=85=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Canvas/CanvasEditor/commands/LayerCommands.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js index a1fda200..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})`, newLayer.fabricObjects.length + `新图层已插入到子图层位置: ${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,