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-16 11:35:52 +08:00
parent e31a619bd6
commit 5f29e488ed
9 changed files with 372 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,11 +7,12 @@ import {
insertObjectAtZIndex,
removeCanvasObjectByObject,
} from "../utils/helper";
import { restoreFabricObject } from "../utils/objectHelper";
/**
* 填充组图层背景命令
*/
export class FillLayerBackgroundCommand extends Command {
export class FillGroupLayerBackgroundCommand extends Command {
constructor(options) {
super({ name: "填充组图层背景", saveState: true });
this.canvas = options.canvas;
@@ -30,54 +31,85 @@ export class FillLayerBackgroundCommand extends Command {
this.group = null;
this.originalfabricObjects = this._collectOriginalObjects(); // 记录所有的原始对象
// 计算所有对象的边界
this.originalInfo = this._getCurrentObjectsBoundingRect();
}
async execute() {
const layer = this.layer;
// 只允许填充背景层或普通图层
if (!layer.isBackground && !layer.isFixed && !layer.fabricObjects?.length) return false;
// 记录原填充色
this.oldFill = layer.fill ?? null;
this.oldFillColor = layer.oldFillColor ?? null;
// 更新fabric对象填充
// 判断是否有遮罩层 有遮罩使用遮罩层大小 否则使用第一个大小
const originalInfo =
findObjectById(this.canvas.value, layer.fabricObjects?.[0]?.id)?.object?.getBoundingRect?.(
true,
true
) ||
layer?.clippingMask ||
layer.fabricObjects?.[0];
// 构建填充对象
let clippingMaskFabricObject = null;
if (layer.clippingMask) {
clippingMaskFabricObject = await restoreFabricObject(layer.clippingMask, this.canvas);
clippingMaskFabricObject.clipPath = null;
clippingMaskFabricObject.set({ absolutePositioned: true });
this.newFill = new fabric.Rect({
width: clippingMaskFabricObject.width,
height: clippingMaskFabricObject.height,
left: clippingMaskFabricObject.left || 0,
top: clippingMaskFabricObject.top || 0,
fill: this.fillColor,
layerId: this.layerId,
id: this.oldFill?.id || generateId("fill-"),
selectable: false,
evented: false,
originX: clippingMaskFabricObject.originX || "center",
originY: clippingMaskFabricObject.originY || "center",
scaleX: clippingMaskFabricObject.scaleX || 1,
scaleY: clippingMaskFabricObject.scaleY || 1,
// type: "fill",
});
this.newFill.clipPath = clippingMaskFabricObject;
// this.newFill.dirty = true;
// this.newFill.setCoords();
} else {
const originalInfo = this.originalInfo;
if (originalInfo) {
this.newFill = new fabric.Rect({
width: originalInfo.width,
height: originalInfo.height,
left: originalInfo.left + originalInfo.width / 2 || 0,
top: originalInfo.top + originalInfo.height / 2 || 0,
fill: this.fillColor,
layerId: this.layerId,
id: this.oldFill?.id || generateId("fill-"),
selectable: false,
evented: false,
originX: "center",
originY: "center",
// type: "fill",
});
}
}
this.newFill = new fabric.Rect({
width: originalInfo.width,
height: originalInfo.height,
left: originalInfo.left || 0,
top: originalInfo.top || 0,
fill: this.fillColor,
layerId: this.layerId,
id: generateId("fill-"),
selectable: false,
evented: false,
originX: originalInfo.originX || "center",
originY: originalInfo.originY || "center",
scaleX: originalInfo.scaleX || 1,
scaleY: originalInfo.scaleY || 1,
});
// 判断fabricObjects是否是组，是组则添加填充到最前面，否则创建组
if (layer.fabricObjects && layer.fabricObjects.length > 0) {
// 如果是组，直接添加到组中
// 否则创建一个新的组 插入到原本的图层对象前面
const layerObjects = this.canvas
.getObjects()
.reverse()
.filter((obj) => obj.layerId === this.layerId);
let insertIndex =
this.canvas.getObjects()?.findIndex((obj) => obj.id === layer.fabricObjects?.[0]?.id) || 0;
insertIndex = insertIndex == -1 ? 0 : insertIndex;
// 判断fabricObjects是否是组对象
const firstObj = layer.fabricObjects?.[0];
const canvasObj = findObjectById(this.canvas, firstObj?.id)?.object;
if ((canvasObj && canvasObj.type === "group") || canvasObj._objects?.length > 0) {
this.newFill.set({
left: 0,
top: 0,
});
// 将新填充对象添加到组的最前面
// canvasObj._objects.unshift(this.newFill);
canvasObj.insertAt(this.newFill, 0, false);
// canvasObj.addWithUpdate();
canvasObj.setCoords();
canvasObj.setObjectsCoords();
// canvasObj.dirty = true; // 标记为脏对象
// this.canvas.renderAll();
// this.group = canvasObj;
} else if (layer.fabricObjects && layer.fabricObjects.length > 0) {
// 普通对象，组成新组
const layerObjects = this.canvas.getObjects().filter((obj) => obj.layerId === this.layerId);
let insertIndex = this.canvas.getObjects()?.findIndex((obj) => obj.id === firstObj?.id) ?? 0;
insertIndex = insertIndex === -1 ? 0 : insertIndex;
this.group = new fabric.Group([this.newFill, ...layerObjects]);
this.group.set({
@@ -85,29 +117,47 @@ export class FillLayerBackgroundCommand extends Command {
layerId: layerObjects[0]?.layerId,
});
this.group.setCoords();
layer.fabricObjects = [this.group?.toObject?.(["id", "layerId"]) || this.group];
removeCanvasObjectByObject(this.canvas, layer.fabricObjects[0]);
insertObjectAtZIndex(this.canvas, this.group, insertIndex, false); // 插入到画布的指定位置
// 将新填充对象添加到画布
removeCanvasObjectByObject(this.canvas, layerObjects[0]);
insertObjectAtZIndex(this.canvas, this.group, insertIndex, false);
}
// layer.fabricObjects = [this.group?.toObject?.(["id", "layerId"]) || this.group];
this.canvas.renderAll();
layer.fill = this.newFill.toObject(["id", "layerId"]);
layer.fill = null; // this.newFill.toObject(["id", "layerId"]);
layer.fillColor = this.fillColor;
this.canvasManager.thumbnailManager?.generateLayerThumbnail(this.layer.id);
return true;
}
async undo() {
this.layer.fillColor = this.oldFillColor;
this.layer.fill = this.oldFill;
this.group.removeWithUpdate(this.newFill);
this.canvas.remove(this.newFill);
this.canvas.renderAll();
// 判断fabricObjects是否是组对象
const firstObj = this.layer.fabricObjects?.[0];
const canvasObj = this.group || findObjectById(this.canvas, firstObj?.id)?.object;
if ((canvasObj && canvasObj.type === "group") || canvasObj?._objects?.length > 0) {
// 移除新添加的填充对象
if (canvasObj._objects?.[0] === this.newFill) {
canvasObj._objects.shift();
canvasObj.addWithUpdate();
canvasObj.setCoords();
canvasObj.dirty = true;
}
this.canvas.renderAll();
} else if (this.group) {
// 如果是新建的group，需要拆分还原
// 先移除新建的group
this.canvas.remove(this.group);
// 重新添加原始对象
this.originalfabricObjects.forEach((obj) => {
if (!this.canvas.getObjects().includes(obj)) {
this.canvas.add(obj);
}
});
this.canvas.renderAll();
this.group = null;
}
this.canvasManager.thumbnailManager?.generateLayerThumbnail(this.layer.id);
return true;
@@ -131,4 +181,30 @@ export class FillLayerBackgroundCommand extends Command {
return [];
}
}
// 获取当前所有对象的边界信息
_getCurrentObjectsBoundingRect() {
// this.originalfabricObjects = this._collectOriginalObjects();
let minLeft = Infinity,
minTop = Infinity,
maxRight = -Infinity,
maxBottom = -Infinity;
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 });
minLeft = Math.min(minLeft, rect.left);
minTop = Math.min(minTop, rect.top);
maxRight = Math.max(maxRight, rect.left + rect.width);
maxBottom = Math.max(maxBottom, rect.top + rect.height);
}
});
if (minLeft === Infinity || minTop === Infinity) return null;
return {
left: minLeft,
top: minTop,
width: maxRight - minLeft,
height: maxBottom - minTop,
};
}
}

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

