feat: 优化部分问题,完善选区功能

This commit is contained in:
bighuixiang
2025-07-04 03:16:18 +08:00
parent b6afd2764d
commit 0615ab31f9
12 changed files with 1892 additions and 1144 deletions

View File

@@ -1059,7 +1059,7 @@ export class CanvasManager {
console.log("画布JSON数据加载完成");
// 画布初始化事件
this.handleCanvasInit?.(ture);
this.handleCanvasInit?.(true);
resolve();
} catch (error) {
console.error("恢复图层数据失败:", error);

View File

@@ -377,24 +377,23 @@ export class LayerManager {
*/
async createLayer(name = null, type = LayerType.EMPTY, options = {}) {
// 生成唯一ID
const layerId =
options.id ||
options.layerId ||
generateId("layer_") ||
`layer_${Date.now()}_${Math.floor(Math.random() * 1000)}`;
const layerIndex = this.layers.value.length;
const layerId = options.id || options.layerId || generateId("layer_");
// 计算普通图层数量(非背景、非固定)
const normalLayersCount = this.layers.value.filter(
(layer) => !layer.isBackground && !layer.isFixed
).length;
// 计算插入位置如果没有指定insertIndex则根据当前选中图层决定插入位置
// 添加到图层列表
let insertIndex = this._getInsertIndexAboveActiveLayer();
if (options.insertIndex !== undefined) {
insertIndex = options.insertIndex;
}
// let insertIndex = this._getInsertIndexAboveActiveLayer();
// if (options.insertIndex !== undefined) {
// insertIndex = options.insertIndex;
// }
// 创建新图层
const newLayer = createLayer({
id: layerId,
name: name || `图层 ${layerIndex + 1}`,
name: name || `图层 ${normalLayersCount + 1}`,
type: type,
visible: true,
locked: false,
@@ -411,14 +410,9 @@ export class LayerManager {
layers: this.layers,
newLayer: newLayer,
activeLayerId: this.activeLayerId,
insertIndex: insertIndex,
options,
});
// 计算普通图层数量(非背景、非固定)
const normalLayersCount = this.layers.value.filter(
(layer) => !layer.isBackground && !layer.isFixed
).length;
// 如果有额外选项设置命令的undoable属性
command.undoable = options.undoable;
@@ -921,6 +915,48 @@ export class LayerManager {
}
}
// 设置激活当前图层下画布中的所有对象,并变成选择组
setAllActiveGroupLayerCanvasObject(layer) {
// 获取当前图层下所有元素
// 选择当前组下所有画布元素
const allObjects = layer.children.reduce((acc, child) => {
// 如果子图层有fabricObjects则添加到结果数组
child?.fabricObjects?.forEach((obj) => {
const { object } = findObjectById(this.canvas, obj.id);
if (object) {
acc.push(object);
}
});
if (child?.fabricObject) {
const { object } = findObjectById(this.canvas, child?.fabricObject.id);
if (object) {
acc.push(object);
}
}
return acc;
}, []);
if (allObjects.length) {
// 切换到选择模式
this?.toolManager?.setTool(OperationType.SELECT);
// 如果有对象,创建选择组
this.canvas.discardActiveObject(); // 取消当前活动对象
// 选中多个对象,不是创建组
// 多个对象时创建活动选择组
const activeSelection = new fabric.ActiveSelection(allObjects, {
canvas: this.canvas,
});
// 设置活动选择组的属性
this.canvas.setActiveObject(activeSelection);
this.canvas.renderAll();
}
}
/**
* 切换图层可见性
* @param {string} layerId 图层ID
@@ -943,6 +979,22 @@ export class LayerManager {
}
}
/**
* 查询图层可见性
* @param {string} layerId 图层ID
* @returns {boolean} 图层是否可见
*/
getLayerVisibility(layerId) {
// 查找图层
const { layer } = findLayerRecursively(this.layers.value, layerId);
if (!layer) {
console.error(`图层 ${layerId} 不存在`);
return false;
}
// 返回图层的可见性状态
return layer.visible;
}
/**
* 切换图层锁定状态
* @param {string} layerId 图层ID