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 18:08:20 +08:00
parent 5f29e488ed
commit 26581b234a
8 changed files with 409 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/component/Canvas/CanvasEditor/commands/UpdateGroupMaskPositionCommand.js
View File

@@ -1,4 +1,4 @@
import { findLayerRecursively } from "../utils/layerHelper";
import { findLayerRecursively, isGroupLayer } from "../utils/layerHelper";
import { restoreFabricObject } from "../utils/objectHelper";
import { Command } from "./Command";
@@ -23,6 +23,8 @@ export class UpdateGroupMaskPositionCommand extends Command {
this.maskInitialTop = options.maskInitialTop || 0;
this.isExecuteRealtime = options.isExecuteRealtime || false;
this.activeSelection = this.canvas.getActiveObject() || {};
this.isSginleObject = options.isSginleObject || false; // 组内是否单个对象移动
this.target = options.target || null; // 当前操作的目标对象
this.isFristExecute = true;
@@ -42,17 +44,18 @@ export class UpdateGroupMaskPositionCommand extends Command {
};
// 收集当前选择的所有对象位置
this.originalObjectsPostion = this.activeSelection.getObjects().map((obj) => {
return {
left: obj.left || 0,
top: obj.top || 0,
id: obj.id,
};
});
this.originalObjectsPostion =
this.activeSelection.getObjects?.()?.map((obj) => {
return {
left: obj.left || 0,
top: obj.top || 0,
id: obj.id,
};
}) || this.target?.getBoundingRect?.(true, true);
this.originalSelectionPosition = {
left: this.activeSelection.left || 0,
top: this.activeSelection.top || 0,
left: this.isSginleObject ? this.target.left : this.activeSelection.left || 0,
top: this.isSginleObject ? this.target.top : this.activeSelection.top || 0,
};
console.log(
@@ -147,6 +150,10 @@ export class UpdateGroupMaskPositionCommand extends Command {
// 更新所有使用此遮罩的子图层对象（不需要等待）
this._updateChildObjectsClipPath(layer);
this.target.set({
isSginleObject: this.isSginleObject,
});
return true;
} catch (error) {
console.error("实时更新组图层遮罩位置失败:", error);
@@ -217,21 +224,41 @@ export class UpdateGroupMaskPositionCommand extends Command {
}
if (isUndo) {
this.activeSelection.set({
left: this.originalSelectionPosition.left - this.deltaX,
top: this.originalSelectionPosition.top - this.deltaY,
});
this.activeSelection.dirty = true;
this.activeSelection.setCoords();
if (this.isSginleObject) {
// 如果是单个对象移动，直接更新目标对象位置
// this.target.set({
// left: this.target.left - this.deltaX,
// top: this.target.top - this.deltaY,
// });
// this.target.dirty = true;
// this.target.setCoords();
} else {
this.activeSelection.set({
left: this.originalSelectionPosition.left - this.deltaX,
top: this.originalSelectionPosition.top - this.deltaY,
});
this.activeSelection.dirty = true;
this.activeSelection.setCoords();
}
}
if (isExecute && !this.isFristExecute) {
this.activeSelection.set({
left: this.activeSelection.left + this.deltaX,
top: this.activeSelection.top + this.deltaY,
});
this.activeSelection.dirty = true;
this.activeSelection.setCoords();
if (this.isSginleObject) {
// 如果是单个对象移动，直接更新目标对象位置
// this.target.set({
// left: this.target.left + this.deltaX,
// top: this.target.top + this.deltaY,
// });
// this.target.dirty = true;
// this.target.setCoords();
} else {
this.activeSelection.set({
left: this.activeSelection.left + this.deltaX,
top: this.activeSelection.top + this.deltaY,
});
this.activeSelection.dirty = true;
this.activeSelection.setCoords();
}
}
// 触发画布重新渲染