aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化填充组图层背景命令，支持实时更新和撤销功能，改进填充对象的处理逻辑

Browse Source
This commit is contained in:
bighuixiang
2025-07-16 11:35:52 +08:00
parent e31a619bd6
commit 5f29e488ed
9 changed files with 372 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/component/Canvas/CanvasEditor/managers/LayerManager.js
View File

@@ -340,14 +340,14 @@ export class LayerManager {
}
// 如果是组图层 则给所有子对象设置裁剪对象
if (layer.type === LayerType.GROUP || layer.children?.length > 0) {
if (layer.fill) {
const fabricObject = this.canvas.getObjects().find((o) => o.id === layer.fill.id);
if (fabricObject) {
fabricObject.clipPath = clippingMaskFabricObject;
fabricObject.dirty = true; // 标记为脏对象
fabricObject.setCoords();
}
}
// if (layer.fill) {
// const fabricObject = this.canvas.getObjects().find((o) => o.id === layer.fill.id);
// if (fabricObject) {
// fabricObject.clipPath = clippingMaskFabricObject;
// fabricObject.dirty = true; // 标记为脏对象
// fabricObject.setCoords();
// }
// }
layer.children.forEach((childLayer) => {
const childObj = this.canvas.getObjects().find((o) => o.layerId === childLayer.id);
if (childObj) {
@@ -356,14 +356,14 @@ export class LayerManager {
childObj.setCoords();
}
if (childLayer.fill) {
const fabricObject = this.canvas.getObjects().find((o) => o.id === childLayer.fill.id);
if (fabricObject) {
fabricObject.clipPath = clippingMaskFabricObject;
fabricObject.dirty = true; // 标记为脏对象
fabricObject.setCoords();
}
}
// if (childLayer.fill) {
// const fabricObject = this.canvas.getObjects().find((o) => o.id === childLayer.fill.id);
// if (fabricObject) {
// fabricObject.clipPath = clippingMaskFabricObject;
// fabricObject.dirty = true; // 标记为脏对象
// fabricObject.setCoords();
// }
// }
});
} else {
layer.fabricObjects?.forEach((obj) => {
@@ -375,14 +375,14 @@ export class LayerManager {
}
});
if (layer.fill) {
const fabricObject = this.canvas.getObjects().find((o) => o.id === layer.fill.id);
if (fabricObject) {
fabricObject.clipPath = clippingMaskFabricObject;
fabricObject.dirty = true; // 标记为脏对象
fabricObject.setCoords();
}
}
// if (layer.fill) {
// const fabricObject = this.canvas.getObjects().find((o) => o.id === layer.fill.id);
// if (fabricObject) {
// fabricObject.clipPath = clippingMaskFabricObject;
// fabricObject.dirty = true; // 标记为脏对象
// fabricObject.setCoords();
// }
// }
}
});
}
@@ -391,9 +391,10 @@ export class LayerManager {
* 填充图层背景
* @param {string} layerId 图层ID
* @param {string} fillColor 填充颜色
* @param {boolean} undoable 是否可撤销
*/
async fillLayerBackground(layerId, fillColor) {
await this.backgroundFillManager.fillLayerBackground(layerId, fillColor);
async fillLayerBackground(layerId, fillColor, undoable = true) {
await this.backgroundFillManager.fillLayerBackground(layerId, fillColor, undoable);
}
/**
@@ -963,13 +964,13 @@ export class LayerManager {
return acc;
}, []);
if (layer.fill) {
// 如果图层有填充颜色，设置所有对象的填充颜色
const { object } = findObjectById(this.canvas, layer.fill.id);
if (object) {
allObjects.push(object);
}
}
// if (layer.fill) {
// // 如果图层有填充颜色，设置所有对象的填充颜色
// const { object } = findObjectById(this.canvas, layer.fill.id);
// if (object) {
// allObjects.push(object);
// }
// }
if (allObjects.length) {
// 切换到选择模式