feat: 图片反转颜色功能

Author: Littlefean

app/src/core/service/controlService/shortcutKeysEngine/shortcutKeysRegister.tsx

@@ -11,7 +11,6 @@ import { PenStrokeMethods } from "@/core/stage/stageManager/basicMethods/PenStro
 import { ConnectableEntity } from "@/core/stage/stageObject/abstract/ConnectableEntity";
 import { MultiTargetUndirectedEdge } from "@/core/stage/stageObject/association/MutiTargetUndirectedEdge";
 import { CollisionBox } from "@/core/stage/stageObject/collisionBox/collisionBox";
-import { TextNode } from "@/core/stage/stageObject/entity/TextNode";
 import { activeProjectAtom, store } from "@/state";
 // import ColorWindow from "@/sub/ColorWindow";
 import FindWindow from "@/sub/FindWindow";
@@ -25,6 +24,8 @@ import { Rectangle } from "@graphif/shapes";
 import { toast } from "sonner";
 import { v4 } from "uuid";
 import { onNewDraft, onOpenFile } from "../../GlobalMenu";
+import { ImageNode } from "@/core/stage/stageObject/entity/ImageNode";
+import { TextNode } from "@/core/stage/stageObject/entity/TextNode";
 
 /**
  * 快捷键注册函数
@@ -581,7 +582,7 @@ export class KeyBindsRegistrar {
 
     // 做计划的功能
     await this.project.keyBinds.create("toggleCheckmarkOnTextNodes", "o k k", () => {
-      const selectedTextNodes = this.project.stageManager
+      const selectedTextNodes: TextNode[] = this.project.stageManager
         .getSelectedEntities()
         .filter((node) => node instanceof TextNode);
       for (const node of selectedTextNodes) {
@@ -596,6 +597,19 @@ export class KeyBindsRegistrar {
       this.project.stageManager.updateReferences();
     });
 
+    // 反转选中图片的颜色
+    await this.project.keyBinds.create("reverseImageColors", "r r r", () => {
+      const selectedImageNodes: ImageNode[] = this.project.stageManager
+        .getSelectedEntities()
+        .filter((node) => node instanceof ImageNode);
+      for (const node of selectedImageNodes) {
+        node.reverseColors();
+      }
+      if (selectedImageNodes.length > 0) {
+        toast(`已反转 ${selectedImageNodes.length} 张图片的颜色`);
+      }
+    });
+
     // 主题切换相关功能
     // 创建一个可以在非React环境中使用的setter函数
     const setTheme = (theme: string) => {

app/src/core/stage/stageObject/entity/ImageNode.tsx

@@ -120,4 +120,46 @@ export class ImageNode extends ConnectableEntity {
     this.collisionBox.shapes[0] = newRectangle;
     this.updateFatherSectionByMove();
   }
+
+  /**
+   * 反转图片颜色
+   * 将图片的RGB值转换为互补色（255-R, 255-G, 255-B）
+   */
+  reverseColors() {
+    if (!this.bitmap) return;
+
+    // 创建临时canvas
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // 设置canvas尺寸
+    canvas.width = this.bitmap.width;
+    canvas.height = this.bitmap.height;
+
+    // 绘制原图
+    ctx.drawImage(this.bitmap, 0, 0);
+
+    // 获取图像数据
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const data = imageData.data;
+
+    // 反转颜色（255-R, 255-G, 255-B）
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = 255 - data[i]; // R
+      data[i + 1] = 255 - data[i + 1]; // G
+      data[i + 2] = 255 - data[i + 2]; // B
+      // data[i + 3] 保持不变（alpha通道）
+    }
+
+    // 将修改后的图像数据绘制回canvas
+    ctx.putImageData(imageData, 0, 0);
+
+    // 创建新的ImageBitmap
+    createImageBitmap(imageData).then((newBitmap) => {
+      this.bitmap = newBitmap;
+      // 记录操作历史
+      this.project.historyManager.recordStep();
+    });
+  }
 }

app/src/locales/en.yml

@@ -1302,3 +1302,8 @@ visualSettingsGroup:
     title: Basic Settings
   background:
     title: Background Settings
+
+# Keybinds translation
+reverseImageColors:
+  title: Reverse Image Colors
+  description: Reverse the colors of selected images (makes white background black and vice versa)

app/src/locales/zh_CN.yml

@@ -1305,5 +1305,10 @@ keyBinds:
     title: 将选中的多个文本节点，挼ruá (合并)成一个文本节点，颜色也会取平均值
     description: 仅对文本节点生效，顺序按从上到下排列，节点的位置按节点矩形左上角顶点坐标为准
   swapTextAndDetails:
-    title: 详略交换
-    description: 将所有选中的文本节点的详细信息和实际内容进行交换，连按5次e，主要用于直接粘贴进来的文本内容想写入详细信息
+  title: 详略交换
+  description: 将所有选中的文本节点的详细信息和实际内容进行交换，连按5次e，主要用于直接粘贴进来的文本内容想写入详细信息
+
+# 快捷键翻译
+reverseImageColors:
+  title: 反转图片颜色
+  description: 反转选中图片的颜色（将白色背景变为黑色，反之亦然）

app/src/sub/SettingsWindow/keybinds.tsx

@@ -18,6 +18,7 @@ import {
   Brush,
   FileQuestion,
   Fullscreen,
+  Image,
   Keyboard,
   MousePointer,
   Move,
@@ -397,4 +398,5 @@ const shortcutKeysGroups: ShortcutKeysGroup[] = [
       "alignTopToBottomNoSpace",
     ],
   },
+  { title: "image", icon: <Image />, keys: ["reverseImageColors"] },
 ];