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

11
src/component/Canvas/CanvasEditor/managers/BackgroundFillManager.js
View File

@@ -1,3 +1,4 @@
import { FillGroupLayerBackgroundCommand } from "../commands/FillGroupLayerBackgroundCommand";
import { FillLayerBackgroundCommand } from "../commands/FillLayerBackgroundCommand";
export class BackgroundFillManager {
@@ -12,15 +13,21 @@ export class BackgroundFillManager {
* 填充指定图层背景
* @param {string} layerId 图层ID
* @param {string} fillColor 填充颜色
* @param {boolean} undoable 是否可撤销
* @returns {Promise<void>}
*/
async fillLayerBackground(layerId, fillColor) {
const command = new FillLayerBackgroundCommand({
async fillLayerBackground(layerId, fillColor, undoable) {
const command = new FillGroupLayerBackgroundCommand({
canvas: this.canvas,
layers: this.layers,
layerId,
fillColor,
canvasManager: this.canvasManager,
// 是否实时更新
isRetimeUpdate: !undoable,
});
command.undoable = undoable;
if (this.commandManager) {
await this.commandManager.execute(command);
} else {

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) {
// 切换到选择模式

24
src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js
View File

@@ -143,18 +143,18 @@ export class ThumbnailManager {
const objectsWithZIndex = [];
layersToRasterize.forEach((layer) => {
if (layer.fill) {
const { object } = findObjectById(this.canvas, layer.fill.id);
if (object) {
// 获取对象在画布中的z-index（数组索引）
const zIndex = allCanvasObjects.indexOf(object);
objectsWithZIndex.push({
object: object,
zIndex: zIndex,
layerObj: layer.fill,
});
}
}
// if (layer.fill) {
// const { object } = findObjectById(this.canvas, layer.fill.id);
// if (object) {
// // 获取对象在画布中的z-index（数组索引）
// const zIndex = allCanvasObjects.indexOf(object);
// objectsWithZIndex.push({
// object: object,
// zIndex: zIndex,
// layerObj: layer.fill,
// });
// }
// }
if (layer.fabricObject) {
// 如果图层本身有fabricObject，直接添加