From 636575d20fce4af29db5e08c4f7041ace5003bd4 Mon Sep 17 00:00:00 2001
From: alexxu <2996613775@qq.com>
Date: Thu, 1 May 2025 15:00:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20electron=E5=85=A8=E5=B1=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

当electron是全屏的时候，工具组件被Mac上面的标题栏给覆盖掉。
---
 README.md                                    | 25 ++++++++++++++++++++
 src/lib/main-entrance/PlugInParameters.ts    | 11 +++++++++
 src/lib/split-methods/SetPlugInParameters.ts |  5 ++++
 src/lib/type/ComponentType.ts                |  1 +
 src/main.ts                                  | 12 +++++++---
 5 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index aa15902..9243ead 100644
--- a/README.md
+++ b/README.md
@@ -148,7 +148,32 @@ export const doScreenShot = async ()=>{
 ```
 > 感谢 [@Vanisper](https://github.com/Vanisper) 提供的在electron环境下使用本插件的兼容思路。
 
+### 使用electron编写Mac软件。
+
+由于Mac上面有一个系统的标题栏，所以当我们的app在全屏的时候，工具栏会被Mac的标题栏给覆盖掉。如下图。
+
+需要添加一个参数
+
+```typescript
+  screenShotIns = new ScreenShot({
+    menuBarHeight: 22,  # Mac系统标题栏默认的高度
+  })
+```
+
+因为Mac os没有一个API可以获取到系统标题栏的高度。所以这里给几个建议值。【**可以根据项目的实际情况进行微调**】
+
+| 场景                                 | 菜单栏高度（逻辑像素）  | 说明                                                         |
+| ------------------------------------ | ----------------------- | ------------------------------------------------------------ |
+| 普通分辨率非 Retina 显示器           | 22pt                    | 最常见的标准高度                                             |
+| Retina 显示器                        | 22pt（实际像素是 44px） | Retina 显示器下缩放倍率为 2，视觉尺寸不变但像素是两倍        |
+| 开启「放大」/ 缩放显示（HiDPI 模式） | 24pt+                   | 使用「放大文本」或非原生分辨率时，系统会调整菜单栏高度       |
+| 刘海屏 MacBook（如 M1/M2 Pro）       | 24pt+                   | 刘海下菜单栏实际显示区域变高以避开摄像头（比如 macOS Monterey 开始） |
+| Accessibility 启用大字号             | 24pt+                   | 系统辅助功能或调整字体大小设置可能使菜单栏高度增加           |
+
+![截屏2025-05-01 14.37.38](https://mrxutuchuang.oss-cn-beijing.aliyuncs.com/%E6%88%AA%E5%B1%8F2025-05-01%2014.37.38.png)
+
 ### electron示例代码
+
 如果你看完上个章节的使用方法，依然不是很理解的话，这里准备了一份在electron环境下使用本插件的demo，请移步[electron-js-web-screen-shot-demo](https://github.com/Vanisper/electron-js-web-screen-shot-demo)。
 
 
diff --git a/src/lib/main-entrance/PlugInParameters.ts b/src/lib/main-entrance/PlugInParameters.ts
index b7f629e..b7ee05f 100644
--- a/src/lib/main-entrance/PlugInParameters.ts
+++ b/src/lib/main-entrance/PlugInParameters.ts
@@ -40,6 +40,7 @@ let h2cCrossImgLoadErrFn: screenShotType["h2cImgLoadErrCallback"] | null = null;
 let saveCallback: ((code: number, msg: string) => void) | null = null;
 let saveImgTitle: string | null = null;
 let canvasEvents: mouseEventType | null = null;
+let menuBarHeight = 0;
 
 export default class PlugInParameters {
   constructor() {
@@ -63,6 +64,7 @@ export default class PlugInParameters {
       destroyContainer = true;
       userToolbar = [];
       h2cCrossImgLoadErrFn = null;
+      menuBarHeight = 0;
     }
   }
 
@@ -149,6 +151,7 @@ export default class PlugInParameters {
   public setWriteImgState(state: boolean) {
     writeBase64 = state;
   }
+
   public getWriteImgState() {
     return writeBase64;
   }
@@ -246,4 +249,12 @@ export default class PlugInParameters {
   public getCanvasEvents() {
     return canvasEvents;
   }
+
+  public getMenuBarHeight() {
+    return menuBarHeight;
+  }
+
+  public setMenuBarHeight(val: number) {
+    menuBarHeight = val;
+  }
 }
diff --git a/src/lib/split-methods/SetPlugInParameters.ts b/src/lib/split-methods/SetPlugInParameters.ts
index c5ebe00..9fa221e 100644
--- a/src/lib/split-methods/SetPlugInParameters.ts
+++ b/src/lib/split-methods/SetPlugInParameters.ts
@@ -96,4 +96,9 @@ export function setPlugInParameters(options: screenShotType) {
   if (options?.canvasEvents) {
     plugInParameters.setCanvasEvents(options.canvasEvents);
   }
+
+  // 设置标题栏的高度
+  if (options?.menuBarHeight) {
+    plugInParameters.setMenuBarHeight(options?.menuBarHeight || 0);
+  }
 }
diff --git a/src/lib/type/ComponentType.ts b/src/lib/type/ComponentType.ts
index 9b80832..f7fabaa 100644
--- a/src/lib/type/ComponentType.ts
+++ b/src/lib/type/ComponentType.ts
@@ -172,4 +172,5 @@ export type screenShotType = {
   userToolbar?: Array<userToolbarType>; // 用户自定义的工具栏图标
   canvasEvents?: mouseEventType; // 截图画布的事件监听
   h2cIgnoreElementsCallback?: (element: Element) => boolean; // html2canvas模式需要忽略的元素回调
+  menuBarHeight?: number; // 菜单栏高度(针对electron中，全屏模式下)
 };
diff --git a/src/main.ts b/src/main.ts
index 1b983fd..769e86a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -968,13 +968,19 @@ export default class ScreenShot {
       this.placement,
       this.position
     );
-    const containerHeight = this.screenShotContainer.height / this.dpr;
-
+    const containerHeight =
+      this.screenShotContainer.height / this.dpr -
+      this.plugInParameters.getMenuBarHeight();
+    console.log(
+      containerHeight,
+      "abcdefg",
+      this.plugInParameters.getMenuBarHeight()
+    );
     // 工具栏的位置超出截图容器时，调整工具栏位置防止超出
     if (toolLocation.mouseY > containerHeight - 64) {
       toolLocation.mouseY -= this.drawGraphPosition.height + 64;
       // 超出屏幕顶部时
-      if (toolLocation.mouseY < 0) {
+      if (toolLocation.mouseY - this.plugInParameters.getMenuBarHeight() < 0) {
         const containerHeight = parseInt(this.screenShotContainer.style.height);
         toolLocation.mouseY = containerHeight - this.fullScreenDiffHeight;
       }