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

画布增加的新功能

Browse Source
This commit is contained in:
李志鹏
2026-01-02 11:24:11 +08:00
parent 1ae365b1f3
commit f8e4ab8cdb
59 changed files with 4401 additions and 1213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/component/Canvas/CanvasEditor/utils/objectHelper.js
View File

@@ -7,55 +7,92 @@ import { fabric } from "fabric-with-all";
* @returns {Promise<fabric.Object>} 恢复的 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;
}
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;
// 恢复自定义属性
if (serializedObject.id) fabricObject.id = serializedObject.id;
if (serializedObject.layerId) fabricObject.layerId = serializedObject.layerId;
if (serializedObject.layerName) fabricObject.layerName = serializedObject.layerName;
// 更新坐标
fabricObject.setCoords();
// 更新坐标
fabricObject.setCoords();
// 添加到画布
// canvas.add(fabricObject);
// 添加到画布
// canvas.add(fabricObject);
resolve(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("对象恢复失败"));
}
});
}
});
// 根据类型选择恢复方法
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;
}