fix: 优化画布背景层居中逻辑,确保在没有裁剪路径时自动居中

This commit is contained in:
bighuixiang
2025-07-25 21:38:23 +08:00
parent 0865f65949
commit 00ebd9c988

View File

@@ -448,6 +448,9 @@ export class CanvasManager {
// 获取背景对象
const backgroundObject = visibleObjects.find((obj) => obj.isBackground);
!this.canvas?.clipPath &&
this.centerBackgroundLayer(this.canvas.width, this.canvas.height);
this.canvas?.clipPath?.set?.({
left: this.width / 2,
top: this.height / 2,
@@ -1031,11 +1034,11 @@ export class CanvasManager {
// 重置视图变换以确保元素位置正确
this._resetViewportTransform(1);
let canvasClipPath = null;
// 克隆当前裁剪路径
if (this.canvas?.clipPath) {
canvasClipPath = this.canvas?.clipPath;
}
// let canvasClipPath = null;
// // 克隆当前裁剪路径
// if (this.canvas?.clipPath) {
// canvasClipPath = this.canvas?.clipPath;
// }
// 清除当前画布内容
// this.canvas.clear(); // 清除画布内容 可以先去掉 这样加载闪动的情况就比较少 如果有问题 可以再打开
@@ -1047,26 +1050,28 @@ export class CanvasManager {
// 清空重做栈
this.commandManager?.clear?.();
this.backgroundColor = parsedJson.backgroundColor || "#ffffff";
if (canvasClipPath) {
// canvasClipPath.set({
// absolutePositioned: true,
// });
this.canvas.clipPath = canvasClipPath;
// await new Promise((resolve) => {
// debugger;
// fabric.util.enlivenObjects([canvasClipPath], (clipPaths) => {
// if (clipPaths && clipPaths.length > 0) {
// resolve(clipPaths[0]);
// } else {
// resolve(null);
// }
// });
// });
// debugger;
}
// if (canvasClipPath) {
// // canvasClipPath.set({
// // absolutePositioned: true,
// // });
// this.canvas.clipPath = canvasClipPath;
// // await new Promise((resolve) => {
// // debugger;
// // fabric.util.enlivenObjects([canvasClipPath], (clipPaths) => {
// // if (clipPaths && clipPaths.length > 0) {
// // resolve(clipPaths[0]);
// // } else {
// // resolve(null);
// // }
// // });
// // });
// // debugger;
// }
try {
// 重置画布数据
this.setCanvasSize(this.canvas.width, this.canvas.height);
this.centerBackgroundLayer(this.canvas.width, this.canvas.height);
debugger;
// 重新构建对象关系
// restoreObjectLayerAssociations(this.layers.value, this.canvas.getObjects());
// 验证图层关联关系 - 稳定后可以注释