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-21 01:17:25 +08:00
parent ba04930966
commit c756d7377f
9 changed files with 983 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/component/Canvas/CanvasEditor/commands/UpdateGroupMaskPositionCommand.js
View File

@@ -1,3 +1,4 @@
import { findObjectById } from "../utils/helper";
import { findLayerRecursively, isGroupLayer } from "../utils/layerHelper";
import { restoreFabricObject } from "../utils/objectHelper";
import { Command } from "./Command";
@@ -54,8 +55,12 @@ export class UpdateGroupMaskPositionCommand extends Command {
}) || this.target?.getBoundingRect?.(true, true);
this.originalSelectionPosition = {
left: this.isSginleObject ? this.target.left : this.activeSelection.left || 0,
top: this.isSginleObject ? this.target.top : this.activeSelection.top || 0,
left: this.isSginleObject
? this.target.left
: this.activeSelection.left || 0,
top: this.isSginleObject
? this.target.top
: this.activeSelection.top || 0,
};
console.log(
@@ -74,6 +79,21 @@ export class UpdateGroupMaskPositionCommand extends Command {
this.layer.clippingMask.left = newLeft;
this.layer.clippingMask.top = newTop;
if (this.layer.selectObject) {
// 如果有选区 则选区位置也要更新
this.layer.selectObject.left = this.layer.clippingMask.left;
this.layer.selectObject.top = this.layer.clippingMask.top;
const { object } = findObjectById(
this.canvas,
this.layer.selectObject?.id
);
object?.set({
left: this.layer.clippingMask.left,
top: this.layer.clippingMask.top,
});
object?.setCoords();
}
this.newMaskPosition = {
left: newLeft,
top: newTop,
@@ -112,6 +132,21 @@ export class UpdateGroupMaskPositionCommand extends Command {
layer.clippingMask.left = this.originalMaskPosition.left;
layer.clippingMask.top = this.originalMaskPosition.top;
if (this.layer.selectObject) {
// 如果有选区 则选区位置也要更新
this.layer.selectObject.left = this.originalMaskPosition.left;
this.layer.selectObject.top = this.originalMaskPosition.top;
const { object } = findObjectById(
this.canvas,
this.layer.selectObject?.id
);
object?.set({
left: this.originalMaskPosition.left,
top: this.originalMaskPosition.top,
});
object?.setCoords();
}
// 更新所有使用此遮罩的子图层对象
await this._updateChildObjectsClipPath(layer, true);
// await this.layerManager.updateLayersObjectsInteractivity();
@@ -147,6 +182,21 @@ export class UpdateGroupMaskPositionCommand extends Command {
layer.clippingMask.left = newLeft;
layer.clippingMask.top = newTop;
if (this.layer.selectObject) {
// 如果有选区 则选区位置也要更新
this.layer.selectObject.left = this.layer.clippingMask.left;
this.layer.selectObject.top = this.layer.clippingMask.top;
const { object } = findObjectById(
this.canvas,
this.layer.selectObject?.id
);
object?.set({
left: this.layer.clippingMask.left,
top: this.layer.clippingMask.top,
});
object?.setCoords();
}
// 更新所有使用此遮罩的子图层对象（不需要等待）
this._updateChildObjectsClipPath(layer);
@@ -173,7 +223,10 @@ export class UpdateGroupMaskPositionCommand extends Command {
try {
// 重新创建遮罩对象
const clippingMaskFabricObject = await restoreFabricObject(layer.clippingMask, this.canvas);
const clippingMaskFabricObject = await restoreFabricObject(
layer.clippingMask,
this.canvas
);
if (!clippingMaskFabricObject) {
console.warn("无法恢复遮罩对象");
@@ -192,7 +245,9 @@ export class UpdateGroupMaskPositionCommand extends Command {
layer.children.forEach((childLayer) => {
// 更新 fabricObjects 中的对象
childLayer.fabricObjects?.forEach((obj) => {
const fabricObject = this.canvas.getObjects().find((o) => o.id === obj.id);
const fabricObject = this.canvas
.getObjects()
.find((o) => o.id === obj.id);
if (fabricObject) {
fabricObject.clipPath = clippingMaskFabricObject;
fabricObject.dirty = true;
@@ -215,7 +270,9 @@ export class UpdateGroupMaskPositionCommand extends Command {
if (layer?.fill) {
// 更新组图层的填充颜色
const fabricObject = this.canvas.getObjects().find((o) => o.id === layer?.fill.id);
const fabricObject = this.canvas
.getObjects()
.find((o) => o.id === layer?.fill.id);
if (fabricObject) {
fabricObject.clipPath = clippingMaskFabricObject;
fabricObject.dirty = true;