feat: 增加狙击镜反向遮罩的功能

Littlefean · Littlefean · commit 3fc563481c5e · 2025-11-09T23:52:01.000+08:00
diff --git a/app/src/core/render/canvas2d/renderer.tsx b/app/src/core/render/canvas2d/renderer.tsx
@@ -9,6 +9,7 @@ import { getTextSize } from "@/utils/font";
 import { isFrame, isMac } from "@/utils/platform";
 import { Color, mixColors, Vector } from "@graphif/data-structures";
 import { CubicBezierCurve, Rectangle } from "@graphif/shapes";
+import { GlobalMaskRenderer } from "./utilsRenderer/globalMaskRenderer";
 
 /**
  * 渲染器
@@ -87,23 +88,7 @@ export class Renderer {
     this.renderMainStageElements(viewRectangle);
 
     // 潜行模式 - 只显示鼠标周围的一个圆形区域
-    if (Settings.isStealthModeEnabled) {
-      const ctx = this.project.canvas.ctx;
-      // 设置合成模式为目标输入模式
-      ctx.globalCompositeOperation = "destination-in";
-      // 获取鼠标位置
-      const mouseX = MouseLocation.x;
-      const mouseY = MouseLocation.y;
-      // 获取潜行模式半径
-      const scopeRadius = Settings.stealthModeScopeRadius;
-      // 绘制圆形区域
-      ctx.beginPath();
-      ctx.arc(mouseX, mouseY, scopeRadius, 0, Math.PI * 2);
-      ctx.fillStyle = "rgba(0, 0, 0, 1)"; // 设置填充颜色为完全不透明的黑色
-      ctx.fill();
-      // 恢复合成模式
-      ctx.globalCompositeOperation = "source-over";
-    }
+    GlobalMaskRenderer.renderCircleMask(this.project, MouseLocation, Settings.stealthModeReverseMask);
 
     this.renderViewElements(viewRectangle);
   }
diff --git a/app/src/core/render/canvas2d/utilsRenderer/globalMaskRenderer.tsx b/app/src/core/render/canvas2d/utilsRenderer/globalMaskRenderer.tsx
@@ -0,0 +1,70 @@
+import { Project } from "@/core/Project";
+import { Settings } from "@/core/service/Settings";
+
+/**
+ * 全局遮罩渲染器
+ */
+export namespace GlobalMaskRenderer {
+  /**
+   * 渲染鼠标位置的圆形遮罩
+   * @param project
+   * @param mouseLocation
+   * @param reverse
+   */
+  export function renderCircleMask(project: Project, mouseLocation: { x: number; y: number }, reverse = false) {
+    if (Settings.isStealthModeEnabled) {
+      const ctx = project.canvas.ctx;
+      // 设置合成模式为目标输入模式
+      if (reverse) {
+        ctx.globalCompositeOperation = "destination-out";
+      } else {
+        ctx.globalCompositeOperation = "destination-in";
+      }
+      // 获取鼠标位置
+      const mouseX = mouseLocation.x;
+      const mouseY = mouseLocation.y;
+      // 获取潜行模式半径
+      const scopeRadius = Settings.stealthModeScopeRadius;
+      // 绘制圆形区域
+      ctx.beginPath();
+      ctx.arc(mouseX, mouseY, scopeRadius, 0, Math.PI * 2);
+      ctx.fillStyle = "rgba(0, 0, 0, 1)"; // 设置填充颜色为完全不透明的黑色
+      ctx.fill();
+      // 恢复合成模式
+      ctx.globalCompositeOperation = "source-over";
+    }
+  }
+
+  /**
+   * 渲染鼠标位置的正方形遮罩
+   * @param project
+   * @param mouseLocation
+   * @param reverse
+   */
+  export function renderSquareMask(project: Project, mouseLocation: { x: number; y: number }, reverse = false) {
+    if (Settings.isStealthModeEnabled) {
+      const ctx = project.canvas.ctx;
+      // 设置合成模式为目标输入模式
+      if (reverse) {
+        ctx.globalCompositeOperation = "destination-out";
+      } else {
+        ctx.globalCompositeOperation = "destination-in";
+      }
+      // 获取鼠标位置
+      const mouseX = mouseLocation.x;
+      const mouseY = mouseLocation.y;
+      // 获取潜行模式半径作为正方形边长
+      const sideLength = Settings.stealthModeScopeRadius;
+      // 计算正方形左上角坐标（以鼠标位置为中心）
+      const squareX = mouseX - sideLength / 2;
+      const squareY = mouseY - sideLength / 2;
+      // 绘制正方形区域
+      ctx.beginPath();
+      ctx.rect(squareX, squareY, sideLength, sideLength);
+      ctx.fillStyle = "rgba(0, 0, 0, 1)"; // 设置填充颜色为完全不透明的黑色
+      ctx.fill();
+      // 恢复合成模式
+      ctx.globalCompositeOperation = "source-over";
+    }
+  }
+}
diff --git a/app/src/core/service/GlobalMenu.tsx b/app/src/core/service/GlobalMenu.tsx
@@ -974,6 +974,19 @@ export function GlobalMenu() {
                 <CircleDot />
                 {activeProject ? <span>开启/关闭狙击镜</span> : "请先打开工程文件才能使用此功能"}
               </Item>
+              <Item
+                disabled={!activeProject}
+                onClick={() => {
+                  Settings.stealthModeReverseMask = !Settings.stealthModeReverseMask;
+                }}
+              >
+                <CircleDot />
+                {activeProject ? (
+                  <span>{Settings.stealthModeReverseMask ? "关闭" : "开启"}反向遮罩</span>
+                ) : (
+                  "请先打开工程文件才能使用此功能"
+                )}
+              </Item>
               <Item
                 disabled={!activeProject}
                 onClick={() => {
diff --git a/app/src/core/service/Settings.tsx b/app/src/core/service/Settings.tsx
@@ -159,6 +159,7 @@ export const settingsSchema = z.object({
   historyManagerMode: z.union([z.literal("memoryEfficient"), z.literal("timeEfficient")]).default("timeEfficient"),
   isStealthModeEnabled: z.boolean().default(false),
   stealthModeScopeRadius: z.number().min(10).max(500).int().default(150),
+  stealthModeReverseMask: z.boolean().default(false),
   clearHistoryWhenManualSave: z.boolean().default(true),
   soundPitchVariationRange: z.number().min(0).max(1200).int().default(150),
 });
diff --git a/app/src/core/service/SettingsIcons.tsx b/app/src/core/service/SettingsIcons.tsx
@@ -7,6 +7,7 @@ import {
   Bug,
   Calculator,
   CaseSensitive,
+  CircleDot,
   Columns4,
   Crosshair,
   Database,
@@ -153,6 +154,7 @@ export const settingsIcons = {
   enableRightClickConnect: MousePointerClick,
   isStealthModeEnabled: Crosshair,
   stealthModeScopeRadius: ScanEye,
+  stealthModeReverseMask: CircleDot,
   clearHistoryWhenManualSave: Undo,
   historyManagerMode: Undo,
   soundPitchVariationRange: ListMusic,
diff --git a/app/src/locales/en.yml b/app/src/locales/en.yml
@@ -498,6 +498,10 @@ settings:
     title: Stealth Mode Scope Radius
     description: |
       The radius of the stealth mode scope.
+  stealthModeReverseMask:
+    title: Reverse Mask
+    description: |
+      When enabled, the center area of the scope will be masked, only showing the surrounding area.
 
   # Sounds
   cuttingLineStartSoundFile:
diff --git a/app/src/locales/zh_CN.yml b/app/src/locales/zh_CN.yml
@@ -734,6 +734,10 @@ settings:
     title: 潜行模式范围半径
     description: |
       狙击镜的半径
+  stealthModeReverseMask:
+    title: 反向遮罩
+    description: |
+      开启后，狙击镜中心区域会被遮罩，只显示周围区域
   soundPitchVariationRange:
     title: 音效音调随机变化范围
     description: 控制音效播放时音调随机变化的程度。范围：0-1200音分（1200音分=1个八度，100音分=1个半音）。值越大，音调变化越明显。
diff --git a/app/src/locales/zh_TW.yml b/app/src/locales/zh_TW.yml
@@ -551,6 +551,10 @@ settings:
     title: 潜行模式范围半径
     description: |
       狙击镜的半径
+  stealthModeReverseMask:
+    title: 反向遮罩
+    description: |
+      開啟後，狙擊鏡中心區域會被遮罩，只顯示周圍區域
   soundPitchVariationRange:
     title: 音效音調随机變化範圍
     description: 控制音效播放時音調隨機變化的程度。範圍：0-1200音分（1200音分=1個八度，100音分=1個半音）。值越大，音調變化越明顯。
diff --git a/app/src/sub/SettingsWindow/settings.tsx b/app/src/sub/SettingsWindow/settings.tsx
@@ -212,6 +212,7 @@ const categories = {
       "showBackgroundCartesian",
       "isStealthModeEnabled",
       "stealthModeScopeRadius",
+      "stealthModeReverseMask",
     ],
     node: ["enableTagTextNodesBigDisplay", "showTextNodeBorder"],
     edge: ["lineStyle"],
