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

导出红绿图问题

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/component/Canvas/CanvasEditor/index.vue
View File

@@ -902,7 +902,7 @@ const changeCanvas = async (command) => {
...command, // 传递完整的命令数据 ...command, // 传递完整的命令数据
}; };
emit("changeCanvas", commandData); emit("changeCanvas", commandData);
if (command.canUndo || command.canRedo) { if ((command.canUndo || command.canRedo) && props.enabledRedGreenMode) {
setTimeout(async () => { setTimeout(async () => {
const imageData = await canvasManager.exportImage({ const imageData = await canvasManager.exportImage({
restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度 restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度

26
src/component/Canvas/CanvasEditor/managers/ExportManager.js
View File

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