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

合并画布代码

Browse Source
This commit is contained in:
X1627315083
2025-06-18 11:05:23 +08:00
parent 903c0ebdf5
commit 9c7fae36eb
118 changed files with 23633 additions and 8201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
src/component/Canvas/CanvasEditor/managers/ToolManager.js
View File

@@ -3,11 +3,11 @@ import { BrushManager } from "./brushes/brushManager";
import { ToolCommand } from "../commands/ToolCommands";
import { OperationType } from "../utils/layerHelper";
import CanvasConfig from "../config/canvasConfig";
//import { fabric } from "fabric-with-all";
import {
InitLiquifyToolCommand,
RasterizeForLiquifyCommand,
} from "../commands/LiquifyCommands";
import { fabric } from "fabric-with-all";
import { InitLiquifyToolCommand } from "../commands/LiquifyCommands";
import { RasterizeLayerCommand } from "../commands/GroupCommands";
import { message, Modal } from "ant-design-vue";
import { h } from "vue";
/**
* 工具管理器
@@ -378,6 +378,8 @@ export class ToolManager {
previousTool: this.activeTool.value,
});
command.undoable = options.undoable !== undefined ? options.undoable : true;
// 执行命令
this.commandManager.execute(command, { ...options });
}
@@ -690,18 +692,9 @@ export class ToolManager {
}
} else if (checkResult.needsRasterization) {
// 需要栅格化 (多个对象或组)
// 询问用户是否要栅格化
if (
confirm(
checkResult.isGroup
? "组对象需要先栅格化才能进行液化操作，是否立即栅格化？"
: "当前图层含有多个对象，需要先栅格化才能进行液化操作，是否立即栅格化？"
)
) {
// 用户确认栅格化，执行栅格化操作
this._rasterizeLayerForLiquify(activeLayerId);
return; // 栅格化后会重新调用液化功能，这里直接返回
}
// 使用Modal询问用户是否要栅格化
this._showRasterizeConfirmModal(checkResult.isGroup, activeLayerId);
return; // 等待用户确认，不继续执行
}
}
}
@@ -716,51 +709,42 @@ export class ToolManager {
}
/**
* 检查并准备液化操作
* 显示栅格化确认Modal对话框
* @param {Boolean} isGroup 是否为组对象
* @param {String} layerId 图层ID
* @private
*/
_checkAndPrepareForLiquify(layerId) {
// 确保存在液化管理器
const liquifyManager = this.canvasManager?.liquifyManager;
if (!liquifyManager) {
console.error("液化管理器未初始化");
return;
}
_showRasterizeConfirmModal(isGroup, layerId) {
const title = "栅格化图层";
const content = "需要先栅格化才能进行液化操作，是否立即栅格化？";
// 检查图层是否适合液化
const checkResult = liquifyManager.checkLayerForLiquify(layerId);
if (checkResult.isEmpty) {
// 空图层
alert("当前图层为空，无法进行液化操作");
return;
}
if (checkResult.isGroup) {
// 询问是否栅格化组
if (confirm("组对象需要栅格化才能进行液化操作，是否立即栅格化？")) {
Modal.confirm({
title,
content,
okText: "确定栅格化",
cancelText: "取消",
centered: true,
icon: h("span", { style: "color: #faad14;" }, "⚠️"),
onOk: () => {
// 用户确认栅格化，执行栅格化操作
this._rasterizeLayerForLiquify(layerId);
}
return;
}
if (checkResult.needsRasterization) {
// 询问是否栅格化图层
if (
confirm(
"当前图层含有多个对象，需要先栅格化才能进行液化操作，是否立即栅格化？"
)
) {
this._rasterizeLayerForLiquify(layerId);
}
return;
}
// 如果图层可以直接液化(单个图像对象)
if (checkResult.valid) {
this._startLiquify(layerId);
}
},
onCancel: () => {
console.log("用户取消了栅格化操作");
// 用户取消，触发液化面板显示事件但不能液化
document.dispatchEvent(
new CustomEvent("showLiquifyPanel", {
detail: {
activeLayerId: layerId,
layerStatus: { needsRasterization: true, isGroup },
canLiquify: false,
targetObject: null,
originalImageData: null,
},
})
);
},
});
}
/**
@@ -772,25 +756,52 @@ export class ToolManager {
if (!this.commandManager || !this.layerManager) return;
try {
// 导入液化相关命令
// 显示加载Modal
const loadingModal = Modal.info({
title: "正在栅格化",
content: "正在栅格化图层，请稍候...",
okButtonProps: { style: { display: "none" } },
centered: true,
closable: false,
maskClosable: false,
});
// 创建栅格化命令
const rasterizeCommand = new RasterizeForLiquifyCommand({
const rasterizeCommand = new RasterizeLayerCommand({
canvas: this.canvas,
layerManager: this.layerManager,
layerId: layerId,
layers: this.layerManager.layers,
activeLayerId: this.layerManager.activeLayerId,
});
// 执行命令
const result = await this.commandManager.execute(rasterizeCommand);
// 关闭加载Modal
loadingModal.destroy();
if (result) {
// 栅格化成功，启动液化
message.success("图层已成功栅格化，可以进行液化操作");
this._startLiquify(layerId);
} else {
// 栅格化失败
Modal.error({
title: "栅格化失败",
content: "栅格化失败，无法进行液化操作",
okText: "确定",
centered: true,
});
}
} catch (error) {
console.error("栅格化图层失败:", error);
alert("栅格化失败，无法进行液化操作");
Modal.error({
title: "栅格化错误",
content: `栅格化失败：${error.message}`,
okText: "确定",
centered: true,
});
}
}
@@ -803,7 +814,12 @@ export class ToolManager {
// 获取图层信息
const layer = this.layerManager.getLayerById(layerId);
if (!layer) {
console.error("图层不存在");
Modal.error({
title: "图层错误",
content: "图层不存在",
okText: "确定",
centered: true,
});
return;
}
@@ -812,14 +828,24 @@ export class ToolManager {
if (layer.isBackground) {
// 背景图层使用 fabricObject (单数)
if (!layer.fabricObject) {
console.error("背景图层为空");
Modal.warning({
title: "背景图层为空",
content: "背景图层为空，无法进行液化操作",
okText: "确定",
centered: true,
});
return;
}
targetObject = layer.fabricObject;
} else {
// 普通图层使用 fabricObjects (复数)
if (!layer.fabricObjects || layer.fabricObjects.length === 0) {
console.error("图层为空");
Modal.warning({
title: "图层为空",
content: "图层为空，无法进行液化操作",
okText: "确定",
centered: true,
});
return;
}
targetObject = layer.fabricObjects[0];
@@ -828,11 +854,26 @@ export class ToolManager {
// 确保liquifyManager可用
const liquifyManager = this.canvasManager?.liquifyManager;
if (!liquifyManager) {
console.error("液化管理器未初始化");
Modal.error({
title: "液化管理器错误",
content: "液化管理器未初始化",
okText: "确定",
centered: true,
});
return;
}
try {
// 显示准备中的Modal
const preparingModal = Modal.info({
title: "准备液化环境",
content: "正在准备液化环境，请稍候...",
okButtonProps: { style: { display: "none" } },
centered: true,
closable: false,
maskClosable: false,
});
// 准备液化环境
liquifyManager.initialize({
canvas: this.canvas,
@@ -855,6 +896,9 @@ export class ToolManager {
// 执行初始化命令
await this.commandManager.execute(initCommand);
// 关闭准备Modal
preparingModal.destroy();
// 触发液化面板显示事件
document.dispatchEvent(
new CustomEvent("showLiquifyPanel", {
@@ -867,7 +911,12 @@ export class ToolManager {
);
} catch (error) {
console.error("启动液化工具失败:", error);
alert("启动液化工具失败：" + error.message);
Modal.error({
title: "液化工具启动失败",
content: `启动液化工具失败：${error.message}`,
okText: "确定",
centered: true,
});
}
}