保存画布排除特殊图层

This commit is contained in:
李志鹏
2026-01-06 15:09:02 +08:00
parent 466d278b29
commit 59541a9d3d
2 changed files with 45 additions and 29 deletions

View File

@@ -1198,43 +1198,55 @@ export class CanvasManager {
// this.canvas.discardActiveObject();
this.canvas.renderAll();
// 排除颜色图层和特殊组图层
const excludedLayers = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
this.layers.value.forEach((layer) => {
if(excludedLayers.includes(layer.id)){
excludedLayers.push(...layer.children?.map((child) => child.id));
}
})
const canvas = this.canvas.toJSON([
"id",
"type",
"layerId",
"layerName",
"isBackground",
"isLocked",
"isVisible",
"isFixed",
"parentId",
"eraser",
"eraserable",
"erasable",
"customType",
"fill_",
"scaleX",
"scaleY",
"top",
"left",
"width",
"height",
]);
canvas.objects = canvas.objects.filter((v) => !excludedLayers.includes(v.layerId));
const simplifyLayersData = simplifyLayers(
JSON.parse(JSON.stringify(this.layers.value))
JSON.parse(JSON.stringify(this.layers.value)),
excludedLayers
);
const data = JSON.stringify({
canvas: this.canvas.toJSON([
"id",
"type",
"layerId",
"layerName",
"isBackground",
"isLocked",
"isVisible",
"isFixed",
"parentId",
"eraser",
"eraserable",
"erasable",
"customType",
"fill_",
"scaleX",
"scaleY",
"top",
"left",
"width",
"height",
]),
const data = {
canvas,
layers: simplifyLayersData, // 简化图层数据
// layers: JSON.stringify(JSON.parse(JSON.stringify(this.layers.value))), // 全数据
version: "1.0", // 添加版本信息
timestamp: new Date().toISOString(), // 添加时间戳
canvasWidth: this.canvasWidth.value,
canvasHeight: this.canvasHeight.value,
canvasColor: this.canvasColor.value,
activeLayerId: this.layerManager?.activeLayerId?.value,
});
};
console.log("获取画布JSON数据...", data);
return data;
return JSON.stringify(data);
} catch (error) {
console.error("获取画布JSON失败:", error);
throw new Error("获取画布JSON失败");

View File

@@ -155,15 +155,19 @@ export function validateLayerAssociations(layers, canvasObjects) {
/**
* 简化layers对象属性只保留必要的属性
* @param {Array} layers 图层数组
* @param {Array} excludedLayers 排除的图层ID数组
* @returns {Array} 简化后的图层数组
*/
export function simplifyLayers(layers) {
export function simplifyLayers(layers, excludedLayers = []) {
if (!layers || !isArray(layers)) {
console.warn("simplifyLayers 请传入有效的图层数组:", layers);
return [];
}
return layers.map((layer) => {
// 检查是否在排除列表中
if (excludedLayers && excludedLayers.includes(layer.id)) return null;
const simplifiedLayer = {
id: layer.id,
name: layer.name,
@@ -215,7 +219,7 @@ export function simplifyLayers(layers) {
};
return simplifiedLayer;
});
}).filter((layer) => !!layer);
}
/**