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

feat: 优化选区编辑+修复部分bug

Browse Source
This commit is contained in:
bighuixiang
2025-06-30 18:05:20 +08:00
parent 4a95f27966
commit 2e20b9c3c1
5 changed files with 208 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/component/Canvas/CanvasEditor/commands/BackgroundCommands.js
View File

@@ -137,6 +137,10 @@ export class UpdateBackgroundCommand extends Command {
// 查找背景图层
this.bgLayer = this.layers.value.find((layer) => layer.isBackground);
this.oldBackgroundColor = this.bgLayer.backgroundColor;
this.backgroundObject = findObjectById(
this.canvas,
this.bgLayer.fabricObject.id
).object;
}
execute() {
@@ -149,12 +153,9 @@ export class UpdateBackgroundCommand extends Command {
this.bgLayer.backgroundColor = this.backgroundColor;
// 更新背景对象属性
if (this.bgLayer.fabricObject) {
const { object } = findObjectById(
this.canvas,
this.bgLayer.fabricObject.id
);
object.set("fill", this.backgroundColor);
if (this.backgroundObject) {
// const { object } = findObjectById(this.canvas, this.backgroundObject.id);
this.backgroundObject.set("fill", this.backgroundColor);
this.canvas.renderAll();
}
this.backgroundColorValue.value = this.backgroundColor; // 设置背景颜色
@@ -170,12 +171,9 @@ export class UpdateBackgroundCommand extends Command {
this.bgLayer.backgroundColor = this.oldBackgroundColor;
// 恢复背景对象属性
if (this.bgLayer.fabricObject) {
const { object } = findObjectById(
this.canvas,
this.bgLayer.fabricObject.id
);
object.set("fill", this.oldBackgroundColor);
if (this.backgroundObject) {
// const { object } = findObjectById(this.canvas, this.backgroundObject.id);
this.backgroundObject.set("fill", this.oldBackgroundColor);
this.canvas.renderAll();
}
this.backgroundColorValue.value = this.oldBackgroundColor; // 恢复背景颜色
@@ -212,8 +210,13 @@ export class BackgroundSizeCommand extends Command {
this.bgLayer = this.layers.value.find((layer) => layer.isBackground);
// 记录原尺寸
this.oldWidth = this.bgLayer.fabricObject.width;
this.oldHeight = this.bgLayer.fabricObject.height;
this.backgroundObject = findObjectById(
this.canvas,
this.bgLayer.fabricObject.id
).object;
this.oldWidth = this.backgroundObject.width;
this.oldHeight = this.backgroundObject.height;
// 查找背景图层
this.bgLayer = this.layers.value.find((layer) => layer.isBackground);
@@ -221,30 +224,28 @@ export class BackgroundSizeCommand extends Command {
execute() {
// 调整画布大小
this.canvas.setWidth(this.newWidth);
this.canvas.setHeight(this.newHeight);
// this.canvas.setWidth(this.newWidth);
// this.canvas.setHeight(this.newHeight);
console.log(
`调整画布大小：${this.oldWidth}x${this.oldHeight} -> ${this.newWidth}x${this.newHeight}`
);
// 如果使用 CanvasManager，通知它画布大小变化
if (
this.canvasManager &&
typeof this.canvasManager.updateCanvasSize === "function"
) {
this.canvasManager.updateCanvasSize(this.newWidth, this.newHeight);
}
// if (
// this.canvasManager &&
// typeof this.canvasManager.updateCanvasSize === "function"
// ) {
// this.canvasManager.updateCanvasSize(this.newWidth, this.newHeight);
// }
// 调整背景对象大小
if (this.bgLayer && this.bgLayer.fabricObject) {
if (this.bgLayer && this.backgroundObject) {
// 保持原有的背景颜色，如果没有设置则使用白色
const currentFill =
this.bgLayer.fabricObject.fill ||
this.bgLayer.backgroundColor ||
"#ffffff";
this.backgroundObject.fill || this.bgLayer.backgroundColor || "#ffffff";
this.bgLayer.fabricObject.set({
this.backgroundObject.set({
width: this.newWidth,
height: this.newHeight,
fill: currentFill, // 保持原有颜色
@@ -267,16 +268,16 @@ export class BackgroundSizeCommand extends Command {
this.canvas.setHeight(this.oldHeight);
// 如果使用 CanvasManager，通知它画布大小恢复
if (
this.canvasManager &&
typeof this.canvasManager.updateCanvasSize === "function"
) {
this.canvasManager.updateCanvasSize(this.oldWidth, this.oldHeight);
}
// if (
// this.canvasManager &&
// typeof this.canvasManager.updateCanvasSize === "function"
// ) {
// this.canvasManager.updateCanvasSize(this.oldWidth, this.oldHeight);
// }
// 恢复背景对象大小
if (this.bgLayer && this.bgLayer.fabricObject) {
this.bgLayer.fabricObject.set({
if (this.bgLayer && this.backgroundObject) {
this.backgroundObject.set({
width: this.oldWidth,
height: this.oldHeight,
});
@@ -329,6 +330,11 @@ export class BackgroundSizeWithScaleCommand extends Command {
// 查找背景图层
this.bgLayer = this.layers.value.find((layer) => layer.isBackground);
this.backgroundObject = findObjectById(
this.canvas,
this.bgLayer.fabricObject.id
).object;
// 计算缩放比例
const scaleXRatio = this.newWidth / this.oldWidth;
const scaleYRatio = this.newHeight / this.oldHeight;
@@ -433,26 +439,24 @@ export class BackgroundSizeWithScaleCommand extends Command {
this.canvas.setHeight(this.newHeight);
// 如果使用 CanvasManager，通知它画布大小变化
if (
this.canvasManager &&
typeof this.canvasManager.updateCanvasSize === "function"
) {
this.canvasManager.updateCanvasSize(this.newWidth, this.newHeight);
}
// if (
// this.canvasManager &&
// typeof this.canvasManager.updateCanvasSize === "function"
// ) {
// this.canvasManager.updateCanvasSize(this.newWidth, this.newHeight);
// }
// 调整背景对象大小和位置
if (this.bgLayer && this.bgLayer.fabricObject) {
if (this.bgLayer && this.backgroundObject) {
// 保持原有的背景颜色，如果没有设置则使用白色
const currentFill =
this.bgLayer.fabricObject.fill ||
this.bgLayer.backgroundColor ||
"#ffffff";
this.backgroundObject.fill || this.bgLayer.backgroundColor || "#ffffff";
this.bgLayer.fabricObject.set({
this.backgroundObject.set({
width: this.newWidth,
height: this.newHeight,
left: this.newWidth / 2,
top: this.newHeight / 2,
left: this.canvas.width / 2,
top: this.canvas.height / 2,
fill: currentFill, // 保持原有颜色
});
@@ -528,12 +532,12 @@ export class BackgroundSizeWithScaleCommand extends Command {
}
// 恢复背景对象大小和位置
if (this.bgLayer && this.bgLayer.fabricObject) {
this.bgLayer.fabricObject.set({
if (this.bgLayer && this.backgroundObject) {
this.backgroundObject.set({
width: this.oldWidth,
height: this.oldHeight,
left: this.oldWidth / 2,
top: this.oldHeight / 2,
left: this.canvas.width / 2,
top: this.canvas.height / 2,
});
// 恢复图层记录的尺寸