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

fix: 优化细节

Browse Source
This commit is contained in:
bighuixiang
2025-07-24 21:37:21 +08:00
parent 46b1c5cd71
commit 3ff5e27db6
10 changed files with 335 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js
View File

@@ -72,7 +72,6 @@ export class FillGroupLayerBackgroundCommand extends Command {
originY: clippingMaskFabricObject.originY || "center",
scaleX: clippingMaskFabricObject.scaleX || 1,
scaleY: clippingMaskFabricObject.scaleY || 1,
// type: "fill",
});
// this.newFill.clipPath = clippingMaskFabricObject;
// this.newFill.dirty = true;
@@ -92,7 +91,6 @@ export class FillGroupLayerBackgroundCommand extends Command {
evented: false,
originX: "center",
originY: "center",
// type: "fill",
});
}
}

42
src/component/Canvas/CanvasEditor/commands/FillLayerBackgroundCommand.js
View File

@@ -52,7 +52,10 @@ export class FillLayerBackgroundCommand extends Command {
let clippingMaskFabricObject = null;
if (layer.clippingMask) {
// 反序列化 clippingMask
clippingMaskFabricObject = await restoreFabricObject(layer.clippingMask, this.canvas);
clippingMaskFabricObject = await restoreFabricObject(
layer.clippingMask,
this.canvas
);
clippingMaskFabricObject.clipPath = null;
clippingMaskFabricObject.set({
@@ -75,7 +78,6 @@ export class FillLayerBackgroundCommand extends Command {
originY: clippingMaskFabricObject.originY || "center",
scaleX: clippingMaskFabricObject.scaleX || 1,
scaleY: clippingMaskFabricObject.scaleY || 1,
type: "fill",
});
this.newFill.clipPath = clippingMaskFabricObject; // 设置填充的遮罩
@@ -96,7 +98,6 @@ export class FillLayerBackgroundCommand extends Command {
evented: false,
originX: "center",
originY: "center",
type: "fill",
});
}
}
@@ -104,11 +105,15 @@ export class FillLayerBackgroundCommand extends Command {
// 判断fabricObjects是否是组，是组则添加填充到最前面，否则创建组
if (layer.fabricObjects && layer.fabricObjects.length > 0) {
let insertIndex =
this.canvas.getObjects()?.findIndex((obj) => obj.id === layer.fabricObjects?.[0]?.id) || 0;
this.canvas
.getObjects()
?.findIndex((obj) => obj.id === layer.fabricObjects?.[0]?.id) || 0;
if (this.oldFill) {
// 如果有旧填充，先获取旧的索引再移除旧填充
insertIndex =
this.canvas.getObjects()?.findIndex((obj) => obj.id === this.oldFill?.id) || 0;
this.canvas
.getObjects()
?.findIndex((obj) => obj.id === this.oldFill?.id) || 0;
removeCanvasObjectByObject(this.canvas, this.oldFill);
}
insertIndex = insertIndex == -1 ? 0 : insertIndex;
@@ -122,13 +127,17 @@ export class FillLayerBackgroundCommand extends Command {
.getObjects()
.findIndex(
(obj) =>
obj.id === this.originalfabricObjects[this.originalfabricObjects.length - 1]?.id
obj.id ===
this.originalfabricObjects[this.originalfabricObjects.length - 1]
?.id
) || 0;
if (this.oldFill) {
// 如果有旧填充，先获取旧的索引再移除旧填充
insertIndex =
this.canvas.getObjects()?.findIndex((obj) => obj.id === this.oldFill?.id) || 0;
this.canvas
.getObjects()
?.findIndex((obj) => obj.id === this.oldFill?.id) || 0;
removeCanvasObjectByObject(this.canvas, this.oldFill);
}
insertIndex = insertIndex == -1 ? 0 : insertIndex;
@@ -142,7 +151,9 @@ export class FillLayerBackgroundCommand extends Command {
if (!this.isRetimeUpdate) {
layer.fill = this.newFill.toObject(["id", "layerId"]);
layer.fillColor = this.fillColor;
this.canvasManager.thumbnailManager?.generateLayerThumbnail(this.layer.id);
this.canvasManager.thumbnailManager?.generateLayerThumbnail(
this.layer.id
);
// 重新排序
// 使用LayerSort工具重新排列画布对象（如果可用）
@@ -187,7 +198,10 @@ export class FillLayerBackgroundCommand extends Command {
.map((obj) => {
return findObjectById(this.canvas.value, obj.id)?.object || obj;
});
} else if (this.layer.fabricObjects && this.layer.fabricObjects.length > 0) {
} else if (
this.layer.fabricObjects &&
this.layer.fabricObjects.length > 0
) {
// 如果是普通图层，直接返回其fabric对象
return this.layer.fabricObjects.map((obj) => {
return findObjectById(this.canvas.value, obj.id)?.object || obj;
@@ -204,11 +218,17 @@ export class FillLayerBackgroundCommand extends Command {
minTop = Infinity,
maxRight = -Infinity,
maxBottom = -Infinity;
console.log("计算当前所有对象的边界信息:===>", this.originalfabricObjects.length);
console.log(
"计算当前所有对象的边界信息:===>",
this.originalfabricObjects.length
);
this.originalfabricObjects?.forEach((obj) => {
const { object } = findObjectById(this.canvas, obj.id) || {};
if (object) {
const rect = object.getBoundingRect({ absolute: true, includeStroke: false });
const rect = object.getBoundingRect({
absolute: true,
includeStroke: false,
});
minLeft = Math.min(minLeft, rect.left);
minTop = Math.min(minTop, rect.top);
maxRight = Math.max(maxRight, rect.left + rect.width);

2
src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js
View File

@@ -224,7 +224,7 @@ export class AddObjectToLayerCommand extends Command {
isLocked: layer.locked || false, // 是否锁定
isVisible: layer.visible !== false, // 是否可见
eraser: layer.eraser || false, // 是否为橡皮擦
type: this.fabricObject.type || "object", // 对象类型
// type: this.fabricObject.type || "object", // 对象类型
selectable: true, // 设置对象可选择
evented: true, // 设置对象可事件
});

48
src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js
View File

@@ -1,6 +1,11 @@
import { Command } from "./Command";
import { fabric } from "fabric-with-all";
import { LayerType, OperationType, createLayer, findLayerRecursively } from "../utils/layerHelper";
import {
LayerType,
OperationType,
createLayer,
findLayerRecursively,
} from "../utils/layerHelper";
import {
generateId,
optimizeCanvasRendering,
@@ -34,7 +39,10 @@ export class RasterizeLayerCommand extends Command {
this.layerManager = options.layerManager;
// 查找目标图层
const { layer, parent } = findLayerRecursively(this.layers.value, this.layerId);
const { layer, parent } = findLayerRecursively(
this.layers.value,
this.layerId
);
this.layer = layer;
this.parentLayer = parent;
this.isGroupLayer = this.layer?.children && this.layer.children.length > 0;
@@ -94,7 +102,9 @@ export class RasterizeLayerCommand extends Command {
console.log(`✅ 图层 ${this.layer.name} 组合完成`);
this.canvas?.thumbnailManager?.generateLayerThumbnail?.(this.rasterizedLayerId);
this.canvas?.thumbnailManager?.generateLayerThumbnail?.(
this.rasterizedLayerId
);
return this.rasterizedLayerId;
} catch (error) {
console.error("组合图层失败:", error);
@@ -330,7 +340,7 @@ export class RasterizeLayerCommand extends Command {
// 更新图像对象的图层关联
rasterizedImage.set({
id: this.resterizedId,
type: "image",
// type: "image",
layerId: this.rasterizedLayerId,
layerName: this.rasterizedLayer.name,
});
@@ -352,7 +362,10 @@ export class RasterizeLayerCommand extends Command {
*/
_replaceLayerInStructure() {
// 1.当前如果是子图层，则插入到子图层的位置
const { layer, parent } = findLayerRecursively(this.layers.value, this.layerId);
const { layer, parent } = findLayerRecursively(
this.layers.value,
this.layerId
);
let insertIndex = 0;
// 说明是子图层
@@ -373,7 +386,11 @@ export class RasterizeLayerCommand extends Command {
if (insertIndex !== -1) {
if (parent) {
const pIndex = this.layers.value.findIndex((l) => l.id === parent.id);
this.layers.value[pIndex].children?.splice?.(insertIndex, 1, this.rasterizedLayer);
this.layers.value[pIndex].children?.splice?.(
insertIndex,
1,
this.rasterizedLayer
);
} else {
this.layers.value.splice(insertIndex, 1, this.rasterizedLayer);
}
@@ -391,9 +408,14 @@ export class RasterizeLayerCommand extends Command {
async _getMaskObject() {
// 如果图层有clippingMask，获取对应的fabric对象
if (this.layer?.clippingMask) {
const { object: maskObject } = findObjectById(this.canvas, this.layer.clippingMask.id);
const { object: maskObject } = findObjectById(
this.canvas,
this.layer.clippingMask.id
);
if (maskObject) {
console.log(`📎 找到遮罩对象: ${maskObject.id}, 类型: ${maskObject.type}`);
console.log(
`📎 找到遮罩对象: ${maskObject.id}, 类型: ${maskObject.type}`
);
return maskObject;
}
return await restoreFabricObject(this.layer.clippingMask);
@@ -439,7 +461,10 @@ export class ExportLayerToImageCommand extends Command {
this.layerManager = options.layerManager;
// 查找目标图层
const { layer, parent } = findLayerRecursively(this.layers.value, this.layerId);
const { layer, parent } = findLayerRecursively(
this.layers.value,
this.layerId
);
this.layer = layer;
this.parentLayer = parent;
this.isGroupLayer = this.layer?.children && this.layer.children.length > 0;
@@ -475,7 +500,10 @@ export class ExportLayerToImageCommand extends Command {
let clippingMaskFabricObject = null;
if (this.layer?.clippingMask) {
// 重新创建遮罩对象
clippingMaskFabricObject = await restoreFabricObject(this.layer?.clippingMask, this.canvas);
clippingMaskFabricObject = await restoreFabricObject(
this.layer?.clippingMask,
this.canvas
);
clippingMaskFabricObject.clipPath = null;
clippingMaskFabricObject.set({