import { fabric } from "fabric-with-all"; /** * 将序列化对象恢复为 fabric 对象 * @param {Object} serializedObject - toObject() 生成的对象 * @param {fabric.Canvas} canvas - 目标画布 * @returns {Promise} 恢复的 fabric 对象 */ export async function restoreFabricObject(serializedObject, canvas) { return new Promise((resolve, reject) => { const objectType = serializedObject.type; // 定义恢复后的处理函数 const handleRestoredObject = (fabricObject) => { if (!fabricObject) { reject(new Error(`无法恢复 ${objectType} 类型的对象`)); return; } // 恢复自定义属性 if (serializedObject.id) fabricObject.id = serializedObject.id; if (serializedObject.layerId) fabricObject.layerId = serializedObject.layerId; if (serializedObject.layerName) fabricObject.layerName = serializedObject.layerName; // 更新坐标 fabricObject.setCoords(); // 添加到画布 // canvas.add(fabricObject); resolve(fabricObject); }; // 根据类型选择恢复方法 switch (objectType) { case "rect": fabric.Rect.fromObject(serializedObject, handleRestoredObject); break; case "circle": fabric.Circle.fromObject(serializedObject, handleRestoredObject); break; case "path": fabric.Path.fromObject(serializedObject, handleRestoredObject); break; case "image": fabric.Image.fromObject(serializedObject, handleRestoredObject); break; case "group": fabric.Group.fromObject(serializedObject, handleRestoredObject); break; default: // 使用通用方法 fabric.util.enlivenObjects([serializedObject], (objects) => { if (objects && objects[0]) { handleRestoredObject(objects[0]); } else { reject(new Error("对象恢复失败")); } }); } }); } /** * 获取对象黑白通道画布 */ export function getObjectAlphaToCanvas(object) { const image = object.getElement(); const { width, height } = image; if(!width || !height){ console.warn("对象没有元素"); return null; } const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0, width, height); const data = ctx.getImageData(0, 0, width, height); for (let i = 0; i < data.data.length; i += 4) { const r = data.data[i + 0]; const g = data.data[i + 1]; const b = data.data[i + 2]; const a = data.data[i + 3]; if (r || g || b || a) { data.data[i + 0] = 255; data.data[i + 1] = 255; data.data[i + 2] = 255; data.data[i + 3] = 255; }else{ data.data[i + 0] = 0; data.data[i + 1] = 0; data.data[i + 2] = 0; data.data[i + 3] = 0; } } ctx.clearRect(0, 0, width, height); ctx.putImageData(data, 0, 0); return canvas; }