@@ -20,6 +20,7 @@ export class FillLayerBackgroundCommand extends Command {
this.canvasManager = options.canvasManager;
this.layerId = options.layerId;
this.fillColor = options.fillColor;
this.isRetimeUpdate = options.isRetimeUpdate; // 是否实时更新
this.oldFill = null;
this.oldFillColor = null;
this.newFill = null;
@@ -33,6 +34,8 @@ export class FillLayerBackgroundCommand extends Command {
this.isGroupLayer = layer.isGroup || !!layer.children?.length || false; // 是否为组图层
this.originalfabricObjects = this._collectOriginalObjects(); // 记录所有的原始对象
// 计算所有对象的边界
this.originalInfo = this._getCurrentObjectsBoundingRect();
}
async execute() {
@@ -45,31 +48,11 @@ export class FillLayerBackgroundCommand extends Command {
this.oldFillColor = layer.oldFillColor ?? null;
// 更新fabric对象填充
// 判断是否有遮罩层 有遮罩使用遮罩层大小 否则使用第一个大小
const { object } = findObjectById(this.canvas, layer.fabricObjects?.[0]?.id);
if (object) {
const originalInfo = object?.getBoundingRect?.(true, true);
this.newFill = new fabric.Rect({
width: originalInfo.width,
height: originalInfo.height,
left: originalInfo.left || 0,
top: originalInfo.top || 0,
fill: this.fillColor,
layerId: this.layerId,
id: generateId("fill-"),
selectable: false,
evented: false,
originX: object.originX || "center",
originY: object.originY || "center",
scaleX: object.scaleX || 1,
scaleY: object.scaleY || 1,
});
}
// 1.如果图层有遮罩则用遮罩 2.如果没有遮罩则汇总当前fabricObjects下的所有对象的边界
let clippingMaskFabricObject = null;
if (layer.clippingMask) {
// 反序列化 clippingMask
const clippingMaskFabricObject = await restoreFabricObject(layer.clippingMask, this.canvas);
clippingMaskFabricObject = await restoreFabricObject(layer.clippingMask, this.canvas);
clippingMaskFabricObject.clipPath = null;
clippingMaskFabricObject.set({
@@ -85,40 +68,51 @@ export class FillLayerBackgroundCommand extends Command {
top: clippingMaskFabricObject.top || 0,
fill: this.fillColor,
layerId: this.layerId,
id: generateId("fill-"),
id: this.oldFill?.id || generateId("fill-"),
selectable: false,
evented: false,
originX: clippingMaskFabricObject.originX || "center",
originY: clippingMaskFabricObject.originY || "center",
scaleX: clippingMaskFabricObject.scaleX || 1,
scaleY: clippingMaskFabricObject.scaleY || 1,
type: "fill",
});
this.newFill.clipPath = clippingMaskFabricObject; // 设置填充的遮罩
this.newFill.dirty = true; // 标记为脏，以便重新渲染
this.newFill.setCoords();
} else {
const originalInfo = this.originalInfo;
if (originalInfo) {
this.newFill = new fabric.Rect({
width: originalInfo.width,
height: originalInfo.height,
left: originalInfo.left + originalInfo.width / 2 || 0,
top: originalInfo.top + originalInfo.height / 2 || 0,
fill: this.fillColor,
layerId: this.layerId,
id: this.oldFill?.id || generateId("fill-"),
selectable: false,
evented: false,
originX: "center",
originY: "center",
type: "fill",
});
}
}
// 判断fabricObjects是否是组，是组则添加填充到最前面，否则创建组
if (layer.fabricObjects && layer.fabricObjects.length > 0) {
// 如果是组，直接添加到组中
// 否则创建一个新的组 插入到原本的图层对象前面
// const layerObjects = this.canvas
// .getObjects()
// .reverse()
// .filter((obj) => obj.layerId === this.layerId);
let insertIndex =
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;
removeCanvasObjectByObject(this.canvas, this.oldFill);
}
insertIndex = insertIndex == -1 ? 0 : insertIndex;
// this.group = new fabric.Group([this.newFill, ...layerObjects]);
// this.group.set({
// id: layerObjects[0]?.id || generateId("group-"),
// layerId: layerObjects[0]?.layerId,
// });
// this.group.setCoords();
layer.fabricObjects = [this.newFill?.toObject?.(["id", "layerId"]) || this.newFill];
// removeCanvasObjectByObject(this.canvas, layer.fabricObjects[0]);
// layer.fabricObjects = [this.newFill?.toObject?.(["id", "layerId"]) || this.newFill];
insertObjectAtZIndex(this.canvas, this.newFill, insertIndex, false); // 插入到画布的指定位置
// 将新填充对象添加到画布
} else if (layer.children && layer.children.length > 0) {
@@ -130,6 +124,13 @@ export class FillLayerBackgroundCommand extends Command {
(obj) =>
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;
removeCanvasObjectByObject(this.canvas, this.oldFill);
}
insertIndex = insertIndex == -1 ? 0 : insertIndex;
insertObjectAtZIndex(this.canvas, this.newFill, insertIndex, false); // 插入到画布的指定位置
@@ -137,25 +138,43 @@ export class FillLayerBackgroundCommand extends Command {
this.canvas.renderAll();
layer.fill = this.newFill.toObject(["id", "layerId"]);
layer.fillColor = this.fillColor;
// 实时更新的时候不生成缩略图
if (!this.isRetimeUpdate) {
layer.fill = this.newFill.toObject(["id", "layerId"]);
layer.fillColor = this.fillColor;
this.canvasManager.thumbnailManager?.generateLayerThumbnail(this.layer.id);
// 重新排序
// 使用LayerSort工具重新排列画布对象（如果可用）
await this?.canvasManager?.layerManager?.layerSort?.rearrangeObjects?.();
this.canvasManager.thumbnailManager?.generateLayerThumbnail(this.layer.id);
// 重新排序
// 使用LayerSort工具重新排列画布对象（如果可用）
// await this?.canvasManager?.layerManager?.layerSort?.rearrangeObjects?.();
}
return true;
}
async undo() {
this.layer.fillColor = this.oldFillColor;
this.layer.fill = this.oldFill;
this.group.removeWithUpdate(this.newFill);
this.canvas.remove(this.newFill);
// this.group.removeWithUpdate(this.newFill);
// this.canvas.remove(this.newFill);
if (this.oldFill) {
// 如果有旧填充，恢复旧填充
const { object } = findObjectById(this.canvas, this.oldFill.id);
if (object) {
this.newFill.set({
fill: this.oldFill.fill,
left: this.oldFill.left,
top: this.oldFill.top,
width: this.oldFill.width,
height: this.oldFill.height,
});
this.newFill.setCoords();
}
} else {
// 如果没有旧填充，移除新填充
removeCanvasObjectByObject(this.canvas, this.layer.fill);
}
this.canvas.renderAll();
this.layer.fillColor = this.oldFillColor;
this.layer.fill = this.oldFill;
this.canvasManager.thumbnailManager?.generateLayerThumbnail(this.layer.id);
return true;
}
@@ -178,4 +197,30 @@ export class FillLayerBackgroundCommand extends Command {
return [];
}
}
// 获取当前所有对象的边界信息
_getCurrentObjectsBoundingRect() {
// this.originalfabricObjects = this._collectOriginalObjects();
let minLeft = Infinity,
minTop = Infinity,
maxRight = -Infinity,
maxBottom = -Infinity;
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 });
minLeft = Math.min(minLeft, rect.left);
minTop = Math.min(minTop, rect.top);
maxRight = Math.max(maxRight, rect.left + rect.width);
maxBottom = Math.max(maxBottom, rect.top + rect.height);
}
});
if (minLeft === Infinity || minTop === Infinity) return null;
return {
left: minLeft,
top: minTop,
width: maxRight - minLeft,
height: maxBottom - minTop,
};
}
}

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

