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-11 00:26:38 +08:00
parent d3e22f368b
commit 96e13cb22a
10 changed files with 129 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/component/Canvas/CanvasEditor/commands/CrossLevelMoveCommands.js
View File

@@ -181,7 +181,7 @@ export class CrossLevelMoveCommand extends Command {
return ancestor ? checkChildren(ancestor.children) : false; return ancestor ? checkChildren(ancestor.children) : false;
} }
execute() { async execute() {
console.log("🎯 执行跨层级移动命令:", { console.log("🎯 执行跨层级移动命令:", {
layerId: this.layerId, layerId: this.layerId,
from: this.fromContainerType, from: this.fromContainerType,
@@ -220,10 +220,13 @@ export class CrossLevelMoveCommand extends Command {
this.saveAfterState(); this.saveAfterState();
// 刷新画布 // 刷新画布
if (this.canvas) { // if (this.canvas) {
this.canvas.renderAll(); // this.canvas.renderAll();
console.log("🎨 画布已刷新"); // console.log("🎨 画布已刷新");
} // }
await this.layerManager?.updateLayersObjectsInteractivity();
this.canvas?.renderAll();
console.log("✅ 跨层级移动命令执行成功"); console.log("✅ 跨层级移动命令执行成功");
return true; return true;
@@ -248,7 +251,7 @@ export class CrossLevelMoveCommand extends Command {
} }
} }
undo() { async undo() {
if (!this.beforeState) { if (!this.beforeState) {
throw new Error("没有保存的前置状态，无法撤销"); throw new Error("没有保存的前置状态，无法撤销");
} }
@@ -262,14 +265,10 @@ export class CrossLevelMoveCommand extends Command {
// 恢复fabric对象状态 // 恢复fabric对象状态
this.restoreFabricObjectStates(this.beforeState.fabricObjects); this.restoreFabricObjectStates(this.beforeState.fabricObjects);
await this.layerManager?.updateLayersObjectsInteractivity();
this.canvas?.renderAll();
// 刷新画布 // 刷新画布
if (this.canvas) { this.canvas?.renderAll();
// 使用 requestAnimationFrame 确保DOM更新完成后再渲染
requestAnimationFrame(() => {
this.canvas.renderAll();
});
}
console.log("✅ 跨层级移动命令撤销成功"); console.log("✅ 跨层级移动命令撤销成功");
return true; return true;
} catch (error) { } catch (error) {
@@ -331,7 +330,7 @@ export class CrossLevelMoveCommand extends Command {
/** /**
* 重做命令 * 重做命令
*/ */
redo() { async redo() {
if (!this.afterState) { if (!this.afterState) {
throw new Error("没有保存的后置状态，无法重做"); throw new Error("没有保存的后置状态，无法重做");
} }
@@ -345,13 +344,9 @@ export class CrossLevelMoveCommand extends Command {
// 恢复fabric对象状态 // 恢复fabric对象状态
this.restoreFabricObjectStates(this.afterState.fabricObjects); this.restoreFabricObjectStates(this.afterState.fabricObjects);
await this.layerManager?.updateLayersObjectsInteractivity();
// 刷新画布 // 刷新画布
if (this.canvas) { this.canvas?.renderAll();
// 使用 requestAnimationFrame 确保DOM更新完成后再渲染
requestAnimationFrame(() => {
this.canvas.renderAll();
});
}
console.log("✅ 跨层级移动命令重做成功"); console.log("✅ 跨层级移动命令重做成功");
return true; return true;

35
src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js
View File

@@ -2,6 +2,7 @@ import {
createLayer, createLayer,
findInChildLayers, findInChildLayers,
LayerType, LayerType,
OperationType,
} from "../utils/layerHelper.js"; } from "../utils/layerHelper.js";
import { createRasterizedImage } from "../utils/selectionToImage.js"; import { createRasterizedImage } from "../utils/selectionToImage.js";
import { CompositeCommand, Command } from "./Command.js"; import { CompositeCommand, Command } from "./Command.js";
@@ -11,6 +12,7 @@ import {
} from "./LayerCommands.js"; } from "./LayerCommands.js";
import { fabric } from "fabric-with-all"; import { fabric } from "fabric-with-all";
import { generateId } from "../utils/helper.js"; import { generateId } from "../utils/helper.js";
import { ToolCommand } from "./ToolCommands.js";
/** /**
* 套索抠图命令 * 套索抠图命令
@@ -256,16 +258,16 @@ export class LassoCutoutCommand extends CompositeCommand {
// this.fabricImage.toObject("id", "layerId", "layerName", "parentId"), // this.fabricImage.toObject("id", "layerId", "layerName", "parentId"),
// ]; // ];
// 2. 删除原图层命令 // 2. 删除原图层命令
const removeOriginalLayerCmd = new RemoveLayerCommand({ // const removeOriginalLayerCmd = new RemoveLayerCommand({
canvas: this.canvas, // canvas: this.canvas,
layers: this.layerManager.layers, // layers: this.layerManager.layers,
layerId: this.originalLayer.id, // layerId: this.originalLayer.id,
activeLayerId: this.layerManager.activeLayerId, // activeLayerId: this.layerManager.activeLayerId,l
}); // });
// 执行删除原图层命令 // // 执行删除原图层命令
await removeOriginalLayerCmd.execute(); // await removeOriginalLayerCmd.execute();
this.executedCommands.push(removeOriginalLayerCmd); // this.executedCommands.push(removeOriginalLayerCmd);
this.groupLayer.clippingMask = clippingMask.toObject(["id", "layerId"]); // 设置组图层的fabricObject为遮罩图像 this.groupLayer.clippingMask = clippingMask.toObject(["id", "layerId"]); // 设置组图层的fabricObject为遮罩图像
@@ -275,6 +277,21 @@ export class LassoCutoutCommand extends CompositeCommand {
this.layerManager.activeLayerId.value = selectLayer.id; // 设置新组图层为活动图层 this.layerManager.activeLayerId.value = selectLayer.id; // 设置新组图层为活动图层
// 切换工具到选择模式
// 3. 切换工具到选择模式命令
if (this.toolManager) {
const toolCmd = new ToolCommand({
toolManager: this.toolManager,
tool: OperationType.SELECT,
previousTool: this.toolManager.getCurrentTool(),
});
// 执行工具切换命令
await toolCmd.execute();
this.commands.push(toolCmd);
this.executedCommands.push(toolCmd);
}
this.canvas.discardActiveObject(); this.canvas.discardActiveObject();
// this.canvas.setActiveObject(this.fabricImage); // this.canvas.setActiveObject(this.fabricImage);
await this.layerManager.updateLayersObjectsInteractivity(true); await this.layerManager.updateLayersObjectsInteractivity(true);

8
src/component/Canvas/CanvasEditor/commands/LayerCommands.js
View File

@@ -2033,8 +2033,12 @@ export class LayerObjectsToGroupCommand extends Command {
const allObjects = [...originalObjects, ...newObjects]; const allObjects = [...originalObjects, ...newObjects];
const clipPath = allObjects?.[0]?.clipPath || null;
// 从画布中移除所有要组合的对象 // 从画布中移除所有要组合的对象
allObjects.forEach((obj) => { allObjects.forEach((obj) => {
obj.clipPath = null;
obj.dirty = true; // 标记为脏对象
// obj.setCoords();
obj.opacity = 1; obj.opacity = 1;
removeCanvasObjectByObject(this.canvas, obj); removeCanvasObjectByObject(this.canvas, obj);
}); });
@@ -2052,6 +2056,10 @@ export class LayerObjectsToGroupCommand extends Command {
// 添加组对象到画布 // 添加组对象到画布
this.canvas.add(groupObject); this.canvas.add(groupObject);
groupObject.clipPath = clipPath; // 恢复剪切路径
groupObject.dirty = true; // 标记为脏对象
groupObject.setCoords();
// 更新图层的对象列表 // 更新图层的对象列表
// this.activeLayer.fabricObjects = [groupObject]; // this.activeLayer.fabricObjects = [groupObject];
this.activeLayer.fabricObjects = [ this.activeLayer.fabricObjects = [

6
src/component/Canvas/CanvasEditor/components/LayersPanel/LayersList.vue
View File

@@ -498,11 +498,13 @@ const canDeleteComputed = computed(() => {
.chosen { .chosen {
opacity: 0.8; opacity: 0.8;
transform: scale(1.02); transform: scale(1);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
z-index: 999; z-index: 999;
background: linear-gradient(90deg, #fff2e8 0%, #ffd8bf 100%); background: linear-gradient(90deg, #fff2e8 0%, #ffd8bf 100%);
border: 2px solid #fa8c16; border: 1px solid #fa8c16;
// border-left: none;
// border-right: none;
} }
.drag { .drag {

7
src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
View File

@@ -1348,9 +1348,10 @@ async function executeDirectMove(moveData) {
} }
// 刷新画布渲染 // 刷新画布渲染
if (layerManager?.canvas) { // if (layerManager?.canvas) {
layerManager.canvas.renderAll(); // layerManager.canvas.renderAll();
} // }
await layerManager?.updateLayersObjectsInteractivity?.();
// 清除选择状态 // 清除选择状态
clearSelection(); clearSelection();

2
src/component/Canvas/CanvasEditor/components/LayersPanel/layersPanel.less
View File

@@ -568,7 +568,7 @@
.ghost { .ghost {
opacity: 0.4; opacity: 0.4;
background-color: #fff7e6; background-color: #fff7e6;
border: 2px dashed #faad14; border: 1px dashed #faad14;
} }
.chosen { .chosen {

2
src/component/Canvas/CanvasEditor/index.vue
View File

@@ -783,6 +783,7 @@ defineExpose({
exportImage: ({ exportImage: ({
isContainBg = false, // 是否包含背景图层 isContainBg = false, // 是否包含背景图层
isContainFixed = false, // 是否包含固定图层 isContainFixed = false, // 是否包含固定图层
isCropByBg = false, // 是否使用背景大小裁剪 // 如果为true，则导出时裁剪到背景图层大小
layerId = "", // 导出具体图层ID layerId = "", // 导出具体图层ID
layerIdArray = [], // 导出多个图层ID数组 layerIdArray = [], // 导出多个图层ID数组
expPicType = "png", // 导出图片类型 JPG 或 PNG ,SVG expPicType = "png", // 导出图片类型 JPG 或 PNG ,SVG
@@ -790,6 +791,7 @@ defineExpose({
return canvasManager.exportImage({ return canvasManager.exportImage({
isContainBg, isContainBg,
isContainFixed, isContainFixed,
isCropByBg,
layerId, layerId,
layerIdArray, layerIdArray,
expPicType, expPicType,

7
src/component/Canvas/CanvasEditor/managers/CanvasManager.js
View File

@@ -977,7 +977,6 @@ export class CanvasManager {
} }
this.layers.value = tempLayers; this.layers.value = tempLayers;
debugger;
// this.canvasWidth.value = parsedJson.canvasWidth || this.width; // this.canvasWidth.value = parsedJson.canvasWidth || this.width;
// this.canvasHeight.value = parsedJson.canvasHeight || this.height; // this.canvasHeight.value = parsedJson.canvasHeight || this.height;
@@ -1039,8 +1038,10 @@ export class CanvasManager {
// 使用LayerSort工具重新排列画布对象（如果可用） // 使用LayerSort工具重新排列画布对象（如果可用）
await this?.layerManager?.layerSort?.rearrangeObjects(); await this?.layerManager?.layerSort?.rearrangeObjects();
this.layerManager.activeLayerId.value = this.layerManager.activeLayerId.value = this.layers.value[0]
this.layers.value[0]?.id || parsedJson?.activeLayerId || null; .children?.length
? this.layers.value[0].children[0].id
: this.layers.value[0]?.id || parsedJson?.activeLayerId || null;
// // 如果检测到红绿图模式内容，进行缩放调整 // // 如果检测到红绿图模式内容，进行缩放调整
// if (this.enabledRedGreenMode) { // if (this.enabledRedGreenMode) {

47
src/component/Canvas/CanvasEditor/managers/ExportManager.js
View File

@@ -28,6 +28,7 @@ export class ExportManager {
const { const {
isContainBg = false, isContainBg = false,
isContainFixed = false, isContainFixed = false,
isCropByBg = false, // 是否使用背景大小裁剪
layerId = "", layerId = "",
layerIdArray = [], layerIdArray = [],
expPicType = "png", expPicType = "png",
@@ -43,7 +44,8 @@ export class ExportManager {
layerId, layerId,
expPicType, expPicType,
isRedGreenMode, isRedGreenMode,
restoreOpacityInRedGreen restoreOpacityInRedGreen,
isCropByBg
); );
} }
@@ -52,10 +54,11 @@ export class ExportManager {
return this._exportMultipleLayers( return this._exportMultipleLayers(
layerIdArray, layerIdArray,
expPicType, expPicType,
isContainBg,
isContainFixed, isContainFixed,
isRedGreenMode, isRedGreenMode,
restoreOpacityInRedGreen restoreOpacityInRedGreen,
isContainBg,
isCropByBg
); );
} }
@@ -65,7 +68,8 @@ export class ExportManager {
isContainBg, isContainBg,
isContainFixed, isContainFixed,
isRedGreenMode, isRedGreenMode,
restoreOpacityInRedGreen restoreOpacityInRedGreen,
isCropByBg
); );
} catch (error) { } catch (error) {
console.error("导出图片失败:", error); console.error("导出图片失败:", error);
@@ -143,7 +147,8 @@ export class ExportManager {
isContainBg, isContainBg,
isContainFixed, isContainFixed,
isRedGreenMode, isRedGreenMode,
restoreOpacityInRedGreen restoreOpacityInRedGreen,
isCropByBg
) { ) {
if (!this.layerManager) { if (!this.layerManager) {
throw new Error("图层管理器未初始化"); throw new Error("图层管理器未初始化");
@@ -193,7 +198,8 @@ export class ExportManager {
isContainBg, isContainBg,
isContainFixed, isContainFixed,
isRedGreenMode, isRedGreenMode,
restoreOpacityInRedGreen restoreOpacityInRedGreen,
isCropByBg
) { ) {
// 按图层顺序收集对象（从底到顶） // 按图层顺序收集对象（从底到顶）
const objectsToExport = this._collectObjectsByLayerOrder( const objectsToExport = this._collectObjectsByLayerOrder(
@@ -215,13 +221,38 @@ export class ExportManager {
restoreOpacityInRedGreen restoreOpacityInRedGreen
); );
} }
let canvasClipPath = this.canvas.clipPath;
if (isCropByBg) {
const cropWidth =
this.canvasManager?.canvasWidth?.value ||
this.canvas?.canvasWidth ||
this.canvas.width;
const cropHeight =
this.canvasManager?.canvasHeight?.value ||
this.canvas?.canvasHeight ||
this.canvas.height;
canvasClipPath = new fabric.Rect({
left: this.canvas.width / 2,
top: this.canvas.height / 2,
width: cropWidth,
height: cropHeight,
originX: "center",
originY: "center",
fill: "#fff",
stroke: "transparent",
strokeWidth: 0,
});
canvasClipPath.set({
absolutePositioned: true,
});
canvasClipPath.setCoords();
}
// 普通模式使用画布尺寸 // 普通模式使用画布尺寸
return this._exportWithCanvasSize( return this._exportWithCanvasSize(
objectsToExport, objectsToExport,
expPicType, expPicType,
restoreOpacityInRedGreen, restoreOpacityInRedGreen,
this.canvas.clipPath canvasClipPath
); );
} }

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

@@ -336,9 +336,10 @@ export class LayerManager {
// 设置裁剪对象 // 设置裁剪对象
layers.forEach(async (layer) => { layers.forEach(async (layer) => {
let clippingMaskFabricObject = null;
if (layer.clippingMask) { if (layer.clippingMask) {
// 反序列化 clippingMask // 反序列化 clippingMask
const clippingMaskFabricObject = await restoreFabricObject( clippingMaskFabricObject = await restoreFabricObject(
layer.clippingMask, layer.clippingMask,
this.canvas this.canvas
); );
@@ -349,80 +350,30 @@ export class LayerManager {
// ...getOriginObjectInfo(layer.clippingMask), // 恢复原定位 // ...getOriginObjectInfo(layer.clippingMask), // 恢复原定位
absolutePositioned: true, absolutePositioned: true,
}); });
}
// const activeObject = this.canvas.getActiveObject(); // 如果是组图层 则给所有子对象设置裁剪对象
// if (activeObject?._objects?.length > 1) { if (layer.type === LayerType.GROUP || layer.children?.length > 0) {
// const { object } = findObjectById( layer.children.forEach((childLayer) => {
// this.canvas, const childObj = this.canvas
// layer.clippingMask?.id .getObjects()
// ); .find((o) => o.layerId === childLayer.id);
// if (!object) return; if (childObj) {
// const tempClipPath = fabric.util.object.clone(object); childObj.clipPath = clippingMaskFabricObject;
// tempClipPath.clipPath = null; childObj.dirty = true; // 标记为脏对象
// tempClipPath.set({ childObj.setCoords();
// // 设置绝对定位 }
// ...getOriginObjectInfo(layer.clippingMask), // 恢复原定位 });
// absolutePositioned: true, } else {
// }); layer.fabricObjects?.forEach((obj) => {
// activeObject.clipPath = tempClipPath; const fabricObject = this.canvas
// // 确保选择组正确渲染 .getObjects()
// // activeObject.setCoords(); .find((o) => o.id === obj.id);
// console.log(activeObject?._objects?.length); if (fabricObject) {
// return; // 如果是多选对象，则不设置裁剪路径 fabricObject.clipPath = clippingMaskFabricObject;
// } fabricObject.dirty = true; // 标记为脏对象
// 如果是组图层 则给所有子对象设置裁剪对象 fabricObject.setCoords();
if (layer.type === LayerType.GROUP || layer.children?.length > 0) { }
layer.children.forEach((childLayer) => { });
if (clippingMaskFabricObject) {
const childObj = this.canvas
.getObjects()
.find((o) => o.layerId === childLayer.id);
if (childObj) {
childObj.clipPath = clippingMaskFabricObject;
}
}
// const { object } = findObjectById(
// this.canvas,
// layer.clippingMask?.id
// );
// if (object) {
// const tempClipPath = fabric.util.object.clone(object);
// tempClipPath.clipPath = null;
// tempClipPath.set({
// // 设置绝对定位
// // ...layer.clippingMask, // 恢复原定位
// ...getOriginObjectInfo(layer.clippingMask),
// absolutePositioned: true,
// });
// const childObj = this.canvas
// .getObjects()
// .find((o) => o.layerId === childLayer.id);
// if (childObj) {
// childObj.clipPath = tempClipPath;
// }
// }
});
} else if (clippingMaskFabricObject) {
obj.clipPath = clippingMaskFabricObject;
}
// {
// // const { object } = findObjectById(
// // this.canvas,
// // layer.clippingMask?.id
// // );
// // if (object) {
// // const tempClipPath = fabric.util.object.clone(object);
// // tempClipPath.clipPath = null; // 确保克隆的遮罩没有clipPath
// // tempClipPath.set({
// // // 设置绝对定位
// // // ...layer.clippingMask, // 恢复原定位
// // ...getOriginObjectInfo(layer.clippingMask),
// // absolutePositioned: true,
// // });
// // obj.clipPath = tempClipPath;
// // }
// }
} }
}); });
} }