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-08 01:08:45 +08:00
parent 0615ab31f9
commit 5cc93aeba4
7 changed files with 1751 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

767
src/component/Canvas/CanvasEditor/commands/CrossLevelMoveCommands.js Normal file
View File

@@ -0,0 +1,767 @@
import { Command } from "./Command";
import { isGroupLayer } from "../utils/layerHelper";
/**
* 跨层级移动命令基类
*/
export class CrossLevelMoveCommand extends Command {
constructor(options) {
super({
name: "跨层级移动",
undoable: true,
});
this.layers = options.layers;
this.layerManager = options.layerManager;
this.canvas = options.canvas;
// 移动相关参数
this.layerId = options.layerId;
this.fromContainerType = options.fromContainerType; // 'root' | 'child'
this.toContainerType = options.toContainerType; // 'root' | 'child'
this.fromParentId = options.fromParentId;
this.toParentId = options.toParentId;
this.newIndex = options.newIndex;
this.oldIndex = options.oldIndex;
// 保存状态用于撤销
this.beforeState = null;
this.afterState = null;
}
/**
* 保存移动前的状态
*/
saveBeforeState() {
this.beforeState = {
layerStructure: this.cloneLayerStructure(),
fabricObjects: this.saveFabricObjectStates(),
};
}
/**
* 保存移动后的状态
*/
saveAfterState() {
this.afterState = {
layerStructure: this.cloneLayerStructure(),
fabricObjects: this.saveFabricObjectStates(),
};
}
/**
* 克隆图层结构
*/
cloneLayerStructure() {
return JSON.parse(
JSON.stringify(
this.layers.value.map((layer) => ({
id: layer.id,
name: layer.name,
parentId: layer.parentId,
children: layer.children
? layer.children.map((child) => ({
id: child.id,
name: child.name,
parentId: child.parentId,
}))
: [],
isBackground: layer.isBackground,
isFixed: layer.isFixed,
visible: layer.visible,
locked: layer.locked,
}))
)
);
}
/**
* 保存fabric对象状态
*/
saveFabricObjectStates() {
const states = {};
// 只保存fabric对象的容器关系，不保存具体的属性
this.layers.value.forEach((layer) => {
if (layer.fabricObject) {
states[layer.id] = {
isInCanvas: this.canvas
? this.canvas.contains(layer.fabricObject)
: false,
parentGroupId: null,
visible: layer.fabricObject.visible,
};
// 检查是否在某个组中
this.layers.value.forEach((otherLayer) => {
if (
otherLayer.fabricObject &&
otherLayer.fabricObject.type === "group" &&
otherLayer.fabricObject.contains &&
otherLayer.fabricObject.contains(layer.fabricObject)
) {
states[layer.id].parentGroupId = otherLayer.id;
states[layer.id].isInCanvas = false;
}
});
}
});
return states;
}
/**
* 查找图层
*/
findLayer(layerId, containerType, parentId) {
if (containerType === "root") {
return this.layers.value.find((layer) => layer.id === layerId);
} else if (containerType === "child" && parentId) {
const parent = this.layers.value.find((layer) => layer.id === parentId);
return parent?.children?.find((child) => child.id === layerId);
}
return null;
}
/**
* 验证移动的有效性
*/
validateMove() {
const layer = this.findLayer(
this.layerId,
this.fromContainerType,
this.fromParentId
);
if (!layer) {
throw new Error(`找不到要移动的图层: ${this.layerId}`);
}
// 检查是否为不可移动的图层
if (layer.isBackground || layer.isFixed) {
throw new Error("背景层和固定层不能移动");
}
// 检查是否试图将图层移动到自己的子层级中（防止循环引用）
if (
this.toContainerType === "child" &&
this.toParentId &&
this.isDescendantOf(this.toParentId, this.layerId)
) {
throw new Error("不能将图层移动到自己的子层级中");
}
// 检查目标父图层是否为组
if (this.toContainerType === "child") {
const targetParent = this.layers.value.find(
(layer) => layer.id === this.toParentId
);
if (!targetParent || !isGroupLayer(targetParent)) {
throw new Error("目标图层不是组图层");
}
}
return layer;
}
/**
* 检查是否为子层级关系（防止循环引用）
*/
isDescendantOf(ancestorId, layerId) {
const checkChildren = (children) => {
if (!children) return false;
for (const child of children) {
if (child.id === layerId) return true;
if (child.children && checkChildren(child.children)) return true;
}
return false;
};
const ancestor = this.layers.value.find((layer) => layer.id === ancestorId);
return ancestor ? checkChildren(ancestor.children) : false;
}
execute() {
console.log("🎯 执行跨层级移动命令:", {
layerId: this.layerId,
from: this.fromContainerType,
to: this.toContainerType,
fromParentId: this.fromParentId,
toParentId: this.toParentId,
});
// 验证移动
const draggedLayer = this.validateMove();
// 保存移动前状态
this.saveBeforeState();
try {
// 根据移动类型执行对应操作
if (
this.fromContainerType === "root" &&
this.toContainerType === "child"
) {
this.moveRootToGroup(draggedLayer);
} else if (
this.fromContainerType === "child" &&
this.toContainerType === "root"
) {
this.moveGroupToRoot(draggedLayer);
} else if (
this.fromContainerType === "child" &&
this.toContainerType === "child" &&
this.fromParentId !== this.toParentId
) {
this.moveGroupToGroup(draggedLayer);
}
// 保存移动后状态
this.saveAfterState();
// 刷新画布
if (this.canvas) {
this.canvas.renderAll();
console.log("🎨 画布已刷新");
}
console.log("✅ 跨层级移动命令执行成功");
return true;
} catch (error) {
console.error("❌ 跨层级移动命令执行失败:", error);
// 如果执行失败，尝试恢复到之前的状态
if (this.beforeState) {
try {
this.restoreLayerStructure(this.beforeState.layerStructure);
this.restoreFabricObjectStates(this.beforeState.fabricObjects);
if (this.canvas) {
this.canvas.renderAll();
}
console.log("🔄 已恢复到移动前状态");
} catch (restoreError) {
console.error("❌ 恢复状态失败:", restoreError);
}
}
throw error;
}
}
undo() {
if (!this.beforeState) {
throw new Error("没有保存的前置状态，无法撤销");
}
console.log("🔄 撤销跨层级移动命令");
try {
// 恢复图层结构
this.restoreLayerStructure(this.beforeState.layerStructure);
// 恢复fabric对象状态
this.restoreFabricObjectStates(this.beforeState.fabricObjects);
// 刷新画布
if (this.canvas) {
// 使用 requestAnimationFrame 确保DOM更新完成后再渲染
requestAnimationFrame(() => {
this.canvas.renderAll();
});
}
console.log("✅ 跨层级移动命令撤销成功");
return true;
} catch (error) {
console.error("❌ 跨层级移动命令撤销失败:", error);
// 尝试基本的恢复操作
try {
console.log("🔄 尝试基本恢复操作");
this.basicRestore();
} catch (restoreError) {
console.error("❌ 基本恢复也失败:", restoreError);
}
throw error;
}
}
/**
* 基本恢复操作（当标准撤销失败时使用）
*/
basicRestore() {
// 重新组织所有图层的fabric对象
this.layers.value.forEach((layer) => {
if (layer.fabricObject) {
try {
// 先从所有容器中移除
this.removeFromAllContainers(layer.fabricObject);
// 根据图层的parentId重新放置
if (layer.parentId) {
const parentLayer = this.layers.value.find(
(l) => l.id === layer.parentId
);
if (
parentLayer &&
parentLayer.fabricObject &&
parentLayer.fabricObject.type === "group"
) {
this.safeAddToContainer(
layer.fabricObject,
parentLayer.fabricObject,
`父组${layer.parentId}`
);
}
} else {
this.safeAddToContainer(layer.fabricObject, this.canvas, "画布");
}
} catch (error) {
console.error(`❌ 基本恢复图层 ${layer.id} 失败:`, error);
}
}
});
if (this.canvas) {
this.canvas.renderAll();
}
}
/**
* 重做命令
*/
redo() {
if (!this.afterState) {
throw new Error("没有保存的后置状态，无法重做");
}
console.log("🔄 重做跨层级移动命令");
try {
// 恢复图层结构
this.restoreLayerStructure(this.afterState.layerStructure);
// 恢复fabric对象状态
this.restoreFabricObjectStates(this.afterState.fabricObjects);
// 刷新画布
if (this.canvas) {
// 使用 requestAnimationFrame 确保DOM更新完成后再渲染
requestAnimationFrame(() => {
this.canvas.renderAll();
});
}
console.log("✅ 跨层级移动命令重做成功");
return true;
} catch (error) {
console.error("❌ 跨层级移动命令重做失败:", error);
// 尝试基本的恢复操作
try {
console.log("🔄 尝试基本恢复操作");
this.basicRestore();
} catch (restoreError) {
console.error("❌ 基本恢复也失败:", restoreError);
}
throw error;
}
}
/**
* 恢复图层结构
*/
restoreLayerStructure(layerStructure) {
// 保存原始图层数组的引用
const originalLayers = [...this.layers.value];
// 清空当前图层
this.layers.value.splice(0);
// 重建图层结构
layerStructure.forEach((layerData) => {
// 首先从原始图层数组中查找图层
let layer = originalLayers.find((l) => l.id === layerData.id);
// 如果没找到，尝试在嵌套结构中查找
if (!layer) {
layer = this.findLayerInOriginalStructure(layerData.id, originalLayers);
}
if (layer) {
// 更新图层属性
layer.parentId = layerData.parentId;
layer.visible = layerData.visible;
layer.locked = layerData.locked;
// 重建children数组
if (layerData.children && layerData.children.length > 0) {
layer.children = layerData.children
.map((childData) => {
// 从原始图层数组中查找子图层
let childLayer = originalLayers.find(
(l) => l.id === childData.id
);
if (!childLayer) {
childLayer = this.findLayerInOriginalStructure(
childData.id,
originalLayers
);
}
if (childLayer) {
// 更新子图层属性
childLayer.parentId = childData.parentId;
childLayer.visible = childData.visible;
childLayer.locked = childData.locked;
return childLayer;
}
return null;
})
.filter(Boolean);
} else {
layer.children = [];
}
this.layers.value.push(layer);
}
});
}
/**
* 在原始结构中查找图层
*/
findLayerInOriginalStructure(layerId, layers = null) {
const layersToSearch = layers || this.layers.value;
const findInLayers = (layersList) => {
for (const layer of layersList) {
if (layer.id === layerId) return layer;
if (layer.children) {
const found = findInLayers(layer.children);
if (found) return found;
}
}
return null;
};
return findInLayers(layersToSearch);
}
/**
* 恢复fabric对象状态
*/
restoreFabricObjectStates(fabricStates) {
if (!this.canvas || !fabricStates) return;
console.log("🔧 开始恢复fabric对象状态");
// 重新组织fabric对象的层级关系
this.layers.value.forEach((layer) => {
if (layer.fabricObject && fabricStates[layer.id]) {
const targetState = fabricStates[layer.id];
console.log(`🔍 恢复图层 ${layer.id} 的fabric对象状态:`, targetState);
try {
// 首先从所有容器中移除对象
this.removeFromAllContainers(layer.fabricObject);
// 根据目标状态放置对象
if (targetState.parentGroupId) {
// 应该在特定组中
const parentLayer = this.layers.value.find(
(l) => l.id === targetState.parentGroupId
);
if (
parentLayer &&
parentLayer.fabricObject &&
parentLayer.fabricObject.type === "group"
) {
this.safeAddToContainer(
layer.fabricObject,
parentLayer.fabricObject,
`父组${targetState.parentGroupId}`
);
}
} else if (targetState.isInCanvas) {
// 应该在画布中
this.safeAddToContainer(layer.fabricObject, this.canvas, "画布");
}
// 恢复可见性
if (layer.fabricObject.visible !== targetState.visible) {
layer.fabricObject.visible = targetState.visible;
}
} catch (error) {
console.error(`❌ 恢复图层 ${layer.id} 的fabric对象时出错:`, error);
}
}
});
// 强制重新渲染画布
if (this.canvas) {
this.canvas.renderAll();
console.log("✅ 画布已重新渲染");
}
}
/**
* 安全地处理fabric对象操作
*/
safeFabricOperation(operation, operationName = "fabric操作") {
try {
return operation();
} catch (error) {
console.error(`❌ ${operationName}失败:`, error);
return false;
}
}
/**
* 安全地添加fabric对象到容器
*/
safeAddToContainer(fabricObject, container, containerName) {
return this.safeFabricOperation(() => {
if (container && container.add && !container.contains(fabricObject)) {
container.add(fabricObject);
console.log(`✅ 成功将对象添加到${containerName}`);
return true;
}
return false;
}, `添加对象到${containerName}`);
}
/**
* 安全地从容器移除fabric对象
*/
safeRemoveFromContainer(fabricObject, container, containerName) {
return this.safeFabricOperation(() => {
if (
container &&
container.remove &&
container.contains &&
container.contains(fabricObject)
) {
container.remove(fabricObject);
console.log(`✅ 成功从${containerName}移除对象`);
return true;
}
return false;
}, `从${containerName}移除对象`);
}
/**
* 从所有容器中移除fabric对象
*/
removeFromAllContainers(fabricObject) {
// 从画布中移除
this.safeRemoveFromContainer(fabricObject, this.canvas, "画布");
// 从所有组中移除
this.layers.value.forEach((layer) => {
if (layer.fabricObject && layer.fabricObject.type === "group") {
this.safeRemoveFromContainer(
fabricObject,
layer.fabricObject,
`组${layer.id}`
);
}
});
}
/**
* 从顶级图层移动到组图层内
*/
moveRootToGroup(draggedLayer) {
console.log("📥 执行顶级图层移动到组内:", {
layerId: draggedLayer.id,
toParentId: this.toParentId,
newIndex: this.newIndex,
});
const targetParent = this.layers.value.find(
(layer) => layer.id === this.toParentId
);
if (!targetParent) {
throw new Error(`找不到目标父图层: ${this.toParentId}`);
}
// 确保父图层有children数组
if (!targetParent.children) {
targetParent.children = [];
}
// 从顶级图层数组中移除
const rootIndex = this.layers.value.findIndex(
(layer) => layer.id === draggedLayer.id
);
if (rootIndex !== -1) {
this.layers.value.splice(rootIndex, 1);
console.log(`🗑️ 从顶级图层数组中移除图层 ${draggedLayer.id}`);
}
// 更新图层关系
draggedLayer.parentId = this.toParentId;
targetParent.children.splice(this.newIndex, 0, draggedLayer);
console.log(
`📂 将图层 ${draggedLayer.id} 添加到父图层 ${this.toParentId} 的children中`
);
// 处理fabric对象的层级关系
if (draggedLayer.fabricObject && targetParent.fabricObject) {
console.log(`🎨 处理fabric对象层级关系`);
// 从画布中移除
this.safeRemoveFromContainer(
draggedLayer.fabricObject,
this.canvas,
"画布"
);
// 添加到父组
this.safeAddToContainer(
draggedLayer.fabricObject,
targetParent.fabricObject,
`父组${this.toParentId}`
);
}
console.log("✅ 顶级图层移动到组内完成");
}
/**
* 从组图层内移动到顶级图层
*/
moveGroupToRoot(draggedLayer) {
console.log("📤 执行组内图层移动到顶级:", {
layerId: draggedLayer.id,
fromParentId: this.fromParentId,
newIndex: this.newIndex,
});
const sourceParent = this.layers.value.find(
(layer) => layer.id === this.fromParentId
);
if (!sourceParent || !sourceParent.children) {
throw new Error(`找不到源父图层或其children数组: ${this.fromParentId}`);
}
// 从源父图层的children中移除
const childIndex = sourceParent.children.findIndex(
(child) => child.id === draggedLayer.id
);
if (childIndex !== -1) {
sourceParent.children.splice(childIndex, 1);
console.log(
`🗑️ 从父图层 ${this.fromParentId} 的children中移除图层 ${draggedLayer.id}`
);
}
// 处理fabric对象的层级关系
if (draggedLayer.fabricObject && sourceParent.fabricObject) {
console.log(`🎨 处理fabric对象层级关系`);
// 从父组中移除
this.safeRemoveFromContainer(
draggedLayer.fabricObject,
sourceParent.fabricObject,
`父组${this.fromParentId}`
);
// 添加到画布
this.safeAddToContainer(draggedLayer.fabricObject, this.canvas, "画布");
}
// 清除图层的parentId
delete draggedLayer.parentId;
console.log(`🔗 清除图层 ${draggedLayer.id} 的parentId`);
// 计算在顶级图层中的插入位置
const targetIndex = Math.min(this.newIndex, this.layers.value.length);
this.layers.value.splice(targetIndex, 0, draggedLayer);
console.log(
`📂 将图层 ${draggedLayer.id} 添加到顶级图层数组位置 ${targetIndex}`
);
console.log("✅ 组内图层移动到顶级完成");
}
/**
* 在不同组之间移动
*/
moveGroupToGroup(draggedLayer) {
console.log("🔄 执行在不同组间移动:", {
layerId: draggedLayer.id,
fromParentId: this.fromParentId,
toParentId: this.toParentId,
newIndex: this.newIndex,
});
const sourceParent = this.layers.value.find(
(layer) => layer.id === this.fromParentId
);
const targetParent = this.layers.value.find(
(layer) => layer.id === this.toParentId
);
if (!sourceParent || !targetParent) {
throw new Error("找不到源父图层或目标父图层");
}
// 从源父图层中移除
const childIndex = sourceParent.children.findIndex(
(child) => child.id === draggedLayer.id
);
if (childIndex !== -1) {
sourceParent.children.splice(childIndex, 1);
console.log(
`🗑️ 从源父图层 ${this.fromParentId} 中移除图层 ${draggedLayer.id}`
);
// 从源父组的fabricObject中移除
if (draggedLayer.fabricObject && sourceParent.fabricObject) {
this.safeRemoveFromContainer(
draggedLayer.fabricObject,
sourceParent.fabricObject,
`源父组${this.fromParentId}`
);
}
}
// 更新图层的parentId
draggedLayer.parentId = this.toParentId;
console.log(
`🔗 更新图层 ${draggedLayer.id} 的parentId为 ${this.toParentId}`
);
// 确保目标父图层有children数组
if (!targetParent.children) {
targetParent.children = [];
}
// 将图层添加到目标组
targetParent.children.splice(this.newIndex, 0, draggedLayer);
console.log(
`📂 将图层 ${draggedLayer.id} 添加到目标父图层 ${this.toParentId} 的位置 ${this.newIndex}`
);
// 将图层的fabricObject添加到目标父组中
if (draggedLayer.fabricObject && targetParent.fabricObject) {
this.safeAddToContainer(
draggedLayer.fabricObject,
targetParent.fabricObject,
`目标父组${this.toParentId}`
);
}
console.log("✅ 不同组间移动完成");
}
}
/**
* 创建跨层级移动命令的工厂函数
*/
export function createCrossLevelMoveCommand(options) {
return new CrossLevelMoveCommand(options);
}

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

