feat : 显示选区逻辑完成
This commit is contained in:
bighuixiang
@@ -1,4 +1,8 @@
|
||||
import { createLayer, findInChildLayers, LayerType } from "../utils/layerHelper.js";
|
||||
import {
|
||||
createLayer,
|
||||
findInChildLayers,
|
||||
LayerType,
|
||||
} from "../utils/layerHelper.js";
|
||||
import { createRasterizedImage } from "../utils/selectionToImage.js";
|
||||
import { CompositeCommand, Command } from "./Command.js";
|
||||
import { CreateImageLayerCommand } from "./LayerCommands.js";
|
||||
@@ -52,7 +56,9 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
|
||||
const selectionObject = this.selectionManager.getSelectionObject();
|
||||
if (selectionObject) {
|
||||
try {
|
||||
this._clonedSelectionObject = await this._cloneObject(selectionObject);
|
||||
this._clonedSelectionObject = await this._cloneObject(
|
||||
selectionObject
|
||||
);
|
||||
console.log("套索抠图：选区对象已克隆保存");
|
||||
} catch (error) {
|
||||
console.error("套索抠图：克隆选区对象失败:", error);
|
||||
@@ -195,6 +201,17 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
|
||||
this.groupLayer.clippingMask = clippingMask.toObject(["id", "layerId"]); // 设置组图层的fabricObject为遮罩图像
|
||||
|
||||
this.groupLayer.children.push(selectLayer);
|
||||
|
||||
selectionObject.set({
|
||||
id: generateId("selectionObject-"),
|
||||
customType: "selectionObject",
|
||||
});
|
||||
|
||||
this.groupLayer.selectObject = selectionObject.toObject([
|
||||
"id",
|
||||
"customType",
|
||||
]);
|
||||
|
||||
// 插入新组图层
|
||||
this.layerManager.layers.value.splice(topLayerIndex, 1, this.groupLayer);
|
||||
|
||||
@@ -288,7 +305,10 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
|
||||
await command.undo();
|
||||
console.log(`✅ 子命令撤销成功: ${command.constructor.name}`);
|
||||
} catch (error) {
|
||||
console.error(`❌ 子命令撤销失败: ${command.constructor.name}`, error);
|
||||
console.error(
|
||||
`❌ 子命令撤销失败: ${command.constructor.name}`,
|
||||
error
|
||||
);
|
||||
// 子命令撤销失败不中断整个撤销过程
|
||||
}
|
||||
}
|
||||
@@ -352,11 +372,16 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
|
||||
// 递归获取图层及其子图层的所有对象
|
||||
const collectLayerObjects = (currentLayer) => {
|
||||
// 处理图层的fabricObjects
|
||||
if (currentLayer.fabricObjects && Array.isArray(currentLayer.fabricObjects)) {
|
||||
if (
|
||||
currentLayer.fabricObjects &&
|
||||
Array.isArray(currentLayer.fabricObjects)
|
||||
) {
|
||||
currentLayer.fabricObjects.forEach((fabricRef) => {
|
||||
if (fabricRef && fabricRef.id) {
|
||||
// 从画布中查找真实的对象
|
||||
const realObject = canvasObjects.find((obj) => obj.id === fabricRef.id);
|
||||
const realObject = canvasObjects.find(
|
||||
(obj) => obj.id === fabricRef.id
|
||||
);
|
||||
if (realObject && realObject.visible) {
|
||||
objects.push(realObject);
|
||||
}
|
||||
@@ -366,7 +391,9 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
|
||||
|
||||
// 处理单个fabricObject（背景图层等）
|
||||
if (currentLayer.fabricObject && currentLayer.fabricObject.id) {
|
||||
const realObject = canvasObjects.find((obj) => obj.id === currentLayer.fabricObject.id);
|
||||
const realObject = canvasObjects.find(
|
||||
(obj) => obj.id === currentLayer.fabricObject.id
|
||||
);
|
||||
if (realObject && realObject.visible) {
|
||||
objects.push(realObject);
|
||||
}
|
||||
@@ -397,7 +424,11 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
|
||||
* @returns {String} 抠图结果的DataURL
|
||||
* @private
|
||||
*/
|
||||
async _performCutoutWithRasterized(sourceObjects, selectionObject, selectionBounds) {
|
||||
async _performCutoutWithRasterized(
|
||||
sourceObjects,
|
||||
selectionObject,
|
||||
selectionBounds
|
||||
) {
|
||||
try {
|
||||
console.log("=== 开始使用createRasterizedImage执行抠图 ===");
|
||||
console.log(`源对象数量: ${sourceObjects.length}`);
|
||||
@@ -436,7 +467,10 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
|
||||
|
||||
// 如果createRasterizedImage失败，回退到原始方法
|
||||
console.log("⚠️ 回退到原始抠图方法...");
|
||||
return await this._performCutout({ fabricObjects: sourceObjects }, selectionObject);
|
||||
return await this._performCutout(
|
||||
{ fabricObjects: sourceObjects },
|
||||
selectionObject
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -467,7 +501,9 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
|
||||
|
||||
try {
|
||||
// 收集源图层中的可见对象
|
||||
const visibleObjects = sourceLayer.fabricObjects.filter((obj) => obj.visible);
|
||||
const visibleObjects = sourceLayer.fabricObjects.filter(
|
||||
(obj) => obj.visible
|
||||
);
|
||||
|
||||
if (visibleObjects.length === 0) {
|
||||
throw new Error("源图层没有可见对象");
|
||||
@@ -520,7 +556,10 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
|
||||
let highResolutionScale = 1;
|
||||
if (this.highResolutionEnabled) {
|
||||
const devicePixelRatio = window.devicePixelRatio || 1;
|
||||
highResolutionScale = Math.max(this.baseResolutionScale, devicePixelRatio * 2);
|
||||
highResolutionScale = Math.max(
|
||||
this.baseResolutionScale,
|
||||
devicePixelRatio * 2
|
||||
);
|
||||
}
|
||||
|
||||
// 创建用于导出的高分辨率canvas
|
||||
@@ -531,8 +570,12 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
|
||||
colorSpace: "srgb",
|
||||
});
|
||||
|
||||
const actualWidth = Math.round(renderBounds.width * highResolutionScale);
|
||||
const actualHeight = Math.round(renderBounds.height * highResolutionScale);
|
||||
const actualWidth = Math.round(
|
||||
renderBounds.width * highResolutionScale
|
||||
);
|
||||
const actualHeight = Math.round(
|
||||
renderBounds.height * highResolutionScale
|
||||
);
|
||||
|
||||
exportCanvas.width = actualWidth;
|
||||
exportCanvas.height = actualHeight;
|
||||
@@ -741,14 +784,17 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
|
||||
}
|
||||
});
|
||||
} else if (objectType === "polygon") {
|
||||
fabric.Polygon.fromObject(this.serializedSelectionObject, (polygon) => {
|
||||
if (polygon) {
|
||||
console.log("多边形选区对象反序列化成功");
|
||||
resolve(polygon);
|
||||
} else {
|
||||
reject(new Error("多边形选区对象反序列化失败"));
|
||||
fabric.Polygon.fromObject(
|
||||
this.serializedSelectionObject,
|
||||
(polygon) => {
|
||||
if (polygon) {
|
||||
console.log("多边形选区对象反序列化成功");
|
||||
resolve(polygon);
|
||||
} else {
|
||||
reject(new Error("多边形选区对象反序列化失败"));
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
} else if (objectType === "rect") {
|
||||
fabric.Rect.fromObject(this.serializedSelectionObject, (rect) => {
|
||||
if (rect) {
|
||||
@@ -759,24 +805,30 @@ export class CutSelectionToNewLayerCommand extends CompositeCommand {
|
||||
}
|
||||
});
|
||||
} else if (objectType === "ellipse" || objectType === "circle") {
|
||||
fabric.Ellipse.fromObject(this.serializedSelectionObject, (ellipse) => {
|
||||
if (ellipse) {
|
||||
console.log("椭圆选区对象反序列化成功");
|
||||
resolve(ellipse);
|
||||
} else {
|
||||
reject(new Error("椭圆选区对象反序列化失败"));
|
||||
fabric.Ellipse.fromObject(
|
||||
this.serializedSelectionObject,
|
||||
(ellipse) => {
|
||||
if (ellipse) {
|
||||
console.log("椭圆选区对象反序列化成功");
|
||||
resolve(ellipse);
|
||||
} else {
|
||||
reject(new Error("椭圆选区对象反序列化失败"));
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
} else {
|
||||
// 通用对象反序列化
|
||||
fabric.util.enlivenObjects([this.serializedSelectionObject], (objects) => {
|
||||
if (objects && objects.length > 0) {
|
||||
console.log("通用选区对象反序列化成功");
|
||||
resolve(objects[0]);
|
||||
} else {
|
||||
reject(new Error("通用选区对象反序列化失败"));
|
||||
fabric.util.enlivenObjects(
|
||||
[this.serializedSelectionObject],
|
||||
(objects) => {
|
||||
if (objects && objects.length > 0) {
|
||||
console.log("通用选区对象反序列化成功");
|
||||
resolve(objects[0]);
|
||||
} else {
|
||||
reject(new Error("通用选区对象反序列化失败"));
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
|
||||
Reference in New Issue
Block a user