918 lines
26 KiB
JavaScript
918 lines
26 KiB
JavaScript
/**
|
||
* 增强版液化管理器
|
||
* 整合WebGL和CPU实现，智能选择最佳渲染方式
|
||
*/
|
||
import { LiquifyWebGLManager } from "./LiquifyWebGLManager";
|
||
import { LiquifyCPUManager } from "./LiquifyCPUManager";
|
||
import { findLayerRecursively, LayerType } from "../../utils/layerHelper";
|
||
import i18n from "@/lang/index.ts";
|
||
const {t} = i18n.global;
|
||
|
||
export class EnhancedLiquifyManager {
|
||
/**
|
||
* 创建增强版液化管理器
|
||
* @param {Object} options 配置选项
|
||
*/
|
||
constructor(options = {}) {
|
||
this.config = {
|
||
// 性能阈值：图像超过此尺寸会尝试使用WebGL
|
||
webglSizeThreshold: options.webglSizeThreshold || 1000 * 1000, // 默认100万像素
|
||
// 是否强制使用CPU模式
|
||
forceCPU: options.forceCPU || false,
|
||
// 是否强制使用WebGL模式
|
||
forceWebGL: options.forceWebGL || false,
|
||
// 网格大小
|
||
gridSize: options.gridSize || 15,
|
||
// 最大变形强度
|
||
maxStrength: options.maxStrength || 100,
|
||
// 平滑迭代次数
|
||
smoothingIterations: options.smoothingIterations || 2,
|
||
// 网格弹性因子
|
||
relaxFactor: options.relaxFactor || 0.25,
|
||
// WebGL网格精度
|
||
meshResolution: options.meshResolution || 64,
|
||
};
|
||
|
||
// 性能监控
|
||
this.performance = {
|
||
lastOperationTime: 0,
|
||
renderTimes: [], // 最近的渲染时间记录
|
||
isPerformanceIssue: false, // 是否存在性能问题
|
||
operationCount: 0, // 操作计数
|
||
};
|
||
|
||
// 初始化标志
|
||
this.initialized = false;
|
||
|
||
// 当前参数
|
||
this.params = {
|
||
size: 50, // 工具尺寸
|
||
pressure: 0.5, // 压力大小 (0-1)
|
||
distortion: 0, // 失真程度 (0-1)
|
||
power: 0.5, // 动力/强度 (0-1)
|
||
};
|
||
|
||
// 液化工具模式
|
||
this.modes = {
|
||
PUSH: "push",
|
||
CLOCKWISE: "clockwise",
|
||
COUNTERCLOCKWISE: "counterclockwise",
|
||
PINCH: "pinch",
|
||
EXPAND: "expand",
|
||
CRYSTAL: "crystal",
|
||
EDGE: "edge",
|
||
RECONSTRUCT: "reconstruct",
|
||
};
|
||
|
||
// 当前模式
|
||
this.currentMode = this.modes.PUSH;
|
||
|
||
// 图像数据和目标对象
|
||
this.originalImageData = null;
|
||
this.currentImageData = null;
|
||
this.targetObject = null;
|
||
this.targetLayerId = null;
|
||
|
||
// 创建渲染器实例
|
||
this.webglRenderer = null;
|
||
this.cpuRenderer = null;
|
||
|
||
// 当前激活的渲染器
|
||
this.activeRenderer = null;
|
||
this.renderMode = "unknown"; // 'webgl', 'cpu', 'unknown'
|
||
|
||
// 画布和管理器引用
|
||
this.canvas = options.canvas || null;
|
||
this.layerManager = options.layerManager || null;
|
||
|
||
// 渲染器状态
|
||
this.isWebGLAvailable = LiquifyWebGLManager.isSupported();
|
||
}
|
||
|
||
/**
|
||
* 初始化液化管理器
|
||
* @param {Object} options 配置选项
|
||
* @returns {Boolean} 是否初始化成功
|
||
*/
|
||
initialize(options = {}) {
|
||
if (options.canvas) this.canvas = options.canvas;
|
||
if (options.layerManager) this.layerManager = options.layerManager;
|
||
|
||
if (!this.canvas || !this.layerManager) {
|
||
console.error("液化管理器初始化失败：缺少canvas或layerManager");
|
||
return false;
|
||
}
|
||
|
||
// 记录初始化时间，用于性能监控
|
||
this.performance.lastInitTime = Date.now();
|
||
|
||
// 创建CPU渲染器 (始终创建作为备选)
|
||
this.cpuRenderer = new LiquifyCPUManager({
|
||
gridSize: this.config.gridSize,
|
||
maxStrength: this.config.maxStrength,
|
||
smoothingIterations: this.config.smoothingIterations,
|
||
relaxFactor: this.config.relaxFactor,
|
||
});
|
||
|
||
// 检查是否应创建WebGL渲染器
|
||
if (this.isWebGLAvailable && !this.config.forceCPU) {
|
||
this.webglRenderer = new LiquifyWebGLManager({
|
||
gridSize: this.config.gridSize,
|
||
maxStrength: this.config.maxStrength,
|
||
meshResolution: this.config.meshResolution,
|
||
});
|
||
}
|
||
|
||
this.initialized = true;
|
||
return true;
|
||
}
|
||
|
||
/**
|
||
* 为液化操作准备图像
|
||
* @param {Object|String} target 目标对象或图层ID
|
||
* @returns {Promise<Object>} 准备结果
|
||
*/
|
||
async prepareForLiquify(target) {
|
||
if (!this.initialized) {
|
||
throw new Error("液化管理器未初始化");
|
||
}
|
||
|
||
let targetObject, targetLayerId;
|
||
|
||
// 处理传入的是图层ID的情况
|
||
if (typeof target === "string") {
|
||
targetLayerId = target;
|
||
const { layer } = findLayerRecursively(
|
||
this.layerManager.layers?.value ?? this.layerManager.layers,
|
||
targetLayerId
|
||
);
|
||
|
||
// 检查图层是否存在和是否有对象
|
||
let hasObjects = false;
|
||
if (layer) {
|
||
if (layer.type === "background" && layer.fabricObject) {
|
||
hasObjects = true;
|
||
targetObject = layer.fabricObject;
|
||
} else if (layer.fabricObjects && layer.fabricObjects.length > 0) {
|
||
hasObjects = true;
|
||
targetObject = layer.fabricObjects[0];
|
||
}
|
||
}
|
||
|
||
if (!hasObjects) {
|
||
throw new Error("目标图层为空或不存在");
|
||
}
|
||
} else if (typeof target === "object") {
|
||
// 传入的是对象
|
||
targetObject = target;
|
||
const { layer } = findLayerRecursively(
|
||
this.layerManager.layers?.value ?? this.layerManager.layers,
|
||
targetObject.layerId
|
||
);
|
||
if (layer) {
|
||
targetLayerId = layer.id;
|
||
} else {
|
||
throw new Error("无法找到目标对象所属图层");
|
||
}
|
||
} else {
|
||
throw new Error("无效的目标参数");
|
||
}
|
||
|
||
// 检查是否为图像对象
|
||
if (!targetObject || targetObject.type !== "image") {
|
||
throw new Error("目标对象不是图像，无法进行液化操作");
|
||
}
|
||
|
||
// 保存目标对象引用
|
||
this.targetObject = targetObject;
|
||
this.targetLayerId = targetLayerId;
|
||
|
||
// 获取图像数据
|
||
const imageData = await this._getImageData(targetObject);
|
||
if (!imageData) {
|
||
throw new Error("无法获取图像数据");
|
||
}
|
||
|
||
// 保存原始图像数据
|
||
this.originalImageData = imageData;
|
||
this.currentImageData = this._cloneImageData(imageData);
|
||
|
||
// 检查图像大小，选择适合的渲染器
|
||
await this._selectRenderer(imageData);
|
||
|
||
// 预热选定的渲染器
|
||
await this._warmupRenderer(imageData);
|
||
|
||
return {
|
||
targetObject: this.targetObject,
|
||
targetLayerId: this.targetLayerId,
|
||
imageData: this.currentImageData,
|
||
originalImageData: this.originalImageData,
|
||
renderMode: this.renderMode,
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 根据图像大小和设备性能选择渲染器
|
||
* @param {ImageData} imageData 图像数据
|
||
* @private
|
||
*/
|
||
async _selectRenderer(imageData) {
|
||
// 计算图像大小
|
||
const pixelCount = imageData.width * imageData.height;
|
||
|
||
console.log(
|
||
`液化选择渲染器: 图像大小=${pixelCount}像素, WebGL可用=${this.isWebGLAvailable}`
|
||
);
|
||
|
||
// 默认使用CPU渲染器
|
||
this.activeRenderer = this.cpuRenderer;
|
||
this.renderMode = "cpu";
|
||
|
||
// 如果配置强制使用WebGL
|
||
if (this.config.forceWebGL && this.isWebGLAvailable && this.webglRenderer) {
|
||
console.log("液化功能: 强制使用WebGL渲染模式");
|
||
this.activeRenderer = this.webglRenderer;
|
||
this.renderMode = "webgl";
|
||
return;
|
||
}
|
||
|
||
// 如果配置强制使用CPU
|
||
if (this.config.forceCPU) {
|
||
console.log("液化功能: 强制使用CPU渲染模式");
|
||
return;
|
||
}
|
||
|
||
// 根据图像大小和WebGL可用性决定
|
||
if (
|
||
pixelCount > this.config.webglSizeThreshold / 2 && // 降低阈值，让更多尺寸的图像使用WebGL
|
||
this.isWebGLAvailable &&
|
||
this.webglRenderer
|
||
) {
|
||
// 切换到WebGL渲染器
|
||
console.log("液化功能: 自动选择WebGL渲染模式(基于图像尺寸)");
|
||
this.activeRenderer = this.webglRenderer;
|
||
this.renderMode = "webgl";
|
||
} else {
|
||
console.log(
|
||
`液化功能: 使用CPU渲染模式${
|
||
!this.isWebGLAvailable ? " (WebGL不可用)" : ""
|
||
}`
|
||
);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 预热渲染器
|
||
* @param {ImageData} imageData 图像数据
|
||
* @private
|
||
*/
|
||
async _warmupRenderer(imageData) {
|
||
// 创建图像元素
|
||
const img = document.createElement("img");
|
||
|
||
// 将ImageData转换为URL
|
||
const canvas = document.createElement("canvas");
|
||
canvas.width = imageData.width;
|
||
canvas.height = imageData.height;
|
||
const ctx = canvas.getContext("2d");
|
||
ctx.putImageData(imageData, 0, 0);
|
||
|
||
// 使用Promise等待图像加载
|
||
await new Promise((resolve, reject) => {
|
||
img.onload = resolve;
|
||
img.onerror = reject;
|
||
img.src = canvas.toDataURL();
|
||
});
|
||
|
||
// 初始化当前渲染器
|
||
if (this.activeRenderer) {
|
||
if (this.renderMode === "webgl") {
|
||
this.activeRenderer.initialize(img);
|
||
} else {
|
||
this.activeRenderer.initialize(imageData);
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 设置液化模式
|
||
* @param {String} mode 模式名称
|
||
*/
|
||
setMode(mode) {
|
||
if (Object.values(this.modes).includes(mode)) {
|
||
this.currentMode = mode;
|
||
|
||
// 同步更新当前渲染器
|
||
if (this.activeRenderer) {
|
||
this.activeRenderer.setMode(mode);
|
||
}
|
||
|
||
return true;
|
||
}
|
||
return false;
|
||
}
|
||
|
||
/**
|
||
* 设置液化参数
|
||
* @param {String} param 参数名称
|
||
* @param {Number} value 参数值
|
||
*/
|
||
setParam(param, value) {
|
||
if (param in this.params) {
|
||
this.params[param] = value;
|
||
|
||
// 同步更新当前渲染器 - 关键修复：确保参数正确传递
|
||
if (
|
||
this.activeRenderer &&
|
||
typeof this.activeRenderer.setParam === "function"
|
||
) {
|
||
console.log(`EnhancedLiquifyManager 设置参数: ${param}=${value}`);
|
||
this.activeRenderer.setParam(param, value);
|
||
} else {
|
||
console.warn(
|
||
`EnhancedLiquifyManager: 无法设置参数 ${param}，渲染器未就绪`
|
||
);
|
||
}
|
||
|
||
return true;
|
||
}
|
||
|
||
console.warn(`EnhancedLiquifyManager: 无效参数 ${param}`);
|
||
return false;
|
||
}
|
||
|
||
/**
|
||
* 批量设置参数
|
||
* @param {Object} params 参数对象
|
||
*/
|
||
setParams(params) {
|
||
console.log("EnhancedLiquifyManager 批量设置参数:", params);
|
||
|
||
if (params && typeof params === "object") {
|
||
Object.entries(params).forEach(([key, value]) => {
|
||
this.setParam(key, value);
|
||
});
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取当前参数
|
||
* @returns {Object} 当前参数对象
|
||
*/
|
||
getParams() {
|
||
return { ...this.params };
|
||
}
|
||
|
||
/**
|
||
* 重置参数为默认值
|
||
*/
|
||
resetParams() {
|
||
this.params = {
|
||
size: 50,
|
||
pressure: 0.5,
|
||
distortion: 0,
|
||
power: 0.5,
|
||
};
|
||
|
||
// 同步更新当前渲染器
|
||
if (this.activeRenderer) {
|
||
this.activeRenderer.resetParams();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 开始液化操作（记录初始点）
|
||
* @param {Number} x 初始X坐标
|
||
* @param {Number} y 初始Y坐标
|
||
*/
|
||
startLiquifyOperation(x, y) {
|
||
if (
|
||
this.activeRenderer &&
|
||
typeof this.activeRenderer.startDeformation === "function"
|
||
) {
|
||
this.activeRenderer.startDeformation(x, y);
|
||
}
|
||
console.log(
|
||
`开始液化操作，渲染模式=${this.renderMode}, 初始点: (${x}, ${y})`
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 结束液化操作
|
||
*/
|
||
endLiquifyOperation() {
|
||
if (
|
||
this.activeRenderer &&
|
||
typeof this.activeRenderer.endDeformation === "function"
|
||
) {
|
||
this.activeRenderer.endDeformation();
|
||
}
|
||
console.log(`结束液化操作，渲染模式=${this.renderMode}`);
|
||
}
|
||
|
||
/**
|
||
* 应用液化变形
|
||
* @param {Object} target 目标对象
|
||
* @param {String} mode 液化模式
|
||
* @param {Object} params 液化参数
|
||
* @param {Number} x 操作中心点X坐标 (图像像素坐标)
|
||
* @param {Number} y 操作中心点Y坐标 (图像像素坐标)
|
||
* @returns {Promise<ImageData>} 处理后的图像数据
|
||
*/
|
||
async applyLiquify(target, mode, params, x, y) {
|
||
// 性能追踪开始
|
||
const startTime = performance.now();
|
||
|
||
// 如果首次调用，先准备环境
|
||
if (!this.targetObject || this.targetObject !== target) {
|
||
await this.prepareForLiquify(target);
|
||
}
|
||
|
||
// 更新模式和参数
|
||
if (mode) this.setMode(mode);
|
||
if (params) {
|
||
for (const [key, value] of Object.entries(params)) {
|
||
this.setParam(key, value);
|
||
}
|
||
}
|
||
|
||
// 验证坐标是否在图像范围内
|
||
if (!this.originalImageData) {
|
||
console.error("缺少原始图像数据");
|
||
return null;
|
||
}
|
||
|
||
const imageWidth = this.originalImageData.width;
|
||
const imageHeight = this.originalImageData.height;
|
||
|
||
// 坐标边界检查
|
||
if (x < 0 || x >= imageWidth || y < 0 || y >= imageHeight) {
|
||
console.warn(
|
||
`液化坐标超出图像范围: (${x}, ${y}), 图像尺寸: ${imageWidth}x${imageHeight}`
|
||
);
|
||
return null;
|
||
}
|
||
|
||
console.log(
|
||
`应用液化变形: 模式=${mode}, 图像坐标=(${x}, ${y}), 图像尺寸=${imageWidth}x${imageHeight}`
|
||
);
|
||
|
||
// 检查并应用变形
|
||
if (this.activeRenderer && typeof x === "number" && typeof y === "number") {
|
||
// 应用变形
|
||
let result;
|
||
|
||
if (this.renderMode === "webgl") {
|
||
// WebGL渲染器：传入图像像素坐标
|
||
result = this.activeRenderer.applyDeformation(x, y);
|
||
} else {
|
||
// CPU渲染器：传入图像像素坐标
|
||
result = this.activeRenderer.applyDeformation(x, y);
|
||
}
|
||
|
||
// 更新当前图像数据
|
||
if (result) {
|
||
this.currentImageData = result;
|
||
}
|
||
|
||
// 性能追踪结束
|
||
const endTime = performance.now();
|
||
this._trackPerformance(endTime - startTime);
|
||
|
||
return result;
|
||
}
|
||
|
||
console.error("无法应用液化变形：渲染器未初始化或坐标无效");
|
||
return null;
|
||
}
|
||
|
||
/**
|
||
* 追踪性能数据
|
||
* @param {Number} time 操作耗时(毫秒)
|
||
* @private
|
||
*/
|
||
_trackPerformance(time) {
|
||
this.performance.lastOperationTime = time;
|
||
this.performance.operationCount++;
|
||
|
||
// 维护最近10次操作的耗时记录
|
||
this.performance.renderTimes.push(time);
|
||
if (this.performance.renderTimes.length > 10) {
|
||
this.performance.renderTimes.shift();
|
||
}
|
||
|
||
// 计算平均耗时
|
||
const avgTime =
|
||
this.performance.renderTimes.reduce((sum, t) => sum + t, 0) /
|
||
this.performance.renderTimes.length;
|
||
|
||
// 检测性能问题
|
||
this.performance.isPerformanceIssue = avgTime > 100; // 如果平均耗时超过100毫秒
|
||
|
||
// 输出性能信息（调试用）
|
||
if (this.performance.operationCount % 10 === 0) {
|
||
console.log(
|
||
`液化性能数据: 模式=${this.renderMode}, 平均耗时=${avgTime.toFixed(
|
||
2
|
||
)}ms, 图像尺寸=${this.originalImageData?.width}x${
|
||
this.originalImageData?.height
|
||
}`
|
||
);
|
||
}
|
||
|
||
// 如果使用WebGL但性能差，可以考虑切换到优化的CPU实现
|
||
if (
|
||
this.renderMode === "webgl" &&
|
||
this.performance.isPerformanceIssue &&
|
||
this.performance.operationCount > 5
|
||
) {
|
||
console.warn("WebGL液化性能不佳，考虑切换到CPU模式");
|
||
// 注意：这里不自动切换，因为可能会导致中途渲染结果不一致
|
||
}
|
||
}
|
||
setRealtimeUpdater(realtimeUpdater) {
|
||
this.realtimeUpdater = realtimeUpdater;
|
||
}
|
||
/**
|
||
* 重置液化操作
|
||
* @returns {ImageData} 重置后的图像数据
|
||
*/
|
||
reset() {
|
||
if (!this.activeRenderer) return null;
|
||
|
||
// 使用当前渲染器重置
|
||
const result = this.activeRenderer.reset();
|
||
|
||
// 更新当前图像数据
|
||
if (result) {
|
||
this.currentImageData = result;
|
||
}
|
||
|
||
return result;
|
||
}
|
||
|
||
/**
|
||
* 检查图层是否可以液化
|
||
* @param {String} layerId 图层ID
|
||
* @returns {Object} 检查结果
|
||
*/
|
||
checkLayerForLiquify(layerId) {
|
||
if (!this.layerManager) {
|
||
return {
|
||
valid: false,
|
||
message: "图层管理器未初始化",
|
||
needsRasterization: false,
|
||
isImage: false,
|
||
isEmpty: true,
|
||
isGroup: false,
|
||
};
|
||
}
|
||
|
||
// 获取图层
|
||
// const layer = this.layerManager.getLayerById(layerId);
|
||
const { layer } = findLayerRecursively(
|
||
this.layerManager.layers?.value ?? this.layerManager.layers,
|
||
layerId
|
||
);
|
||
if (!layer) {
|
||
return {
|
||
valid: false,
|
||
message: "图层不存在",
|
||
needsRasterization: false,
|
||
isImage: false,
|
||
isEmpty: true,
|
||
isGroup: false,
|
||
};
|
||
}
|
||
|
||
// 检查图层是否为空
|
||
let objectsToCheck = [];
|
||
if (layer.isBackground || layer.type === "background" || layer.isFixed) {
|
||
// 背景图层使用 fabricObject (单数)
|
||
if (layer.fabricObject) {
|
||
objectsToCheck = [layer.fabricObject];
|
||
}
|
||
} else {
|
||
// 普通图层使用 fabricObjects (复数)
|
||
objectsToCheck = layer.fabricObjects || [];
|
||
}
|
||
|
||
if (objectsToCheck.length === 0) {
|
||
return {
|
||
valid: false,
|
||
message: t('Canvas.layerEmptyNoLiquidation'),
|
||
needsRasterization: false,
|
||
isImage: false,
|
||
isEmpty: true,
|
||
isGroup: false,
|
||
};
|
||
}
|
||
|
||
// 检查是否为单一图像
|
||
const singleObject = objectsToCheck.length === 1;
|
||
const isImage =
|
||
singleObject &&
|
||
(objectsToCheck[0].type === "image" ||
|
||
objectsToCheck[0].type === "rasterized-layer");
|
||
|
||
// 检查是否为组
|
||
const isGroup =
|
||
objectsToCheck.some((obj) => obj.type === "group") ||
|
||
layer.type === LayerType.GROUP ||
|
||
layer.children?.length > 0;
|
||
|
||
// 如果不是单一图像，需要栅格化
|
||
const needsRasterization = !isImage || isGroup;
|
||
|
||
return {
|
||
valid: isImage && !isGroup,
|
||
message: isImage ? "图层可以进行液化操作" : "需要先将图层栅格化",
|
||
needsRasterization: needsRasterization,
|
||
isImage: isImage,
|
||
isEmpty: false,
|
||
isGroup: isGroup,
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 获取图像数据
|
||
* @param {Object} fabricObject Fabric图像对象
|
||
* @returns {Promise<ImageData>} 图像数据
|
||
* @private
|
||
*/
|
||
async _getImageData(fabricObject) {
|
||
return new Promise((resolve, reject) => {
|
||
try {
|
||
console.log("开始获取图像数据，对象类型:", fabricObject.type);
|
||
console.log("对象属性:", {
|
||
width: fabricObject.width,
|
||
height: fabricObject.height,
|
||
hasElement: !!fabricObject._element,
|
||
hasSrc: !!fabricObject.getSrc,
|
||
});
|
||
|
||
// 检查基本属性
|
||
if (!fabricObject.width || !fabricObject.height) {
|
||
reject(new Error("图像对象缺少有效的宽度或高度"));
|
||
return;
|
||
}
|
||
|
||
// 创建临时canvas - 使用原始图像尺寸，不考虑fabric对象的缩放
|
||
const tempCanvas = document.createElement("canvas");
|
||
tempCanvas.width = fabricObject.width;
|
||
tempCanvas.height = fabricObject.height;
|
||
const tempCtx = tempCanvas.getContext("2d");
|
||
|
||
console.log(
|
||
`创建临时Canvas，尺寸: ${tempCanvas.width}x${tempCanvas.height}`
|
||
);
|
||
|
||
// 处理不同的图像源
|
||
if (fabricObject._element) {
|
||
console.log("使用 _element 绘制图像");
|
||
|
||
// 检查_element是否有效
|
||
if (
|
||
!fabricObject._element.complete &&
|
||
fabricObject._element.tagName === "IMG"
|
||
) {
|
||
console.log("图像未加载完成，等待加载...");
|
||
fabricObject._element.onload = () => {
|
||
try {
|
||
tempCtx.drawImage(
|
||
fabricObject._element,
|
||
0,
|
||
0,
|
||
fabricObject.width,
|
||
fabricObject.height
|
||
);
|
||
const imageData = tempCtx.getImageData(
|
||
0,
|
||
0,
|
||
tempCanvas.width,
|
||
tempCanvas.height
|
||
);
|
||
console.log("✅ 图像加载完成后获取数据成功");
|
||
resolve(imageData);
|
||
} catch (error) {
|
||
console.error("图像加载后绘制失败:", error);
|
||
reject(error);
|
||
}
|
||
};
|
||
fabricObject._element.onerror = () => {
|
||
reject(new Error("图像加载失败"));
|
||
};
|
||
return;
|
||
}
|
||
|
||
// 直接绘制已加载的图像
|
||
tempCtx.drawImage(
|
||
fabricObject._element,
|
||
0,
|
||
0,
|
||
fabricObject.width,
|
||
fabricObject.height
|
||
);
|
||
} else if (
|
||
fabricObject.getSrc &&
|
||
typeof fabricObject.getSrc === "function"
|
||
) {
|
||
console.log("使用 getSrc() 方法获取图像源");
|
||
|
||
// 通过URL创建图像
|
||
const img = new Image();
|
||
img.crossOrigin = "anonymous"; // 避免跨域问题
|
||
|
||
img.onload = () => {
|
||
try {
|
||
console.log(
|
||
`图像加载成功，原始尺寸: ${img.naturalWidth}x${img.naturalHeight}`
|
||
);
|
||
|
||
tempCtx.drawImage(
|
||
img,
|
||
0,
|
||
0,
|
||
fabricObject.width,
|
||
fabricObject.height
|
||
);
|
||
|
||
const imageData = tempCtx.getImageData(
|
||
0,
|
||
0,
|
||
tempCanvas.width,
|
||
tempCanvas.height
|
||
);
|
||
|
||
console.log("✅ 通过URL获取图像数据成功");
|
||
resolve(imageData);
|
||
} catch (error) {
|
||
console.error("绘制图像失败:", error);
|
||
reject(error);
|
||
}
|
||
};
|
||
|
||
img.onerror = (error) => {
|
||
console.error("图像加载失败:", error);
|
||
reject(new Error("无法加载图像URL: " + fabricObject.getSrc()));
|
||
};
|
||
|
||
const srcUrl = fabricObject.getSrc();
|
||
console.log("加载图像URL:", srcUrl);
|
||
img.src = srcUrl;
|
||
return;
|
||
} else if (fabricObject.src) {
|
||
console.log("使用 src 属性获取图像源");
|
||
|
||
// 通过src属性创建图像
|
||
const img = new Image();
|
||
img.crossOrigin = "anonymous";
|
||
|
||
img.onload = () => {
|
||
try {
|
||
tempCtx.drawImage(
|
||
img,
|
||
0,
|
||
0,
|
||
fabricObject.width,
|
||
fabricObject.height
|
||
);
|
||
|
||
const imageData = tempCtx.getImageData(
|
||
0,
|
||
0,
|
||
tempCanvas.width,
|
||
tempCanvas.height
|
||
);
|
||
|
||
console.log("✅ 通过src属性获取图像数据成功");
|
||
resolve(imageData);
|
||
} catch (error) {
|
||
console.error("通过src绘制图像失败:", error);
|
||
reject(error);
|
||
}
|
||
};
|
||
|
||
img.onerror = (error) => {
|
||
console.error("通过src加载图像失败:", error);
|
||
reject(new Error("无法加载图像src: " + fabricObject.src));
|
||
};
|
||
|
||
console.log("加载图像src:", fabricObject.src);
|
||
img.src = fabricObject.src;
|
||
return;
|
||
} else {
|
||
console.error("无法找到有效的图像源");
|
||
reject(
|
||
new Error("图像对象缺少有效的图像源（_element, getSrc, 或 src）")
|
||
);
|
||
return;
|
||
}
|
||
|
||
// 如果走到这里，说明使用了_element直接绘制
|
||
try {
|
||
const imageData = tempCtx.getImageData(
|
||
0,
|
||
0,
|
||
tempCanvas.width,
|
||
tempCanvas.height
|
||
);
|
||
|
||
console.log(
|
||
`✅ 获取图像数据成功: 对象尺寸=${fabricObject.width}x${fabricObject.height}, ` +
|
||
`对象缩放=(${fabricObject.scaleX}, ${fabricObject.scaleY}), ` +
|
||
`图像数据尺寸=${imageData.width}x${imageData.height}`
|
||
);
|
||
|
||
resolve(imageData);
|
||
} catch (error) {
|
||
console.error("获取ImageData失败:", error);
|
||
reject(new Error("无法从Canvas获取图像数据: " + error.message));
|
||
}
|
||
} catch (error) {
|
||
console.error("_getImageData 执行失败:", error);
|
||
reject(error);
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 克隆图像数据
|
||
* @param {ImageData} imageData 原始图像数据
|
||
* @returns {ImageData} 克隆的图像数据
|
||
* @private
|
||
*/
|
||
_cloneImageData(imageData) {
|
||
if (!imageData) return null;
|
||
|
||
// 使用新的浏览器API直接复制
|
||
if (typeof ImageData.prototype.constructor === "function") {
|
||
try {
|
||
return new ImageData(
|
||
new Uint8ClampedArray(imageData.data),
|
||
imageData.width,
|
||
imageData.height
|
||
);
|
||
} catch (e) {
|
||
console.warn("使用备选方法克隆ImageData");
|
||
}
|
||
}
|
||
|
||
// 备选方法
|
||
const canvas = document.createElement("canvas");
|
||
const ctx = canvas.getContext("2d");
|
||
|
||
canvas.width = imageData.width;
|
||
canvas.height = imageData.height;
|
||
|
||
ctx.putImageData(imageData, 0, 0);
|
||
|
||
return ctx.getImageData(0, 0, imageData.width, imageData.height);
|
||
}
|
||
|
||
/**
|
||
* 释放资源
|
||
*/
|
||
dispose() {
|
||
// 释放渲染器资源
|
||
if (this.webglRenderer) {
|
||
this.webglRenderer.dispose();
|
||
this.webglRenderer = null;
|
||
}
|
||
|
||
if (this.cpuRenderer) {
|
||
this.cpuRenderer.dispose();
|
||
this.cpuRenderer = null;
|
||
}
|
||
|
||
// 清除引用
|
||
this.activeRenderer = null;
|
||
this.canvas = null;
|
||
this.layerManager = null;
|
||
this.targetObject = null;
|
||
this.originalImageData = null;
|
||
this.currentImageData = null;
|
||
this.initialized = false;
|
||
this.renderMode = "unknown";
|
||
}
|
||
|
||
/**
|
||
* 获取当前状态信息
|
||
* @returns {Object} 状态信息
|
||
*/
|
||
getStatus() {
|
||
return {
|
||
initialized: this.initialized,
|
||
renderMode: this.renderMode,
|
||
isWebGLAvailable: this.isWebGLAvailable,
|
||
currentMode: this.currentMode,
|
||
params: { ...this.params },
|
||
performance: { ...this.performance },
|
||
imageSize: this.originalImageData
|
||
? `${this.originalImageData.width}x${this.originalImageData.height}`
|
||
: "N/A",
|
||
};
|
||
}
|
||
}
|