feat: 添加选择图层下所有对象的功能,优化图层交互性管理
This commit is contained in:
@@ -590,6 +590,8 @@ function handleLayerClick(layer, event) {
|
|||||||
// 否则直接设置当前图层为活动图层
|
// 否则直接设置当前图层为活动图层
|
||||||
setActiveLayer(layer.id);
|
setActiveLayer(layer.id);
|
||||||
layerManager?.updateLayersObjectsInteractivity();
|
layerManager?.updateLayersObjectsInteractivity();
|
||||||
|
// 选中画布中的图层对象
|
||||||
|
layerManager?.selectLayerObjects(layer.id);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
lastSelectedIndex.value = sortableRootLayers.value.findIndex((l) => l.id === layer.id);
|
lastSelectedIndex.value = sortableRootLayers.value.findIndex((l) => l.id === layer.id);
|
||||||
|
|||||||
@@ -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
|
* @param {string} layerId 图层ID
|
||||||
|
|||||||
Reference in New Issue
Block a user