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

fix: 优化细节

Browse Source
This commit is contained in:
bighuixiang
2025-07-24 21:37:21 +08:00
parent 46b1c5cd71
commit 3ff5e27db6
10 changed files with 335 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/component/Canvas/CanvasEditor/managers/liquify/EnhancedLiquifyManager.js
View File

@@ -4,7 +4,7 @@
*/
import { LiquifyWebGLManager } from "./LiquifyWebGLManager";
import { LiquifyCPUManager } from "./LiquifyCPUManager";
import { findInChildLayers, LayerType } from "../../utils/layerHelper";
import { findLayerRecursively, LayerType } from "../../utils/layerHelper";
export class EnhancedLiquifyManager {
/**
@@ -140,7 +140,10 @@ export class EnhancedLiquifyManager {
// 处理传入的是图层ID的情况
if (typeof target === "string") {
targetLayerId = target;
const layer = this.layerManager.getLayerById(targetLayerId);
const { layer } = findLayerRecursively(
this.layerManager.layers?.value ?? this.layerManager.layers,
targetLayerId
);
// 检查图层是否存在和是否有对象
let hasObjects = false;
@@ -160,7 +163,7 @@ export class EnhancedLiquifyManager {
} else if (typeof target === "object") {
// 传入的是对象
targetObject = target;
const { layer } = findInChildLayers(
const { layer } = findLayerRecursively(
this.layerManager.layers?.value ?? this.layerManager.layers,
targetObject.layerId
);
@@ -216,7 +219,9 @@ export class EnhancedLiquifyManager {
// 计算图像大小
const pixelCount = imageData.width * imageData.height;
console.log(`液化选择渲染器: 图像大小=${pixelCount}像素, WebGL可用=${this.isWebGLAvailable}`);
console.log(
`液化选择渲染器: 图像大小=${pixelCount}像素, WebGL可用=${this.isWebGLAvailable}`
);
// 默认使用CPU渲染器
this.activeRenderer = this.cpuRenderer;
@@ -247,7 +252,11 @@ export class EnhancedLiquifyManager {
this.activeRenderer = this.webglRenderer;
this.renderMode = "webgl";
} else {
console.log(`液化功能: 使用CPU渲染模式${!this.isWebGLAvailable ? " (WebGL不可用)" : ""}`);
console.log(
`液化功能: 使用CPU渲染模式${
!this.isWebGLAvailable ? " (WebGL不可用)" : ""
}`
);
}
}
@@ -312,11 +321,16 @@ export class EnhancedLiquifyManager {
this.params[param] = value;
// 同步更新当前渲染器 - 关键修复：确保参数正确传递
if (this.activeRenderer && typeof this.activeRenderer.setParam === "function") {
if (
this.activeRenderer &&
typeof this.activeRenderer.setParam === "function"
) {
console.log(`EnhancedLiquifyManager 设置参数: ${param}=${value}`);
this.activeRenderer.setParam(param, value);
} else {
console.warn(`EnhancedLiquifyManager: 无法设置参数 ${param}，渲染器未就绪`);
console.warn(
`EnhancedLiquifyManager: 无法设置参数 ${param}，渲染器未就绪`
);
}
return true;
@@ -371,17 +385,25 @@ export class EnhancedLiquifyManager {
* @param {Number} y 初始Y坐标
*/
startLiquifyOperation(x, y) {
if (this.activeRenderer && typeof this.activeRenderer.startDeformation === "function") {
if (
this.activeRenderer &&
typeof this.activeRenderer.startDeformation === "function"
) {
this.activeRenderer.startDeformation(x, y);
}
console.log(`开始液化操作，渲染模式=${this.renderMode}, 初始点: (${x}, ${y})`);
console.log(
`开始液化操作，渲染模式=${this.renderMode}, 初始点: (${x}, ${y})`
);
}
/**
* 结束液化操作
*/
endLiquifyOperation() {
if (this.activeRenderer && typeof this.activeRenderer.endDeformation === "function") {
if (
this.activeRenderer &&
typeof this.activeRenderer.endDeformation === "function"
) {
this.activeRenderer.endDeformation();
}
console.log(`结束液化操作，渲染模式=${this.renderMode}`);
@@ -424,7 +446,9 @@ export class EnhancedLiquifyManager {
// 坐标边界检查
if (x < 0 || x >= imageWidth || y < 0 || y >= imageHeight) {
console.warn(`液化坐标超出图像范围: (${x}, ${y}), 图像尺寸: ${imageWidth}x${imageHeight}`);
console.warn(
`液化坐标超出图像范围: (${x}, ${y}), 图像尺寸: ${imageWidth}x${imageHeight}`
);
return null;
}
@@ -489,7 +513,9 @@ export class EnhancedLiquifyManager {
console.log(
`液化性能数据: 模式=${this.renderMode}, 平均耗时=${avgTime.toFixed(
2
)}ms, 图像尺寸=${this.originalImageData?.width}x${this.originalImageData?.height}`
)}ms, 图像尺寸=${this.originalImageData?.width}x${
this.originalImageData?.height
}`
);
}
@@ -542,7 +568,11 @@ export class EnhancedLiquifyManager {
}
// 获取图层
const layer = this.layerManager.getLayerById(layerId);
// const layer = this.layerManager.getLayerById(layerId);
const { layer } = findLayerRecursively(
this.layerManager.layers?.value ?? this.layerManager.layers,
layerId
);
if (!layer) {
return {
valid: false,
@@ -581,7 +611,8 @@ export class EnhancedLiquifyManager {
const singleObject = objectsToCheck.length === 1;
const isImage =
singleObject &&
(objectsToCheck[0].type === "image" || objectsToCheck[0].type === "rasterized-layer");
(objectsToCheck[0].type === "image" ||
objectsToCheck[0].type === "rasterized-layer");
// 检查是否为组
const isGroup =
@@ -631,14 +662,19 @@ export class EnhancedLiquifyManager {
tempCanvas.height = fabricObject.height;
const tempCtx = tempCanvas.getContext("2d");
console.log(`创建临时Canvas，尺寸: ${tempCanvas.width}x${tempCanvas.height}`);
console.log(
`创建临时Canvas，尺寸: ${tempCanvas.width}x${tempCanvas.height}`
);
// 处理不同的图像源
if (fabricObject._element) {
console.log("使用 _element 绘制图像");
// 检查_element是否有效
if (!fabricObject._element.complete && fabricObject._element.tagName === "IMG") {
if (
!fabricObject._element.complete &&
fabricObject._element.tagName === "IMG"
) {
console.log("图像未加载完成，等待加载...");
fabricObject._element.onload = () => {
try {
@@ -649,7 +685,12 @@ export class EnhancedLiquifyManager {
fabricObject.width,
fabricObject.height
);
const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
const imageData = tempCtx.getImageData(
0,
0,
tempCanvas.width,
tempCanvas.height
);
console.log("✅ 图像加载完成后获取数据成功");
resolve(imageData);
} catch (error) {
@@ -664,8 +705,17 @@ export class EnhancedLiquifyManager {
}
// 直接绘制已加载的图像
tempCtx.drawImage(fabricObject._element, 0, 0, fabricObject.width, fabricObject.height);
} else if (fabricObject.getSrc && typeof fabricObject.getSrc === "function") {
tempCtx.drawImage(
fabricObject._element,
0,
0,
fabricObject.width,
fabricObject.height
);
} else if (
fabricObject.getSrc &&
typeof fabricObject.getSrc === "function"
) {
console.log("使用 getSrc() 方法获取图像源");
// 通过URL创建图像
@@ -674,11 +724,24 @@ export class EnhancedLiquifyManager {
img.onload = () => {
try {
console.log(`图像加载成功，原始尺寸: ${img.naturalWidth}x${img.naturalHeight}`);
console.log(
`图像加载成功，原始尺寸: ${img.naturalWidth}x${img.naturalHeight}`
);
tempCtx.drawImage(img, 0, 0, fabricObject.width, fabricObject.height);
tempCtx.drawImage(
img,
0,
0,
fabricObject.width,
fabricObject.height
);
const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
const imageData = tempCtx.getImageData(
0,
0,
tempCanvas.width,
tempCanvas.height
);
console.log("✅ 通过URL获取图像数据成功");
resolve(imageData);
@@ -706,9 +769,20 @@ export class EnhancedLiquifyManager {
img.onload = () => {
try {
tempCtx.drawImage(img, 0, 0, fabricObject.width, fabricObject.height);
tempCtx.drawImage(
img,
0,
0,
fabricObject.width,
fabricObject.height
);
const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
const imageData = tempCtx.getImageData(
0,
0,
tempCanvas.width,
tempCanvas.height
);
console.log("✅ 通过src属性获取图像数据成功");
resolve(imageData);
@@ -728,13 +802,20 @@ export class EnhancedLiquifyManager {
return;
} else {
console.error("无法找到有效的图像源");
reject(new Error("图像对象缺少有效的图像源（_element, getSrc, 或 src）"));
reject(
new Error("图像对象缺少有效的图像源（_element, getSrc, 或 src）")
);
return;
}
// 如果走到这里，说明使用了_element直接绘制
try {
const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
const imageData = tempCtx.getImageData(
0,
0,
tempCanvas.width,
tempCanvas.height
);
console.log(
`✅ 获取图像数据成功: 对象尺寸=${fabricObject.width}x${fabricObject.height}, ` +