@@ -228,18 +228,18 @@ export class RasterizeLayerCommand extends Command {
const objectsWithZIndex = [];
this.layersToRasterize.forEach((layer) => {
if (layer.fill) {
const { object } = findObjectById(this.canvas, layer.fill.id);
if (object) {
// 获取对象在画布中的z-index（数组索引）
const zIndex = allCanvasObjects.indexOf(object);
objectsWithZIndex.push({
object: object,
zIndex: zIndex,
layerObj: layer.fill,
});
}
}
// if (layer.fill) {
// const { object } = findObjectById(this.canvas, layer.fill.id);
// if (object) {
// // 获取对象在画布中的z-index（数组索引）
// const zIndex = allCanvasObjects.indexOf(object);
// objectsWithZIndex.push({
// object: object,
// zIndex: zIndex,
// layerObj: layer.fill,
// });
// }
// }
if (layer.fabricObjects && layer.fabricObjects.length > 0) {
layer.fabricObjects.forEach((layerObj) => {
if (layerObj && layerObj.id) {
@@ -532,18 +532,18 @@ export class ExportLayerToImageCommand extends Command {
const objectsWithZIndex = [];
this.layersToRasterize.forEach((layer) => {
if (layer.fill) {
const { object } = findObjectById(this.canvas, layer.fill.id);
if (object) {
// 获取对象在画布中的z-index（数组索引）
const zIndex = allCanvasObjects.indexOf(object);
objectsWithZIndex.push({
object: object,
zIndex: zIndex,
layerObj: layer.fill,
});
}
}
// if (layer.fill) {
// const { object } = findObjectById(this.canvas, layer.fill.id);
// if (object) {
// // 获取对象在画布中的z-index（数组索引）
// const zIndex = allCanvasObjects.indexOf(object);
// objectsWithZIndex.push({
// object: object,
// zIndex: zIndex,
// layerObj: layer.fill,
// });
// }
// }
if (layer.fabricObjects && layer.fabricObjects.length > 0) {
layer.fabricObjects.forEach((layerObj) => {
if (layerObj && layerObj.id) {

72
src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { computed, ref, nextTick, inject } from "vue";
import { computed, ref, nextTick, inject, watch } from "vue";
import { findLayerRecursively, isGroupLayer } from "../../utils/layerHelper";
import ContextMenu from "./ContextMenu.vue";
import LayerItem from "./LayerItem.vue";
@@ -13,6 +13,7 @@ import { createCrossLevelMoveCommand } from "../../commands/CrossLevelMoveComman
// UngroupLayersCommand,
// } from "../../commands/LayerCommands";
import { findObjectById, generateId } from "../../utils/helper";
import { throttle } from "lodash-es";
const props = defineProps({
// layers: Array,
@@ -70,6 +71,7 @@ const contextMenuLayer = ref(null);
const contextMenuItems = ref([]);
// 颜色填充相关
const currLayerId = ref(null); // 当前图层ID
const fillColor = ref("#ffffff"); // 默认填充颜色
const fillColorRef = ref(null);
@@ -652,22 +654,28 @@ function buildContextMenuItems(layer) {
{
label: "填充图层",
icon: "CThemeColor",
disabled: layer.isBackground || layer.isFixed || !layerManager?.canRasterizeLayer?.(layer.id),
disabled:
layer.isBackground ||
layer.isFixed ||
!layerManager?.canRasterizeLayer?.(layer.id) ||
layer.isGroup ||
layer?.children?.length > 0, // 如果是组图层或有子图层则禁用
action: () => {
// 调用浏览器原生颜色选择器
fillColorRef.value.click();
// 监听颜色选择器的变化
fillColorRef.value.addEventListener("change", () => {
const selectedColor = fillColor.value;
layerManager
.fillLayerBackground(layer.id, selectedColor)
.then(() => {
console.log(`✅ 已填充图层 ${layer.name} 背景颜色: ${selectedColor}`);
})
.catch((error) => {
console.error(`❌ 填充图层 ${layer.name} 背景颜色失败:`, error);
});
});
currLayerId.value = layer.id;
// // 监听颜色选择器的变化
// fillColorRef.value.addEventListener("change", () => {
// const selectedColor = fillColor.value;
// layerManager
// .fillLayerBackground(layer.id, selectedColor)
// .then(() => {
// console.log(`✅ 已填充图层 ${layer.name} 背景颜色: ${selectedColor}`);
// })
// .catch((error) => {
// console.error(`❌ 填充图层 ${layer.name} 背景颜色失败:`, error);
// });
// });
// 隐藏右键菜单
hideContextMenu();
},
@@ -790,6 +798,11 @@ function buildContextMenuItems(layer) {
].filter((item) => item !== null);
}
// 填充颜色选择器
function fillColorChange() {
layerManager.fillLayerBackground(currLayerId.value, fillColor.value, true);
}
// 右键菜单操作方法
function copySelectedLayers() {
const selectedLayers = getSelectedLayers();
@@ -806,6 +819,25 @@ function copySelectedLayers() {
hideContextMenu();
}
// watch(fillColor, (newColor) => {
// // 使用loadash-es 节流函数
// // 使用throttle节流 控制更新评率
// if (currLayerId.value) {
// throttle(() => {
// if (layerManager && layerManager.fillLayerBackground) {
// layerManager
// .fillLayerBackground(currLayerId.value, newColor, false)
// .then(() => {
// console.log(`✅ 已填充图层 ${currLayerId.value} 背景颜色: ${newColor}`);
// })
// .catch((error) => {
// console.error(`❌ 填充图层 ${currLayerId.value} 背景颜色失败:`, error);
// });
// }
// }, 300)(); // 每300毫秒执行一次
// }
// });
function toggleSelectedLayersLock() {
const selectedLayers = getSelectedLayers();
if (selectedLayers.length === 0) return;
@@ -1477,6 +1509,15 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
<template>
<div class="layers-panel-inner" @click="handlePanelClick">
<div class="layers-header">
<!-- 颜色填充选择组件 -->
<input
class="fillColor-input"
v-model="fillColor"
ref="fillColorRef"
type="color"
@change="fillColorChange"
style="width: 0; height: 0; opacity: 0"
/>
<h3>
{{ $t("图层") }}
{{ selectedLayerIds.length > 0 ? `(${selectedLayerIds.length})` : "" }}
@@ -1619,9 +1660,6 @@ async function moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex
:items="contextMenuItems"
@close="hideContextMenu"
/>
<!-- 颜色填充选择组件 -->
<input v-model="fillColor" ref="fillColorRef" type="color" style="display: none" />
</div>
</template>

11
src/component/Canvas/CanvasEditor/managers/BackgroundFillManager.js
View File

@@ -1,3 +1,4 @@
import { FillGroupLayerBackgroundCommand } from "../commands/FillGroupLayerBackgroundCommand";
import { FillLayerBackgroundCommand } from "../commands/FillLayerBackgroundCommand";
export class BackgroundFillManager {
@@ -12,15 +13,21 @@ export class BackgroundFillManager {
* 填充指定图层背景
* @param {string} layerId 图层ID
* @param {string} fillColor 填充颜色
* @param {boolean} undoable 是否可撤销
* @returns {Promise<void>}
*/
async fillLayerBackground(layerId, fillColor) {
const command = new FillLayerBackgroundCommand({
async fillLayerBackground(layerId, fillColor, undoable) {
const command = new FillGroupLayerBackgroundCommand({
canvas: this.canvas,
layers: this.layers,
layerId,
fillColor,
canvasManager: this.canvasManager,
// 是否实时更新
isRetimeUpdate: !undoable,
});
command.undoable = undoable;
if (this.commandManager) {
await this.commandManager.execute(command);
} else {

67
src/component/Canvas/CanvasEditor/managers/LayerManager.js
View File

@@ -340,14 +340,14 @@ export class LayerManager {
}
// 如果是组图层 则给所有子对象设置裁剪对象
if (layer.type === LayerType.GROUP || layer.children?.length > 0) {
if (layer.fill) {
const fabricObject = this.canvas.getObjects().find((o) => o.id === layer.fill.id);
if (fabricObject) {
fabricObject.clipPath = clippingMaskFabricObject;
fabricObject.dirty = true; // 标记为脏对象
fabricObject.setCoords();
}
}
// if (layer.fill) {
// const fabricObject = this.canvas.getObjects().find((o) => o.id === layer.fill.id);
// if (fabricObject) {
// fabricObject.clipPath = clippingMaskFabricObject;
// fabricObject.dirty = true; // 标记为脏对象
// fabricObject.setCoords();
// }
// }
layer.children.forEach((childLayer) => {
const childObj = this.canvas.getObjects().find((o) => o.layerId === childLayer.id);
if (childObj) {
@@ -356,14 +356,14 @@ export class LayerManager {
childObj.setCoords();
}
if (childLayer.fill) {
const fabricObject = this.canvas.getObjects().find((o) => o.id === childLayer.fill.id);
if (fabricObject) {
fabricObject.clipPath = clippingMaskFabricObject;
fabricObject.dirty = true; // 标记为脏对象
fabricObject.setCoords();
}
}
// if (childLayer.fill) {
// const fabricObject = this.canvas.getObjects().find((o) => o.id === childLayer.fill.id);
// if (fabricObject) {
// fabricObject.clipPath = clippingMaskFabricObject;
// fabricObject.dirty = true; // 标记为脏对象
// fabricObject.setCoords();
// }
// }
});
} else {
layer.fabricObjects?.forEach((obj) => {
@@ -375,14 +375,14 @@ export class LayerManager {
}
});
if (layer.fill) {
const fabricObject = this.canvas.getObjects().find((o) => o.id === layer.fill.id);
if (fabricObject) {
fabricObject.clipPath = clippingMaskFabricObject;
fabricObject.dirty = true; // 标记为脏对象
fabricObject.setCoords();
}
}
// if (layer.fill) {
// const fabricObject = this.canvas.getObjects().find((o) => o.id === layer.fill.id);
// if (fabricObject) {
// fabricObject.clipPath = clippingMaskFabricObject;
// fabricObject.dirty = true; // 标记为脏对象
// fabricObject.setCoords();
// }
// }
}
});
}
@@ -391,9 +391,10 @@ export class LayerManager {
* 填充图层背景
* @param {string} layerId 图层ID
* @param {string} fillColor 填充颜色
* @param {boolean} undoable 是否可撤销
*/
async fillLayerBackground(layerId, fillColor) {
await this.backgroundFillManager.fillLayerBackground(layerId, fillColor);
async fillLayerBackground(layerId, fillColor, undoable = true) {
await this.backgroundFillManager.fillLayerBackground(layerId, fillColor, undoable);
}
/**
@@ -963,13 +964,13 @@ export class LayerManager {
return acc;
}, []);
if (layer.fill) {
// 如果图层有填充颜色，设置所有对象的填充颜色
const { object } = findObjectById(this.canvas, layer.fill.id);
if (object) {
allObjects.push(object);
}
}
// if (layer.fill) {
// // 如果图层有填充颜色，设置所有对象的填充颜色
// const { object } = findObjectById(this.canvas, layer.fill.id);
// if (object) {
// allObjects.push(object);
// }
// }
if (allObjects.length) {
// 切换到选择模式

24
src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js
View File

@@ -143,18 +143,18 @@ export class ThumbnailManager {
const objectsWithZIndex = [];
layersToRasterize.forEach((layer) => {
if (layer.fill) {
const { object } = findObjectById(this.canvas, layer.fill.id);
if (object) {
// 获取对象在画布中的z-index（数组索引）
const zIndex = allCanvasObjects.indexOf(object);
objectsWithZIndex.push({
object: object,
zIndex: zIndex,
layerObj: layer.fill,
});
}
}
// if (layer.fill) {
// const { object } = findObjectById(this.canvas, layer.fill.id);
// if (object) {
// // 获取对象在画布中的z-index（数组索引）
// const zIndex = allCanvasObjects.indexOf(object);
// objectsWithZIndex.push({
// object: object,
// zIndex: zIndex,
// layerObj: layer.fill,
// });
// }
// }
if (layer.fabricObject) {
// 如果图层本身有fabricObject，直接添加

8
src/component/Canvas/CanvasEditor/utils/LayerSort.js
View File

@@ -96,10 +96,10 @@ export class LayerSort {
* @returns {number} 更新后的z-index
*/
processLayerObjects(layer, currentZIndex, zIndexMap) {
if (layer.fill) {
// 如果图层有填充，则填充在最底层
zIndexMap.set(layer.fill.id, currentZIndex++);
}
// if (layer.fill) {
// // 如果图层有填充，则填充在最底层
// zIndexMap.set(layer.fill.id, currentZIndex++);
// }
// 检查是否有子图层（组图层）
if (layer.children?.length > 0) {
// 处理每个子图层

18
src/component/Canvas/CanvasEditor/utils/rasterizedImage.js
View File

@@ -391,13 +391,17 @@ const createRasterizedImageWithMask = async ({
*/
const cloneObjectAsync = (obj) => {
return new Promise((resolve, reject) => {
obj.clone((cloned) => {
if (cloned) {
resolve(cloned);
} else {
reject(new Error("对象克隆失败"));
}
});
try {
obj?.clone?.((cloned) => {
if (cloned) {
resolve(cloned);
} else {
reject(new Error("对象克隆失败"));
}
}, {});
} catch (error) {
reject(new Error(`克隆对象时发生错误: ${error.message}`));
}
});
};