导出红绿图问题

This commit is contained in:
李志鹏
2025-12-17 14:49:17 +08:00
parent b52c96fa67
commit fd80e2d3c7
2 changed files with 11 additions and 17 deletions

View File

@@ -555,23 +555,17 @@ export class ExportManager {
);
}
// 获取固定图层对象的边界矩形(包含位置、尺寸、缩放等信息)
const fixedBounds = fixedLayerObject?.getBoundingRect?.();
// 使用固定图层的实际显示尺寸作为导出画布尺寸
const canvasWidth = Math.round(fixedBounds.width);
const canvasHeight = Math.round(fixedBounds.height);
const canvasWidth = Math.round(fixedLayerObject.width * fixedLayerObject.scaleX);
const canvasHeight = Math.round(fixedLayerObject.height * fixedLayerObject.scaleY);
console.log(`红绿图模式导出,画布尺寸: ${canvasWidth}x${canvasHeight}`);
console.log("固定图层边界:", fixedBounds);
// 创建固定尺寸的临时画布
const scaleFactor = 2; // 高清导出
const tempCanvas = document.createElement("canvas");
tempCanvas.width = canvasWidth * scaleFactor;
tempCanvas.height = canvasHeight * scaleFactor;
tempCanvas.style.width = canvasWidth + "px";
tempCanvas.style.height = canvasHeight + "px";
const tempFabricCanvas = new fabric.StaticCanvas(tempCanvas, {
width: canvasWidth,
@@ -584,8 +578,7 @@ export class ExportManager {
try {
// 获取裁剪路径对象(如果存在)
const clipPathObject = await this._getClipPathObject(fixedBounds);
const clipPathObject = await this._getClipPathObject(fixedLayerObject);
// 克隆并添加所有对象到临时画布,需要调整位置相对于固定图层
for (let i = 0; i < objectsToExport.length; i++) {
const obj = objectsToExport[i];
@@ -594,19 +587,20 @@ export class ExportManager {
restoreOpacityInRedGreen && true
);
if (cloned) {
// 调整对象位置:将原画布坐标转换为以固定图层为原点的相对坐标
cloned.set({
left: cloned.left - fixedBounds.left,
top: cloned.top - fixedBounds.top,
left: 0,
top: 0,
originX: "left",
originY: "top",
});
// 更新对象坐标
cloned.setCoords();
// 设置裁剪路径到对象
if (clipPathObject) {
cloned.clipPath = clipPathObject;
}
// if (clipPathObject) {
// cloned.clipPath = clipPathObject;
// }
tempFabricCanvas.add(cloned);
}