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

feat : 显示选区逻辑完成

Browse Source
This commit is contained in:
bighuixiang
2025-07-21 01:17:25 +08:00
parent ba04930966
commit c756d7377f
9 changed files with 983 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/component/Canvas/CanvasEditor/utils/layerUtils.js
View File

@@ -15,13 +15,18 @@ export function buildLayerAssociations(layer, canvasObjects) {
// 处理单个fabricObject关联
if (layer.fabricObject) {
// 如果图层已经有关联的fabricObject，确保它的layerId和layerName正确
layer.fabricObject = canvasObjects.find((obj) => obj.id === layer.fabricObject.id) || null;
layer.fabricObject =
canvasObjects.find((obj) => obj.id === layer.fabricObject.id) || null;
}
if (layer.clippingMask) {
// clippingMask 可能是一个fabricObject或组 也可能是一个简单对象
const clippingMaskObj = canvasObjects.find((obj) => obj.id === layer.clippingMask.id);
layer.clippingMask = clippingMaskObj ? clippingMaskObj?.toObject?.(["id"]) : layer.clippingMask;
const clippingMaskObj = canvasObjects.find(
(obj) => obj.id === layer.clippingMask.id
);
layer.clippingMask = clippingMaskObj
? clippingMaskObj?.toObject?.(["id"])
: layer.clippingMask;
}
// 处理多个fabricObjects关联
@@ -167,7 +172,10 @@ export function simplifyLayers(layers) {
opacity: layer.opacity,
isBackground: layer.isBackground || false,
isFixed: layer.isFixed || false,
clippingMask: layer.clippingMask?.toObject?.(["id", "layerId"]) || layer.clippingMask || null, // 可能是一个fabricObject或组 也可能是一个简单对象
clippingMask:
layer.clippingMask?.toObject?.(["id", "layerId"]) ||
layer.clippingMask ||
null, // 可能是一个fabricObject或组 也可能是一个简单对象
// ? {
// id: layer.clippingMask.id,
// type: layer.clippingMask.type,
@@ -192,9 +200,13 @@ export function simplifyLayers(layers) {
)
.filter((obj) => obj !== null)
: [],
children: layer.children && isArray(layer.children) ? simplifyLayers(layer.children) : [],
children:
layer.children && isArray(layer.children)
? simplifyLayers(layer.children)
: [],
fill: layer?.fill || null,
fillColor: layer.fillColor,
selectObject: layer.selectObject,
};
return simplifiedLayer;
@@ -231,7 +243,9 @@ export function restoreLayers(simplifiedLayers, canvasObjects) {
if (layer.clippingMask) {
// clippingMask 可能是一个fabricObject或组 也可能是一个简单对象
const clippingMaskObj = canvasObjects.find((obj) => obj.id === layer.clippingMask.id);
const clippingMaskObj = canvasObjects.find(
(obj) => obj.id === layer.clippingMask.id
);
restoredLayer.clippingMask = clippingMaskObj
? clippingMaskObj?.toObject?.(["id"])
: layer.clippingMask;
@@ -239,11 +253,17 @@ export function restoreLayers(simplifiedLayers, canvasObjects) {
// 恢复单个fabricObject关联
if (layer.fabricObject?.id) {
const fabricObj = canvasObjects.find((obj) => obj.id === layer.fabricObject.id);
const fabricObj = canvasObjects.find(
(obj) => obj.id === layer.fabricObject.id
);
if (fabricObj) {
fabricObj.layerId = layer.id;
fabricObj.layerName = layer.name;
restoredLayer.fabricObject = fabricObj.toObject(["id", "layerId", "type"]);
restoredLayer.fabricObject = fabricObj.toObject([
"id",
"layerId",
"type",
]);
} else {
restoredLayer.fabricObject = null;
}
@@ -253,7 +273,9 @@ export function restoreLayers(simplifiedLayers, canvasObjects) {
if (layer.fabricObjects && isArray(layer.fabricObjects)) {
restoredLayer.fabricObjects = layer.fabricObjects
.map((fabricRef) => {
const fabricObj = canvasObjects.find((obj) => obj.id === fabricRef.id);
const fabricObj = canvasObjects.find(
(obj) => obj.id === fabricRef.id
);
if (fabricObj) {
fabricObj.layerId = layer.id;
fabricObj.layerName = layer.name;