🐛 导出png时防止渲染坐标轴

Author: Littlefean

app/src/core/service/dataGenerateService/stageExportEngine/StageExportPng.tsx

@@ -1,11 +1,12 @@
+import { appScale } from "../../../../utils/platform";
 import { sleep } from "../../../../utils/sleep";
 import { Vector } from "../../../dataStruct/Vector";
 import { Renderer } from "../../../render/canvas2d/renderer";
 import { Camera } from "../../../stage/Camera";
 import { Canvas } from "../../../stage/Canvas";
 import { StageManager } from "../../../stage/stageManager/StageManager";
 import { StageStyleManager } from "../../feedbackService/stageStyle/StageStyleManager";
-import { appScale } from "../../../../utils/platform";
+import { Settings } from "../../Settings";
 
 export namespace StageExportPng {
   /**
@@ -30,7 +31,7 @@ export namespace StageExportPng {
   /**
    * 将整个舞台导出为png图片
    */
-  export async function exportStage() {
+  async function exportStage_() {
     // 创建一个新的画布
     const resultCanvas = generateCanvasNode();
     const resultCtx = resultCanvas.getContext("2d")!;
@@ -53,9 +54,9 @@ export namespace StageExportPng {
     for (let y = topLeft.y; y <= bottomRight.y; y += viewRect.size.y) {
       for (let x = topLeft.x; x <= bottomRight.x; x += viewRect.size.x) {
         // 先移动再暂停等待
-        await sleep(200);
+        await sleep(50);
         Camera.location = new Vector(x + viewRect.size.x / 2, y + viewRect.size.y / 2);
-        await sleep(200);
+        await sleep(50);
         const imageData = Canvas.ctx.getImageData(0, 0, viewRect.size.x * SCALE, viewRect.size.y * SCALE);
         resultCtx.putImageData(
           imageData,
@@ -75,6 +76,39 @@ export namespace StageExportPng {
     }
   }
 
+  export async function exportStage() {
+    // 背景网格信息
+    const showBackgroundCartesian = await Settings.get("showBackgroundCartesian");
+    Settings.set("showBackgroundCartesian", false);
+    const showBackgroundDots = await Settings.get("showBackgroundDots");
+    Settings.set("showBackgroundDots", false);
+    const showBackgroundHorizontalLines = await Settings.get("showBackgroundHorizontalLines");
+    Settings.set("showBackgroundHorizontalLines", false);
+    const showBackgroundVerticalLines = await Settings.get("showBackgroundVerticalLines");
+    Settings.set("showBackgroundVerticalLines", false);
+
+    // 渲染问题
+    const isPauseRenderWhenManipulateOvertime = await Settings.get("isPauseRenderWhenManipulateOvertime");
+    Settings.set("isPauseRenderWhenManipulateOvertime", false);
+    // 先记录摄像机信息
+    const cameraLocation = Camera.location.clone();
+    const cameraTargetLocation = Camera.targetLocationByScale.clone();
+    const cameraScale = Camera.currentScale;
+    // 开始渲染
+    await exportStage_();
+    // 恢复摄像机信息
+    Camera.location = cameraLocation;
+    Camera.targetLocationByScale = cameraTargetLocation;
+    Camera.currentScale = cameraScale;
+
+    // 背景网格信息
+    Settings.set("showBackgroundCartesian", showBackgroundCartesian);
+    Settings.set("showBackgroundDots", showBackgroundDots);
+    Settings.set("showBackgroundHorizontalLines", showBackgroundHorizontalLines);
+    Settings.set("showBackgroundVerticalLines", showBackgroundVerticalLines);
+    Settings.set("isPauseRenderWhenManipulateOvertime", isPauseRenderWhenManipulateOvertime);
+  }
+
   export function generateCanvasNode(): HTMLCanvasElement {
     const resultCanvas = document.createElement("canvas");
     resultCanvas.style.position = "fixed";

app/src/pages/_fixed_panel/_export_png_panel.tsx

@@ -1,13 +1,13 @@
-import { useEffect, useState } from "react";
-import { isExportPNGPanelOpenAtom } from "../../state";
 import { useAtom } from "jotai";
-import { cn } from "../../utils/cn";
+import { Download, RefreshCcw } from "lucide-react";
+import { useEffect, useState } from "react";
 import Button from "../../components/Button";
+import { Dialog } from "../../components/dialog";
 import { StageExportPng } from "../../core/service/dataGenerateService/stageExportEngine/StageExportPng";
 import { Camera } from "../../core/stage/Camera";
-import { Dialog } from "../../components/dialog";
-import { Download, RefreshCcw } from "lucide-react";
 import { Stage } from "../../core/stage/Stage";
+import { isExportPNGPanelOpenAtom } from "../../state";
+import { cn } from "../../utils/cn";
 import { PathString } from "../../utils/pathString";
 
 /**
@@ -104,6 +104,11 @@ export default function ExportPNGPanel() {
           下载当前图片
         </Button>
       </div>
+      <div>
+        <p className="text-panel-details-text text-xs">
+          渲染图片时，会逐个拼接小块，需要等待若干秒才能完成渲染，摄像机缩放比率越大，渲染时间越长，画面分辨率越高
+        </p>
+      </div>
       {/* 关闭按钮 */}
       <button
         className="absolute right-0 top-0 rounded bg-red-500 px-4 py-2 font-bold text-white hover:bg-red-700"