diff --git a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue index 69a3dcf0..c7040c4c 100644 --- a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue +++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue @@ -590,6 +590,8 @@ function handleLayerClick(layer, event) { // 否则直接设置当前图层为活动图层 setActiveLayer(layer.id); layerManager?.updateLayersObjectsInteractivity(); + // 选中画布中的图层对象 + layerManager?.selectLayerObjects(layer.id); } } lastSelectedIndex.value = sortableRootLayers.value.findIndex((l) => l.id === layer.id); diff --git a/src/component/Canvas/CanvasEditor/managers/LayerManager.js b/src/component/Canvas/CanvasEditor/managers/LayerManager.js index 583abb11..750f75b9 100644 --- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js +++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js @@ -1028,6 +1028,49 @@ export class LayerManager { } } + /** + * 选择图层下的所有对象 + * @param {string} layerId 图层ID + * @returns {fabric.ActiveSelection|null} 返回活动选择组或null + */ + async selectLayerObjects(layerId) { + // 查找图层 + const { layer } = findLayerRecursively(this.layers.value, layerId); + if (!layer) { + console.error(`图层 ${layerId} 不存在`); + return; + } + // 获取图层下的所有对象 + const objects = + layer.fabricObjects + ?.map((obj) => { + const { object } = findObjectById(this.canvas, obj.id); + return object; + }) + ?.filter(Boolean) || []; + if (objects.length === 0) { + console.warn(`图层 ${layerId} 没有对象可供选择`); + return; + } + // 切换到选择模式 + this?.toolManager?.setTool(OperationType.SELECT); + // 创建一个新的活动选择组 + const activeSelection = new fabric.ActiveSelection(objects, { + canvas: this.canvas, + preserveObjectStacking: true, // 保留对象堆叠顺序 + }); + // 设置活动选择组的属性 + this.canvas.setActiveObject(activeSelection); + // 渲染画布 + this.canvas.renderAll(); + // 设置活动选择组的坐标 + activeSelection.setCoords(); + // 更新对象交互性 + this.updateLayersObjectsInteractivity(); + // 返回活动选择组 + return activeSelection; + } + /** * 切换图层可见性 * @param {string} layerId 图层ID