@@ -46,35 +46,6 @@ export class RasterizeLayerCommand extends Command {
this.parentLayer = parent;
this.isGroupLayer = this.layer?.children && this.layer.children.length > 0;
// 保存原始状态用于撤销
this.originalLayers = [...this.layers.value];
this.originalCanvasObjects = [...this.canvas.getObjects()];
this.originalObjectStates = new Map();
// 栅格化结果
this.rasterizedImage = null;
this.rasterizedImageId = null;
// 生成新图层ID
this.rasterizedLayerId = generateId("rasterized_layer_");
this.resterizedId = generateId("rasterized_");
this.rasterizedLayer = null;
// 要栅格化的图层和对象
this.layersToRasterize = [];
this.objectsToRasterize = [];
}
async execute() {
// 查找目标图层
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;
if (!this.layer) {
throw new Error(`图层 ${this.layerId} 不存在`);
}
@@ -84,24 +55,42 @@ export class RasterizeLayerCommand extends Command {
throw new Error("背景图层和固定图层不能栅格化");
}
// 生成新图层ID
this.rasterizedLayerId = generateId("rasterized_layer_");
this.resterizedId = generateId("rasterized_");
this.rasterizedLayer = null;
// 要栅格化的图层和对象
this.layersToRasterize = [];
this.objectsToRasterize = [];
// 在构造函数中收集相关对象和保存状态
this._initializeCommand();
}
async execute() {
if (!this.layer) {
throw new Error(`图层 ${this.layerId} 不存在`);
}
if (this.objectsToRasterize.length === 0) {
throw new Error("图层没有内容可栅格化");
}
try {
// 收集要栅格化的图层和对象
this._collectLayersAndObjects();
if (this.objectsToRasterize.length === 0) {
throw new Error("图层没有内容可栅格化");
}
// 保存原始对象状态
this._saveOriginalObjectStates();
this.canvas.discardActiveObject();
this.canvas.renderAll();
// 检查是否有遮罩对象
const maskObject = this._getMaskObject();
// 创建栅格化图像
const rasterizedImage = await createRasterizedImage({
canvas: this.canvas,
fabricObjects: this.objectsToRasterize,
maskObject: maskObject,
preserveOriginalQuality: true, // 保持原始质量
isGroupWithMask: this.isGroupLayer && !!maskObject, // 标记是否为带遮罩的组
});
// 创建新的栅格化图层并替换原图层
@@ -123,30 +112,36 @@ export class RasterizeLayerCommand extends Command {
}
async undo() {
if (!this.originalLayers || !this.originalCanvasObjects) {
if (!this.originalObjectStates || this.originalObjectStates.size === 0) {
throw new Error("没有可恢复的原始数据");
}
try {
await optimizeCanvasRendering(this.canvas, async () => {
// 清空画布
this.canvas.discardActiveObject();
this.canvas.clear();
// 移除栅格化后的图像对象
if (this.rasterizedImage) {
removeCanvasObjectByObject(this.canvas, this.rasterizedImage);
}
// 恢复原始对象及其状态
this.originalCanvasObjects.forEach((obj) => {
// 如果保存了该对象的原始状态，则恢复状态
if (this.originalObjectStates.has(obj.id)) {
const originalState = this.originalObjectStates.get(obj.id);
obj.set(originalState);
// 恢复原始对象
this.originalObjectStates.forEach((originalState, objectId) => {
const { object } = findObjectById(this.canvas, objectId);
if (object) {
// 恢复对象状态
object.set(originalState);
object.setCoords();
} else {
// 如果对象不在画布上，重新添加
const originalObject = originalState._fabricObject;
if (originalObject) {
this.canvas.add(originalObject);
originalObject.setCoords();
}
}
this.canvas.add(obj);
obj.setCoords();
});
// 恢复原始图层结构
this.layers.value = [...this.originalLayers];
this.layers.value = [...this.originalLayerStructure];
// 恢复原活动图层
this.activeLayerId.value = this.layerId;
@@ -163,6 +158,67 @@ export class RasterizeLayerCommand extends Command {
}
}
/**
* 初始化命令，收集相关图层和对象，保存原始状态
* @private
*/
_initializeCommand() {
// 收集要栅格化的图层和对象
this._collectLayersAndObjects();
// 保存原始图层结构（深拷贝相关部分）
this._saveOriginalLayerStructure();
// 保存原始对象状态
this._saveOriginalObjectStates();
}
/**
* 保存原始图层结构
* @private
*/
_saveOriginalLayerStructure() {
// 只保存相关的图层结构，而不是整个图层数组
this.originalLayerStructure = JSON.parse(JSON.stringify(this.layers.value));
}
/**
* 保存原始对象状态
* @private
*/
_saveOriginalObjectStates() {
this.originalObjectStates = new Map();
this.objectsToRasterize.forEach((object) => {
if (object && object.id) {
// 深拷贝对象的重要属性
const originalState = {
left: object.left,
top: object.top,
scaleX: object.scaleX,
scaleY: object.scaleY,
angle: object.angle,
flipX: object.flipX,
flipY: object.flipY,
opacity: object.opacity,
originX: object.originX,
originY: object.originY,
layerId: object.layerId,
layerName: object.layerName,
width: object.width,
height: object.height,
strokeWidth: object.strokeWidth,
visible: object.visible,
// 保存对象引用以便撤销时重新添加
_fabricObject: object,
};
this.originalObjectStates.set(object.id, originalState);
}
});
console.log(`💾 保存了 ${this.originalObjectStates.size} 个对象的原始状态`);
}
/**
* 收集要栅格化的图层和对象
* @private
@@ -239,42 +295,15 @@ export class RasterizeLayerCommand extends Command {
return result;
}
/**
* 保存原始对象状态
* @private
*/
_saveOriginalObjectStates() {
this.objectsToRasterize.forEach((object) => {
if (object && object.id) {
const originalState = {
left: object.left,
top: object.top,
scaleX: object.scaleX,
scaleY: object.scaleY,
angle: object.angle,
flipX: object.flipX,
flipY: object.flipY,
opacity: object.opacity,
originX: object.originX,
originY: object.originY,
layerId: object.layerId,
layerName: object.layerName,
width: object.width,
height: object.height,
strokeWidth: object.strokeWidth,
visible: object.visible,
};
this.originalObjectStates.set(object.id, originalState);
}
});
}
/**
* 创建栅格化图层并替换原图层
* @param {fabric.Image} rasterizedImage 栅格化后的图像
* @private
*/
async _createRasterizedLayer(rasterizedImage) {
// 保存栅格化图像的引用用于撤销
this.rasterizedImage = rasterizedImage;
// 从画布中移除原有对象
this.objectsToRasterize.forEach((obj) => {
removeCanvasObjectByObject(this.canvas, obj);
@@ -304,6 +333,21 @@ export class RasterizeLayerCommand extends Command {
});
// 在适当位置添加新的栅格化图层
this._replaceLayerInStructure();
// 设置为活动图层
this.activeLayerId.value = this.rasterizedLayerId;
await this.layerManager?.updateLayersObjectsInteractivity(false);
console.log(`🎨 栅格化图层 ${this.rasterizedLayer.name} 创建完成`);
}
/**
* 在图层结构中替换原图层
* @private
*/
_replaceLayerInStructure() {
// 1.当前如果是子图层，则插入到子图层的位置
const { layer, parent } = findLayerRecursively(
this.layers.value,
@@ -334,35 +378,37 @@ export class RasterizeLayerCommand extends Command {
1,
this.rasterizedLayer
);
} else this.layers.value.splice(insertIndex, 1, this.rasterizedLayer);
} else {
this.layers.value.splice(insertIndex, 1, this.rasterizedLayer);
}
} else {
// 2.如果没有找到父图层，则添加到顶层
this.layers.value.unshift(this.rasterizedLayer);
}
}
// // 替换图层结构
// if (this.isGroupLayer) {
// // 组图层：移除所有相关图层
// const layerIdsToRemove = this.layersToRasterize.map((layer) => layer.id);
// this.layers.value = this.layers.value.filter(
// (layer) => !layerIdsToRemove.includes(layer.id)
// );
// } else {
// // 普通图层：移除原图层
// const layerIndex = this.layers.value.findIndex(
// (l) => l.id === this.layerId
// );
// if (layerIndex !== -1) {
// this.layers.value.splice(layerIndex, 1);
// }
// }
/**
* 获取遮罩对象
* @returns {Object|null} 遮罩对象或null
* @private
*/
_getMaskObject() {
// 如果图层有clippingMask，获取对应的fabric对象
if (this.layer?.clippingMask?.id) {
const { object: maskObject } = findObjectById(
this.canvas,
this.layer.clippingMask.id
);
if (maskObject) {
console.log(
`📎 找到遮罩对象: ${maskObject.id}, 类型: ${maskObject.type}`
);
return maskObject;
}
}
// 设置为活动图层
this.activeLayerId.value = this.rasterizedLayerId;
await this.layerManager?.updateLayersObjectsInteractivity(false);
console.log(`🎨 栅格化图层 ${this.rasterizedLayer.name} 创建完成`);
console.log("📎 未找到遮罩对象");
return null;
}
getInfo() {
@@ -387,11 +433,11 @@ export class ExportLayerToImageCommand extends Command {
constructor(options) {
super({
name: "导出图层",
saveState: true,
saveState: false, // 导出不需要保存状态
});
this.canvas = options.canvas;
this.layers = options.layers;
this.layerId = options.layerId; // 指定要栅格化的图层ID
this.layerId = options.layerId; // 指定要导出的图层ID
// 是否包含锁定对象
this.hasLocked = options.hasLocked || true;
// 是否包含隐藏对象
@@ -409,48 +455,29 @@ export class ExportLayerToImageCommand extends Command {
this.parentLayer = parent;
this.isGroupLayer = this.layer?.children && this.layer.children.length > 0;
// 保存原始状态用于撤销
this.originalLayers = [...this.layers.value];
this.originalCanvasObjects = [...this.canvas.getObjects()];
this.originalObjectStates = new Map();
// 栅格化结果
this.rasterizedImage = null;
this.rasterizedImageId = null;
// 生成新图层ID
this.rasterizedLayerId = generateId("rasterized_layer_");
this.resterizedId = generateId("rasterized_");
this.rasterizedLayer = null;
// 要栅格化的图层和对象
this.layersToRasterize = [];
this.objectsToRasterize = [];
}
async execute() {
// 查找目标图层
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;
if (!this.layer) {
throw new Error(`图层 ${this.layerId} 不存在`);
}
// 要导出的图层和对象
this.layersToRasterize = [];
this.objectsToRasterize = [];
// 收集相关对象
this._collectLayersAndObjects();
}
async execute() {
if (!this.layer) {
throw new Error(`图层 ${this.layerId} 不存在`);
}
if (this.objectsToRasterize.length === 0) {
message.error("图层没有内容可导出");
throw new Error("图层没有内容可导出");
}
try {
// 收集要栅格化的图层和对象
this._collectLayersAndObjects();
if (this.objectsToRasterize.length === 0) {
message.error("图层没有内容可导出");
throw new Error("图层没有内容可导出");
}
// 保存原始对象状态
this.canvas.discardActiveObject();
this.canvas.renderAll();
@@ -563,8 +590,6 @@ export class ExportLayerToImageCommand extends Command {
name: this.name,
originalLayerId: this.layerId,
originalLayerName: this.layer?.name,
rasterizedLayerId: this.rasterizedLayerId,
rasterizedLayerName: this.rasterizedLayer?.name,
isGroupLayer: this.isGroupLayer,
objectCount: this.objectsToRasterize?.length || 0,
};

1
src/component/Canvas/CanvasEditor/components/LayersPanel/LayerItem.vue
View File

@@ -373,6 +373,7 @@ function findParentLayerId() {
'fixed-layer': layer.isBackground || layer.isFixed,
},
]"
:data-layer-id="layer.id"
@click="handleClick"
@dblclick="handleDoubleClick"
@touchstart="handleTouchStart"

253
src/component/Canvas/CanvasEditor/components/LayersPanel/LayersList.vue
View File

@@ -39,6 +39,7 @@ const emit = defineEmits([
"update:editing-name",
"root-layers-sort",
"child-layers-sort",
"cross-level-move", // 新增：跨层级移动事件
"select-child-layer",
"start-child-layer-edit",
"child-context-menu",
@@ -73,6 +74,79 @@ const forwardEvent = (eventName, ...args) => {
// 处理根级图层拖拽排序
const handleRootLayersSort = (event) => {
console.log("🔄 拖拽结束事件:", event);
console.log("📍 当前组件信息:", {
isChild: props.isChild,
parentLayerId: props.parentLayerId,
groupName: props.groupName,
});
// 清理拖拽样式
const sortableContainers = document.querySelectorAll(".sortable-layers");
sortableContainers.forEach((container) => {
container.classList.remove("drag-mode", "drop-target", "drop-invalid");
});
// 检查是否为跨层级拖拽
const { from, to, oldIndex, newIndex, item } = event;
const isFromDifferentContainer = from !== to;
if (isFromDifferentContainer) {
console.log("🔀 检测到跨层级拖拽");
// 获取被拖拽的图层ID
const draggedLayerId =
item.getAttribute("data-layer-id") ||
props.sortableRootLayers[oldIndex]?.id;
if (!draggedLayerId) {
console.error("❌ 无法获取被拖拽的图层ID");
return;
}
// 获取容器类型信息
const fromContainerType = from.getAttribute("data-container-type");
const toContainerType = to.getAttribute("data-container-type");
const fromParentId = from.getAttribute("data-parent-id");
const toParentId = to.getAttribute("data-parent-id");
console.log("📦 拖拽信息:", {
fromContainerType,
toContainerType,
fromParentId,
toParentId,
draggedLayerId,
});
// 验证拖拽的有效性
if (
!validateCrossLevelMove(
draggedLayerId,
fromContainerType,
toContainerType,
fromParentId,
toParentId
)
) {
console.warn("⚠️ 无效的跨层级移动，操作被取消");
return;
}
// 发送跨层级移动事件
emit("cross-level-move", {
layerId: draggedLayerId,
fromContainerType,
toContainerType,
fromParentId,
toParentId,
newIndex,
oldIndex,
});
return;
}
// 普通的同层级拖拽排序
if (props.isChild) {
// 子图层事件处理
// 确保排序只影响当前组图层的children，而不是全局layers
@@ -87,6 +161,92 @@ const handleRootLayersSort = (event) => {
}
};
// 验证跨层级移动的有效性
const validateCrossLevelMove = (
layerId,
fromType,
toType,
fromParentId,
toParentId
) => {
// 查找图层
const layer = findLayerInHierarchy(layerId, fromType, fromParentId);
if (!layer) {
console.error("找不到要移动的图层:", layerId);
return false;
}
// 检查是否为不可移动的图层
if (layer.isBackground || layer.isFixed) {
console.warn("背景层和固定层不能移动");
return false;
}
// 检查是否试图将组图层移动到自己的子层级中（防止循环引用）
if (toType === "child" && toParentId && isDescendantOf(toParentId, layerId)) {
console.warn("不能将图层移动到自己的子层级中");
return false;
}
return true;
};
// 在层级结构中查找图层
const findLayerInHierarchy = (layerId, containerType, parentId) => {
if (containerType === "root") {
return props.layers.find((layer) => layer.id === layerId);
} else if (containerType === "child" && parentId) {
const parent = props.layers.find((layer) => layer.id === parentId);
return parent?.children?.find((child) => child.id === layerId);
}
return null;
};
// 检查是否为子层级关系（防止循环引用）
const isDescendantOf = (ancestorId, layerId) => {
const checkChildren = (children) => {
if (!children) return false;
for (const child of children) {
if (child.id === layerId) return true;
if (child.children && checkChildren(child.children)) return true;
}
return false;
};
const ancestor = props.layers.find((layer) => layer.id === ancestorId);
return ancestor ? checkChildren(ancestor.children) : false;
};
// 拖拽开始事件
const handleDragStart = (event) => {
console.log("🎯 开始拖拽:", event);
const { item } = event;
// 为拖拽元素添加数据属性
if (item) {
item.setAttribute("data-dragging", "true");
// 添加拖拽相关的样式类
const sortableContainers = document.querySelectorAll(".sortable-layers");
sortableContainers.forEach((container) => {
container.classList.add("drag-mode");
});
}
};
// 拖拽添加事件（当元素被拖拽到新容器时）
const handleDragAdd = (event) => {
console.log("➕ 拖拽添加:", event);
// 这个事件在跨容器拖拽时会触发
};
// 拖拽移除事件（当元素被从容器中移除时）
const handleDragRemove = (event) => {
console.log("➖ 拖拽移除:", event);
// 这个事件在跨容器拖拽时会触发
};
const canDeleteComputed = computed(() => {
// 如果是子图层，检查父图层是否可以删除
if (props.isChild) {
@@ -106,18 +266,33 @@ const canDeleteComputed = computed(() => {
<VueDraggable
:model-value="sortableRootLayers"
@end="handleRootLayersSort"
@add="handleDragAdd"
@remove="handleDragRemove"
@start="handleDragStart"
class="sortable-layers"
:animation="200"
:data-container-type="isChild ? 'child' : 'root'"
:data-parent-id="isChild ? parentLayerId : null"
:animation="250"
:disabled="false"
handle=".layer-drag-handle"
ghost-class="ghost"
chosen-class="chosen"
drag-class="drag"
:group="groupName"
:group="{
name: groupName,
pull: true,
put: true,
}"
:swap-threshold="0.5"
:empty-insert-threshold="5"
:force-fallback="false"
:fallback-tolerance="3"
:scroll-sensitivity="100"
:scroll-speed="10"
>
<!-- 遍历可排序的根级图层 -->
<template v-for="(layer, index) in sortableRootLayers" :key="layer.id">
<div class="layer-group">
<div class="layer-group" :data-layer-id="layer.id">
<!-- 使用 LayerItem 子组件 -->
<!-- :thumbnail-url="getLayerThumbnail(layer.id)" -->
@@ -193,7 +368,7 @@ const canDeleteComputed = computed(() => {
:expanded-group-ids="expandedGroupIds"
:isChild="true"
:parentLayerId="layer.id"
group-name="layers-child"
:group-name="groupName"
@layer-click="(...args) => forwardEvent('layer-click', ...args)"
@layer-double-click="
(...args) => forwardEvent('layer-double-click', ...args)
@@ -222,6 +397,9 @@ const canDeleteComputed = computed(() => {
@child-layers-sort="
(...args) => forwardEvent('child-layers-sort', ...args)
"
@cross-level-move="
(...args) => forwardEvent('cross-level-move', ...args)
"
@select-child-layer="
(...args) => forwardEvent('select-child-layer', ...args)
"
@@ -296,18 +474,81 @@ const canDeleteComputed = computed(() => {
border-top: 1px solid #e0e0e0;
}
// 拖拽模式样式
.drag-mode {
.layer-item {
transition: all 0.2s ease;
&:not(.chosen):not(.ghost) {
opacity: 0.7;
transform: scale(0.98);
}
}
}
// 拖拽状态样式
.ghost {
opacity: 0.5;
background: #f0f0f0;
opacity: 0.4;
background: linear-gradient(90deg, #e6f7ff 0%, #bae7ff 100%);
border: 2px dashed #1890ff;
transform: rotate(2deg);
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
transition: all 0.3s ease;
}
.chosen {
opacity: 0.8;
transform: scale(1.02);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
z-index: 999;
background: linear-gradient(90deg, #fff2e8 0%, #ffd8bf 100%);
border: 2px solid #fa8c16;
}
.drag {
opacity: 0.6;
transform: rotate(-1deg);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
// 跨层级拖拽目标区域高亮
.sortable-layers {
position: relative;
transition: background-color 0.2s ease, border-color 0.2s ease;
border-radius: 4px;
min-height: 40px; // 确保空组也有足够的拖拽区域
&.drop-target {
background-color: rgba(82, 196, 26, 0.1);
border: 2px dashed #52c41a;
&::before {
content: "拖拽到此处";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #52c41a;
font-size: 12px;
font-weight: 500;
background: rgba(255, 255, 255, 0.9);
padding: 4px 8px;
border-radius: 4px;
z-index: 10;
pointer-events: none;
}
}
&.drop-invalid {
background-color: rgba(255, 77, 79, 0.1);
border: 2px dashed #ff4d4f;
&::before {
content: "无法拖拽到此处";
color: #ff4d4f;
}
}
}
}

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

@@ -4,6 +4,7 @@ import { findLayerRecursively, isGroupLayer } from "../../utils/layerHelper";
import ContextMenu from "./ContextMenu.vue";
import LayerItem from "./LayerItem.vue";
import LayersList from "./LayersList.vue"; // 引入 LayersList 组件
import { createCrossLevelMoveCommand } from "../../commands/CrossLevelMoveCommands";
// // 导入命令类
// import {
// ReorderLayersCommand,
@@ -605,6 +606,7 @@ function handleLayerClick(layer, event) {
} else {
// 否则直接设置当前图层为活动图层
setActiveLayer(layer.id);
layerManager?.updateLayersObjectsInteractivity();
}
}
lastSelectedIndex.value = sortableRootLayers.value.findIndex(
@@ -1215,6 +1217,316 @@ function moveLayerToBottom(layerId) {
const forwardEvent = (eventName, ...args) => {
emit(eventName, ...args);
};
// 处理跨层级移动
async function handleCrossLevelMove(moveData) {
console.log("🔀 处理跨层级移动:", moveData);
const {
layerId,
fromContainerType,
toContainerType,
fromParentId,
toParentId,
newIndex,
oldIndex,
} = moveData;
// 基本验证
if (!layerId) {
console.error("❌ 缺少图层ID");
return;
}
try {
// 如果有命令管理器，使用命令模式
if (commandManager) {
console.log("📝 使用命令模式执行跨层级移动");
const command = createCrossLevelMoveCommand({
layers,
layerManager,
canvas: layerManager?.canvas,
layerId,
fromContainerType,
toContainerType,
fromParentId,
toParentId,
newIndex,
oldIndex,
});
// 执行命令
const result = await commandManager.executeCommand(command);
if (result) {
console.log("✅ 跨层级移动命令执行成功");
// 清除选择状态
clearSelection();
} else {
console.warn("⚠️ 跨层级移动命令执行失败");
}
return result;
} else {
// 回退方案：直接执行移动逻辑
console.log("📝 使用回退方案执行跨层级移动");
return await executeDirectMove(moveData);
}
} catch (error) {
console.error("❌ 跨层级移动失败:", error);
// 可以在这里添加用户友好的错误提示
const errorMessages = {
找不到要移动的图层: "无法找到要移动的图层，请刷新页面后重试",
背景层和固定层不能移动: "背景层和固定层无法移动",
不能将图层移动到自己的子层级中: "无法将图层移动到自己的子层级中",
目标图层不是组图层: "只能将图层移动到组图层中",
};
const userMessage =
errorMessages[error.message] || `移动失败: ${error.message}`;
// 这里可以触发一个全局的错误提示组件
// 暂时使用console.warn，实际项目中应该替换为适当的提示方式
console.warn("用户提示:", userMessage);
}
}
// 直接执行移动的回退方案（保持原有逻辑）
async function executeDirectMove(moveData) {
const {
layerId,
fromContainerType,
toContainerType,
fromParentId,
toParentId,
newIndex,
oldIndex,
} = moveData;
// 查找被拖拽的图层
let draggedLayer = null;
let sourceParent = null;
// 根据源容器类型查找图层
if (fromContainerType === "root") {
draggedLayer = layers.value.find((layer) => layer.id === layerId);
} else if (fromContainerType === "child" && fromParentId) {
sourceParent = layers.value.find((layer) => layer.id === fromParentId);
if (sourceParent && sourceParent.children) {
draggedLayer = sourceParent.children.find(
(child) => child.id === layerId
);
}
}
if (!draggedLayer) {
throw new Error("找不到要移动的图层");
}
// 检查是否允许移动（背景层和固定层不能移动）
if (draggedLayer.isBackground || draggedLayer.isFixed) {
throw new Error("背景层和固定层不能移动");
}
// 情况1: 从顶级图层移动到组图层内
if (fromContainerType === "root" && toContainerType === "child") {
await moveRootToGroup(draggedLayer, toParentId, newIndex);
}
// 情况2: 从组图层内移动到顶级图层
else if (fromContainerType === "child" && toContainerType === "root") {
await moveGroupToRoot(draggedLayer, fromParentId, newIndex);
}
// 情况3: 在不同组之间移动
else if (
fromContainerType === "child" &&
toContainerType === "child" &&
fromParentId !== toParentId
) {
await moveGroupToGroup(draggedLayer, fromParentId, toParentId, newIndex);
}
// 刷新画布渲染
if (layerManager?.canvas) {
layerManager.canvas.renderAll();
}
// 清除选择状态
clearSelection();
console.log("✅ 跨层级移动完成");
return true;
}
// 从顶级图层移动到组图层内
async function moveRootToGroup(draggedLayer, toParentId, newIndex) {
console.log("📥 顶级图层移动到组内:", {
layerId: draggedLayer.id,
toParentId,
newIndex,
});
// 找到目标父图层
const targetParent = layers.value.find((layer) => layer.id === toParentId);
if (!targetParent) {
throw new Error(`找不到目标父图层: ${toParentId}`);
}
// 检查目标父图层是否为组
if (!isGroupLayerType(targetParent)) {
throw new Error("目标图层不是组图层");
}
// 确保父图层有children数组
if (!targetParent.children) {
targetParent.children = [];
}
// 从顶级图层数组中移除
const rootIndex = layers.value.findIndex(
(layer) => layer.id === draggedLayer.id
);
if (rootIndex !== -1) {
layers.value.splice(rootIndex, 1);
}
// 使用 layerManager 的方法移动图层到组内
if (layerManager?.moveLayerToGroup) {
await layerManager.moveLayerToGroup(draggedLayer.id, toParentId, newIndex);
} else {
// 回退方案：手动更新图层关系
draggedLayer.parentId = toParentId;
targetParent.children.splice(newIndex, 0, draggedLayer);
// 处理 fabricObject 的层级关系
if (draggedLayer.fabricObject && targetParent.fabricObject) {
if (layerManager?.canvas) {
layerManager.canvas.remove(draggedLayer.fabricObject);
}
targetParent.fabricObject.add(draggedLayer.fabricObject);
}
}
console.log("✅ 成功将图层移动到组内");
}
// 从组图层内移动到顶级图层
async function moveGroupToRoot(draggedLayer, fromParentId, newIndex) {
console.log("📤 组内图层移动到顶级:", {
layerId: draggedLayer.id,
fromParentId,
newIndex,
});
// 找到源父图层
const sourceParent = layers.value.find((layer) => layer.id === fromParentId);
if (!sourceParent || !sourceParent.children) {
throw new Error(`找不到源父图层或其children数组: ${fromParentId}`);
}
// 使用 layerManager 的方法移动图层到顶级
if (layerManager?.moveLayerToRoot) {
await layerManager.moveLayerToRoot(draggedLayer.id, newIndex);
} else {
// 回退方案：手动更新图层关系
// 从源父图层的children中移除
const childIndex = sourceParent.children.findIndex(
(child) => child.id === draggedLayer.id
);
if (childIndex !== -1) {
sourceParent.children.splice(childIndex, 1);
}
// 处理 fabricObject 的层级关系
if (draggedLayer.fabricObject && sourceParent.fabricObject) {
sourceParent.fabricObject.remove(draggedLayer.fabricObject);
if (layerManager?.canvas) {
layerManager.canvas.add(draggedLayer.fabricObject);
}
}
// 清除图层的parentId
delete draggedLayer.parentId;
// 计算在顶级图层中的插入位置
const targetIndex = Math.min(newIndex, layers.value.length);
// 将图层添加到顶级图层的指定位置
layers.value.splice(targetIndex, 0, draggedLayer);
}
console.log("✅ 成功将图层移动到顶级");
}
// 在不同组之间移动
async function moveGroupToGroup(
draggedLayer,
fromParentId,
toParentId,
newIndex
) {
console.log("🔄 在不同组间移动:", {
layerId: draggedLayer.id,
fromParentId,
toParentId,
newIndex,
});
// 找到源父图层和目标父图层
const sourceParent = layers.value.find((layer) => layer.id === fromParentId);
const targetParent = layers.value.find((layer) => layer.id === toParentId);
if (!sourceParent || !targetParent) {
throw new Error("找不到源父图层或目标父图层");
}
if (!isGroupLayerType(targetParent)) {
throw new Error("目标图层不是组图层");
}
// 使用 layerManager 的方法在组间移动
if (layerManager?.moveLayerBetweenGroups) {
await layerManager.moveLayerBetweenGroups(
draggedLayer.id,
fromParentId,
toParentId,
newIndex
);
} else {
// 回退方案：手动更新图层关系
// 从源父图层中移除
const childIndex = sourceParent.children.findIndex(
(child) => child.id === draggedLayer.id
);
if (childIndex !== -1) {
sourceParent.children.splice(childIndex, 1);
// 从源父组的fabricObject中移除
if (draggedLayer.fabricObject && sourceParent.fabricObject) {
sourceParent.fabricObject.remove(draggedLayer.fabricObject);
}
}
// 更新图层的parentId
draggedLayer.parentId = toParentId;
// 确保目标父图层有children数组
if (!targetParent.children) {
targetParent.children = [];
}
// 将图层添加到目标组
targetParent.children.splice(newIndex, 0, draggedLayer);
// 将图层的fabricObject添加到目标父组中
if (draggedLayer.fabricObject && targetParent.fabricObject) {
targetParent.fabricObject.add(draggedLayer.fabricObject);
}
}
console.log("✅ 成功在不同组间移动图层");
}
</script>
<template>
@@ -1327,6 +1639,7 @@ const forwardEvent = (eventName, ...args) => {
@update:editing-name="editingLayerName = $event"
@root-layers-sort="handleRootLayersSort"
@child-layers-sort="handleChildLayersSort"
@cross-level-move="handleCrossLevelMove"
@select-child-layer="selectChildLayer"
@start-child-layer-edit="startChildLayerEdit"
@child-context-menu="showChildLayerContextMenu"

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

@@ -335,6 +335,11 @@ export class LayerManager {
// 设置裁剪对象
layers.forEach((layer) => {
if (layer.clippingMask) {
const activeObject = this.canvas.getActiveObject();
if (activeObject?._objects?.length > 1) {
console.log(activeObject?._objects?.length);
return false; // 如果是多选对象，则不设置裁剪路径
}
// 如果是组图层 则给所有子对象设置裁剪对象
if (layer.type === LayerType.GROUP || layer.children?.length > 0) {
layer.children.forEach((childLayer) => {
@@ -344,8 +349,10 @@ export class LayerManager {
);
if (object) {
const tempClipPath = fabric.util.object.clone(object);
tempClipPath.clipPath = null;
tempClipPath.set({
// 设置绝对定位
// ...layer.clippingMask, // 恢复原定位
absolutePositioned: true,
});
const childObj = this.canvas
@@ -362,7 +369,14 @@ export class LayerManager {
layer.clippingMask?.id
);
if (object) {
obj.clipPath = object;
const tempClipPath = fabric.util.object.clone(object);
tempClipPath.clipPath = null; // 确保克隆的遮罩没有clipPath
tempClipPath.set({
// 设置绝对定位
// ...layer.clippingMask, // 恢复原定位
absolutePositioned: true,
});
obj.clipPath = tempClipPath;
}
}
}
@@ -918,13 +932,17 @@ export class LayerManager {
// 设置激活当前图层下画布中的所有对象，并变成选择组
setAllActiveGroupLayerCanvasObject(layer) {
// 获取当前图层下所有元素
let layerMask = null;
// 选择当前组下所有画布元素
const allObjects = layer.children.reduce((acc, child) => {
// 如果子图层有fabricObjects，则添加到结果数组
child?.fabricObjects?.forEach((obj) => {
const { object } = findObjectById(this.canvas, obj.id);
if (object) {
if (!layerMask) {
layerMask = fabric.util.object.clone(object.clipPath);
}
object.clipPath = null; // 确保克隆的遮罩没有clipPath
acc.push(object);
}
});
@@ -932,6 +950,10 @@ export class LayerManager {
if (child?.fabricObject) {
const { object } = findObjectById(this.canvas, child?.fabricObject.id);
if (object) {
if (!layerMask) {
layerMask = fabric.util.object.clone(object.clipPath);
}
object.clipPath = null; // 确保克隆的遮罩没有clipPath
acc.push(object);
}
}
@@ -951,6 +973,8 @@ export class LayerManager {
canvas: this.canvas,
});
activeSelection.clipPath = layerMask; // 保留第一个对象的裁剪路径
// 设置活动选择组的属性
this.canvas.setActiveObject(activeSelection);
this.canvas.renderAll();

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

@@ -18,9 +18,15 @@ export const createRasterizedImage = async ({
scaleFactor = 2, // 高清倍数 - 默认是画布的高清倍数
isReturenDataURL = false, // 是否返回DataURL而不是fabric.Image对象
isThumbnail = false, // 是否为缩略图
preserveOriginalQuality = true, // 是否保持原始质量
isGroupWithMask = false, // 是否为带遮罩的组图层
} = {}) => {
try {
console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`);
console.log(
`📊 开始栅格化 ${fabricObjects.length} 个对象${
maskObject ? "（带遮罩）" : ""
}`
);
// 确保有对象需要栅格化
if (fabricObjects.length === 0) {
@@ -39,7 +45,50 @@ export const createRasterizedImage = async ({
console.log(`高清倍数: ${scaleFactor}, 当前缩放: ${currentZoom}`);
// 使用组对象方式创建栅格化图像
// 如果有遮罩且保持原始质量，使用高质量的遮罩处理方法
if (maskObject && preserveOriginalQuality) {
const rasterizedImage = await createRasterizedImageWithMask({
canvas,
objects: fabricObjects,
maskObject,
scaleFactor,
quality,
format,
currentZoom,
isReturenDataURL,
isGroupWithMask,
});
if (!rasterizedImage) {
console.warn("⚠️ 带遮罩的栅格化图像创建失败，返回空图像");
return null;
}
if (isReturenDataURL) {
console.log("✅ 带遮罩的栅格化图像创建成功，返回DataURL");
return rasterizedImage;
}
// 设置栅格化图像的属性
rasterizedImage.set({
selectable: true,
evented: true,
hasControls: true,
hasBorders: true,
custom: {
type: "rasterized",
rasterizedAt: new Date().toISOString(),
objectCount: fabricObjects.length,
originalZoom: currentZoom,
hasMask: true,
},
});
console.log(`✅ 带遮罩的栅格化图像创建完成`);
return rasterizedImage;
}
// 使用原有的组对象方式创建栅格化图像
const rasterizedImage = await createRasterizedImageWithGroup({
canvas,
objects: fabricObjects,
@@ -60,7 +109,7 @@ export const createRasterizedImage = async ({
if (isReturenDataURL) {
console.log("✅ 栅格化图像创建成功，返回DataURL");
return rasterizedImage; // 返回DataURL
return rasterizedImage;
}
// 设置栅格化图像的属性
@@ -117,6 +166,7 @@ const createRasterizedImageWithGroup = async ({
select: false,
evented: false,
hasControls: false,
clipPath: null, // 确保克隆对象没有clipPath
});
clonedObjects.push(clonedObj);
}
@@ -207,6 +257,144 @@ const createRasterizedImageWithGroup = async ({
}
};
/**
* 使用遮罩创建栅格化图像 - 专门处理带遮罩的组图层
* 基于遮罩的位置和大小来裁剪内容，确保正确的定位
* @param {Object} options 渲染选项
* @returns {Promise<fabric.Image>} 栅格化后的图像对象
*/
const createRasterizedImageWithMask = async ({
canvas,
objects,
maskObject,
scaleFactor,
quality,
format,
currentZoom,
isReturenDataURL,
isGroupWithMask,
}) => {
try {
console.log("🎭 使用遮罩创建栅格化图像");
// 获取遮罩的边界框，这将作为最终图像的边界
const maskBounds = maskObject.getBoundingRect(true, true);
console.log("📏 遮罩边界框:", maskBounds);
// 克隆所有对象，并清除它们的遮罩，避免重复应用
const clonedObjects = [];
for (const obj of objects) {
const clonedObj = await cloneObjectAsync(obj);
clonedObj.set({
select: false,
evented: false,
hasControls: false,
clipPath: null, // 清除clipPath，避免重复应用遮罩
});
clonedObjects.push(clonedObj);
}
// 克隆遮罩对象用于裁剪
const clonedMask = await cloneObjectAsync(maskObject);
clonedMask.set({
select: false,
evented: false,
hasControls: false,
absolutePositioned: false, // 设置为绝对定位
// fill: "#ffffff", // 遮罩使用白色
// stroke: "", // 确保没有描边
// strokeWidth: 0,
});
clonedMask.clipPath = null; // 确保克隆的遮罩没有clipPath
// 创建离屏画布，使用遮罩的边界大小
const offscreenCanvas = createStaticCanvas();
const canvasWidth = Math.ceil(maskBounds.width * scaleFactor);
const canvasHeight = Math.ceil(maskBounds.height * scaleFactor);
offscreenCanvas.setDimensions({
width: canvasWidth,
height: canvasHeight,
});
console.log(
`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`
);
// 调整对象位置，相对于遮罩边界重新定位
clonedObjects.forEach((obj) => {
obj.set({
left: (obj.left - maskBounds.left) * scaleFactor,
top: (obj.top - maskBounds.top) * scaleFactor,
scaleX: (obj.scaleX || 1) * scaleFactor,
scaleY: (obj.scaleY || 1) * scaleFactor,
});
obj.setCoords();
});
// 调整遮罩位置
clonedMask.set({
left: 0, // 遮罩从画布左上角开始
top: 0,
scaleX: (clonedMask.scaleX || 1) * scaleFactor,
scaleY: (clonedMask.scaleY || 1) * scaleFactor,
originX: "left",
originY: "top",
absolutePositioned: true, // 设置为绝对定位
});
clonedMask.setCoords();
// 添加所有对象到离屏画布
clonedObjects.forEach((obj) => {
offscreenCanvas.add(obj);
});
// 使用遮罩作为画布的clipPath来裁剪内容
offscreenCanvas.clipPath = clonedMask;
// 渲染离屏画布
offscreenCanvas.renderAll();
// 生成图像数据
const dataURL = offscreenCanvas.toDataURL({
format,
quality,
multiplier: 1, // 已经通过画布尺寸和对象缩放处理了高清倍数
});
if (isReturenDataURL) {
// 清理离屏画布
offscreenCanvas.dispose();
return dataURL;
}
// 清理离屏画布
offscreenCanvas.dispose();
// 创建fabric.Image对象
const fabricImage = await createFabricImageFromDataURL(dataURL);
// 设置图像的位置，使其与原始遮罩的位置匹配
fabricImage.set({
scaleX: 1 / scaleFactor, // 由于我们生成的图像是高清版本，需要缩放回原始大小
scaleY: 1 / scaleFactor,
left: maskBounds.left + maskBounds.width / 2, // 设置为遮罩中心点
top: maskBounds.top + maskBounds.height / 2, // 设置为遮罩中心点
originX: "center",
originY: "center",
});
// 确保图像位置正确
fabricImage.setCoords();
console.log("✅ 带遮罩的栅格化图像创建完成");
return fabricImage;
} catch (error) {
console.error("带遮罩的栅格化失败:", error);
throw error;
}
};
/**
* 异步克隆fabric对象
* @param {fabric.Object} obj 要克隆的对象
@@ -248,9 +436,40 @@ const createFabricImageFromDataURL = (dataURL) => {
* @param {Object} bounds 边界框
*/
const applyMaskToCanvas = async (canvas, maskObject, bounds) => {
// 这里可以实现遮罩逻辑
// 例如使用canvas的clipPath或其他遮罩技术
console.log("应用遮罩功能待实现");
if (!maskObject) {
console.log("没有遮罩对象，跳过遮罩应用");
return;
}
try {
console.log("🎭 应用遮罩到画布");
// 克隆遮罩对象，避免影响原对象
const clonedMask = await cloneObjectAsync(maskObject);
// 设置遮罩属性
clonedMask.set({
fill: "#ffffff", // 遮罩使用白色
stroke: "", // 确保没有描边
strokeWidth: 0,
selectable: false,
evented: false,
absolutePositioned: true, // 设置为绝对定位
});
// 调整遮罩位置，相对于画布边界重新定位
clonedMask.set({
left: clonedMask.left - bounds.left,
top: clonedMask.top - bounds.top,
});
// 将遮罩设置为画布的clipPath
canvas.clipPath = clonedMask;
console.log("✅ 遮罩应用完成");
} catch (error) {
console.error("应用遮罩失败:", error);
}
};
/**