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-14 01:00:23 +08:00
parent 96e13cb22a
commit 24e9ba8ae5
80 changed files with 2052 additions and 4292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/component/Canvas/CanvasEditor/commands/LiquifyCommands.js
View File

@@ -21,9 +21,7 @@ export class LiquifyCommand extends Command {
constructor(options) {
super({
name: options.name || `液化操作: ${options.mode || "未知模式"}`,
description:
options.description ||
`使用${options.mode || "未知模式"}模式进行液化操作`,
description: options.description || `使用${options.mode || "未知模式"}模式进行液化操作`,
});
this.canvas = options.canvas;
@@ -96,9 +94,7 @@ export class LiquifyCommand extends Command {
// 对于图像对象，我们需要保存src和元数据
const state = {
src: this.targetObject.getSrc ? this.targetObject.getSrc() : null,
element: this.targetObject._element
? this.targetObject._element.cloneNode(true)
: null,
element: this.targetObject._element ? this.targetObject._element.cloneNode(true) : null,
filters: this.targetObject.filters ? [...this.targetObject.filters] : [],
originalData: this.originalData,
targetLayerId: this.targetLayerId,
@@ -172,10 +168,7 @@ export class LiquifyCommand extends Command {
// 确保图层引用更新
const layer = this.layerManager.getLayerById(this.targetLayerId);
if (layer) {
if (
layer.type === "background" &&
layer.fabricObject === this.targetObject
) {
if (layer.type === "background" && layer.fabricObject === this.targetObject) {
layer.fabricObject = img;
} else if (layer.fabricObjects) {
const objIndex = layer.fabricObjects.indexOf(this.targetObject);
@@ -251,9 +244,7 @@ export class LiquifyDeformCommand extends LiquifyCommand {
super({
...options,
name: `液化变形: ${options.mode || "未知模式"}`,
description: `在(${options.x}, ${options.y})应用${
options.mode || "未知模式"
}变形`,
description: `在(${options.x}, ${options.y})应用${options.mode || "未知模式"}变形`,
});
this.x = options.x;
@@ -343,9 +334,7 @@ export class LiquifyDeformCommand extends LiquifyCommand {
layer.fabricObject = img;
} else if (layer.fabricObjects) {
const objIndex = layer.fabricObjects.findIndex(
(obj) =>
obj === this.savedState?.originalObject ||
obj === this.targetObject
(obj) => obj === this.savedState?.originalObject || obj === this.targetObject
);
if (objIndex !== -1) {
layer.fabricObjects[objIndex] = img;
@@ -374,8 +363,7 @@ export class CompositeLiquifyCommand extends Command {
constructor(options) {
super({
name: options.name || "液化操作组合",
description:
options.description || `包含${options.commands?.length || 0}个液化操作`,
description: options.description || `包含${options.commands?.length || 0}个液化操作`,
});
this.commands = options.commands || [];
@@ -551,10 +539,7 @@ export class LiquifyStateCommand extends Command {
}
// 通过引用管理器更新图像数据
await this.refManager.updateObjectImageData(
this.objectRefId,
this.finalImageData
);
await this.refManager.updateObjectImageData(this.objectRefId, this.finalImageData);
// 恢复液化管理器到最终状态
if (this.liquifyManager && this.finalLiquifyState) {
@@ -585,10 +570,7 @@ export class LiquifyStateCommand extends Command {
}
// 通过引用管理器恢复到初始快照
await this.refManager.restoreFromSnapshot(
this.objectRefId,
this.initialSnapshotId
);
await this.refManager.restoreFromSnapshot(this.objectRefId, this.initialSnapshotId);
// 恢复液化管理器到初始状态 - 关键修复
if (this.liquifyManager) {
@@ -604,18 +586,16 @@ export class LiquifyStateCommand extends Command {
// 强制设置原始图像数据为初始状态
if (this.liquifyManager.enhancedManager) {
this.liquifyManager.enhancedManager.originalImageData =
this.initialImageData;
this.liquifyManager.enhancedManager.currentImageData =
this._cloneImageData(this.initialImageData);
this.liquifyManager.enhancedManager.originalImageData = this.initialImageData;
this.liquifyManager.enhancedManager.currentImageData = this._cloneImageData(
this.initialImageData
);
// 重置激活渲染器的数据
if (this.liquifyManager.enhancedManager.activeRenderer) {
const renderer = this.liquifyManager.enhancedManager.activeRenderer;
renderer.originalImageData = this.initialImageData;
renderer.currentImageData = this._cloneImageData(
this.initialImageData
);
renderer.currentImageData = this._cloneImageData(this.initialImageData);
// 重置CPU渲染器的网格和变形历史
if (renderer.reset) {
@@ -741,8 +721,7 @@ export class LiquifyStateCommand extends Command {
timestamp: Date.now(),
properties: this.refManager._captureObjectState(fabricObject),
imageData: this.initialImageData,
eventListeners:
this.refManager.eventListeners.get(this.objectRefId) || {},
eventListeners: this.refManager.eventListeners.get(this.objectRefId) || {},
};
this.refManager.stateSnapshots.set(this.initialSnapshotId, snapshot);
@@ -772,8 +751,7 @@ export class LiquifyStateCommand extends Command {
timestamp: Date.now(),
properties: this.refManager._captureObjectState(fabricObject),
imageData: this.finalImageData,
eventListeners:
this.refManager.eventListeners.get(this.objectRefId) || {},
eventListeners: this.refManager.eventListeners.get(this.objectRefId) || {},
};
this.refManager.stateSnapshots.set(this.finalSnapshotId, snapshot);
@@ -804,8 +782,7 @@ export class LiquifyStateCommand extends Command {
// 捕获当前渲染器状态
activeRendererState: null,
// 捕获目标对象引用
targetObjectRef:
this.liquifyManager.targetObject ?? enhancedManager.targetObject,
targetObjectRef: this.liquifyManager.targetObject ?? enhancedManager.targetObject,
// 捕获初始化状态
initialized: this.liquifyManager.initialized || false,
};
@@ -832,13 +809,9 @@ export class LiquifyStateCommand extends Command {
params: { ...renderer.params },
currentMode: renderer.currentMode,
// 对于CPU渲染器，还需要保存网格状态
meshState: renderer.mesh
? this._captureMeshState(renderer.mesh)
: null,
meshState: renderer.mesh ? this._captureMeshState(renderer.mesh) : null,
// 保存变形历史
deformHistory: renderer.deformHistory
? [...renderer.deformHistory]
: [],
deformHistory: renderer.deformHistory ? [...renderer.deformHistory] : [],
};
}
}
@@ -871,9 +844,7 @@ export class LiquifyStateCommand extends Command {
this.realtimeUpdater.targetObject = this.liquifyManager.targetObject;
// 如果有setTargetObject方法，调用它
if (typeof this.realtimeUpdater.setTargetObject === "function") {
this.realtimeUpdater.setTargetObject(
this.liquifyManager.targetObject
);
this.realtimeUpdater.setTargetObject(this.liquifyManager.targetObject);
}
}
@@ -911,10 +882,8 @@ export class LiquifyStateCommand extends Command {
} else if (renderer.mesh && renderer._initMesh) {
// 如果没有保存的网格状态，重新初始化网格
renderer._initMesh(
rendererState.originalImageData?.width ||
renderer.originalImageData?.width,
rendererState.originalImageData?.height ||
renderer.originalImageData?.height
rendererState.originalImageData?.width || renderer.originalImageData?.width,
rendererState.originalImageData?.height || renderer.originalImageData?.height
);
}
@@ -978,13 +947,7 @@ export class LiquifyStateCommand extends Command {
* @private
*/
_restoreMeshState(mesh, meshState) {
if (
!mesh ||
!meshState ||
!Array.isArray(mesh) ||
!Array.isArray(meshState)
)
return;
if (!mesh || !meshState || !Array.isArray(mesh) || !Array.isArray(meshState)) return;
for (let i = 0; i < Math.min(mesh.length, meshState.length); i++) {
for (let j = 0; j < Math.min(mesh[i].length, meshState[i].length); j++) {
@@ -1043,8 +1006,7 @@ export class BatchLiquifyStateCommand extends Command {
constructor(options) {
super({
name: options.name || "批量液化操作",
description:
options.description || `批量液化${options.commands?.length || 0}个对象`,
description: options.description || `批量液化${options.commands?.length || 0}个对象`,
});
this.commands = options.commands || [];
@@ -1117,9 +1079,7 @@ export class BatchLiquifyStateCommand extends Command {
* @returns {Boolean} 是否有效
*/
isValid() {
return (
this.commands.length > 0 && this.commands.every((cmd) => cmd.isValid())
);
return this.commands.length > 0 && this.commands.every((cmd) => cmd.isValid());
}
/**