eSearch 贴图（Ding）功能完全指南：悬浮图片窗口、鼠标穿透与 CSS 变换实战

eSearch 贴图Ding功能完全指南悬浮图片窗口、鼠标穿透与 CSS 变换实战【免费下载链接】eSearch截屏 离线OCR 搜索翻译 以图搜图 贴图 录屏 万向滚动截屏 屏幕翻译 Screenshot Offline OCR Search Translate Search for picture Paste the picture on the screen Screen recorder Omnidirectional scrolling screenshot Screen translator 支持Windows Linux macOS项目地址: https://gitcode.com/GitHub_Trending/es/eSearch导读贴图Ding是 eSearch 中把截屏选区钉在屏幕上、变成可交互悬浮窗口的核心功能常用于资料对照、临时备注、屏幕翻译等场景。本文基于 docs/use/ding.md 完整讲解贴图的创建、工具栏操作、归位、悬浮条鼠标穿透、裁切放大与 CSS 变换并结合 ding 渲染进程源码 与主进程窗口管理源码 剖析其全屏透明窗口模拟贴图的实现原理与平台限制。读完本文你将能熟练操控贴图的透明度、大小、缩放、变换效果并理解如何在 macOS / Wayland 等受限平台上通过配置强制鼠标穿透。贴图是什么截屏后选取的区域可以变成一个独立的窗口常驻在屏幕上这就是贴图。贴图保留了图片内容但又不同于普通静态图片——它是可交互的鼠标在贴图上滚动滚轮即可缩放鼠标悬停时窗口顶部会弹出工具栏可以实时改变窗口透明度和大小可以再次编辑、最小化、归位和关闭贴图。从源码看贴图是 eSearch 中独立的渲染页面 ding.html由 ding.ts 驱动主进程负责创建承载贴图的窗口见 src/main/main.ts。快速上手如何创建一张贴图贴图通常由截屏流程进入主进程通过 IPC 消息clip_ding将图片与区域坐标交给贴图窗口src/main/main.ts。除了截屏后选择贴图还支持以下入口剪贴板贴图从剪贴板读取图片并直接贴图dingFromClipBoard可在设置中为剪贴板贴图绑定快捷键默认AltC见 src/main/main.ts工具快捷键设置中的工具快捷键 / 全局工具快捷键均包含ding项见 src/main/main.ts屏幕翻译屏幕翻译默认类型即ding翻译结果以贴图形式呈现见 src/main/main.ts。贴图创建时主进程会根据鼠标当前位置与图片尺寸计算初始位置和大小将图片转为 DataURL 后发送给渲染进程ding 函数渲染进程随后调用setNewDing在页面上绘制贴图元素ding.ts。贴图窗口交互工具栏与基本操作鼠标悬停到贴图窗口上时顶部会滑出工具栏对应源码中toolBarC的data-show切换见 ding.ts。工具栏从左到右依次是工具说明不透明度横向拖动实时调整图片透明度0%–100%见 ding.ts大小横向拖动按百分比缩放窗口最小限制为 5%见 ding.ts翻译对贴图执行 OCR 识别并翻译翻译结果以覆盖层绘制在图片上见 ding.ts编辑将贴图图片送回图片编辑器再次编辑edit 函数保存将贴图或翻译后的结果图保存为 PNG 文件save 函数复制把贴图图片写入系统剪贴板copy 函数最小化让贴图淡出并不可交互minimizeClass见 ding.ts归位将窗口恢复到最初的位置与大小关闭关闭该贴图除工具栏外还有这些便捷交互滚轮缩放在贴图上滚动滚轮按1 |deltaY| / 300的比例放大或缩小缩放下限为 5%见 ding.ts拖拽移动与边缘调整大小按住图片可整体拖动拖拽窗口四边/四角可等比调整大小鼠标在边缘 8px 内会显示对应方向的光标dire函数与cursor映射见 ding.ts双击默认执行归位可在设置中改为关闭见 ding.tsEsc 关闭贴图窗口聚焦时按Esc直接关闭见 ding.ts。归位归位可以让贴图窗口回到最开始创建时的位置和大小与原始截屏区域精准贴合以至于看不出屏幕上多了一个窗口——这在需要假装什么都没发生或反复对比原图时非常实用。实现上每个贴图创建时都会在dingData中记录初始矩形rect: [x, y, w, h]见 ding.ts。归位时先发送 IPC 消息渲染进程back2会把窗口过渡动画 400ms然后恢复到记录的初始坐标与大小并把透明度重置回 100%、图片缩放复位见 ding.ts。悬浮条与鼠标穿透屏幕左上角常驻一个竖向条形的悬浮提示条dock点击它可展开成宽 200px 的控制栏靠左或靠右展开取决于 dock 位置见 ding.ts。展开后可以看到所有贴图的缩略图列表每个条目提供点击缩略图最小化的贴图被还原否则执行归位窗口变换应用/取消变换鼠标穿透让该贴图忽略鼠标事件关闭关闭该贴图。dock 本身可以被拖动位置会持久化保存到配置项ding_dock见 ding.ts。鼠标穿透是贴图最有用的能力之一开启后贴图成为一个只可观看、不可交互的屏幕图案鼠标可以穿透它去操作底下的任何窗口。主进程会以 10ms 为周期轮询鼠标位置并通知渲染进程dingClickThrough渲染进程通过document.elementsFromPoint判断鼠标是否落在贴图上再通过dingIgnore消息反向控制窗口的setIgnoreMouseEvents见 ding.ts 与 main.ts。macOS 与 Wayland 的已知限制[!NOTE] macOS 和 Wayland 似乎不支持获取软件外鼠标位置这导致了贴图无法点击。可以在配置文件中贴图.强制鼠标穿透添加快捷键手动设置贴图是否可点击。这是全屏范围的如果你想点击其他界面需要再次使用快捷键。也就是说在这两个平台上自动判断鼠标是否悬停在贴图上不可靠贴图默认可能无法响应点击。解决办法是在配置文件中给贴图.强制鼠标穿透设置一个全局快捷键按下时在全屏范围内切换贴图可交互 / 鼠标穿透状态——注意这个开关是全局的想要点击贴图之外的其他界面时需要再按一次快捷键实现见 forceDingThrogh。裁切放大只放大图片而不改变窗口滚轮缩放会同步改变窗口大小但在需要放大观察贴图细节时变大的窗口反而会遮挡视线。eSearch 提供了裁切放大按住Ctrl再滚动滚轮此时只放大图片内容窗口大小保持不变放大后超出窗口的部分被裁切隐藏。这在源码中体现为resize函数的clip分支clip 模式下只调整图片元素.img的 left/top/width/height而窗口 div 尺寸不变同时当图片放大超过 1.5 倍时会启用image-rendering: pixelated避免放大后的图片过度模糊见 ding.ts。变换用 CSS 数字键快速切换在设置中添加变换列表后贴图窗口聚焦时按数字键1–9即可循环切换对应的变换效果源码中Number(e.key) - 1作为变换下标见 ding.ts。变换通过 CSStransform/filter属性实现按数字键会为图片元素切换/取消对应的 CSS 类tran0、tran1…见 ding.ts。官方文档给出的常见变换可直接复制到设置中使用效果css水平翻转transform: rotateY(180deg)竖直翻转transform: rotateX(180deg)灰度filter: grayscale(100%)反色filter: invert(100%)[!NOTE] filter 函数可以传入 svg 滤镜包括柏林噪音、转置滤镜等你可以参考 MDN transform 与 MDN filter 获取更多资料MDN 的 SVG filters 也提供了可组合的滤镜思路。设置界面中的窗口变换编辑器会提供实时预览用 logo 图片预览 CSS 效果并内嵌上述 MDN 参考链接见 setting.ts。贴图相关配置项一览贴图在默认配置中的完整结构见 src/main/main.ts贴图: { 窗口: { 变换: [transform: rotateY(180deg);], // 变换列表默认含水平翻转 双击: 归位, // 双击行为归位 | 关闭 提示: false, // 是否用阴影提示贴图窗口边界 }, 强制鼠标穿透: , // 全局快捷键如 ControlShiftD },对应设置页面设置 → 贴图见 setting.ts提供三个开关项双击设定双击窗口行为可选归位或关闭setting.ts窗口变换可增删排序的 CSS 变换列表带实时预览setting.ts提示开启后贴图窗口带阴影边框便于在复杂桌面上识别贴图边界setting.ts。实现原理一个全屏透明窗口模拟所有贴图文档明确说明实际上贴图窗口都是模拟出来的。在系统的视图列表里你会发现有一个覆盖整个屏幕的全屏窗口它显示所有贴图窗口其余区域完全透明。为什么这样做开发文档 给出了技术决策过程贴图需要置顶、可缩放、可移动、可调透明度、可鼠标穿透还要统一管理多张贴图含取消穿透。最初考虑为每张贴图单独创建BrowserWindow但存在两个硬伤——缩放时网页响应不及时且透明窗口在 Windows 下无法调节大小。因此最终方案是主进程为每一块显示器各创建一个透明、无边框、置顶、跳过任务栏的全屏BrowserWindowtransparent: true, frame: false, alwaysOnTop: true, skipTaskbar: true见 createDingWindow所有贴图通过 IPC 消息addDing注入到渲染页面的同一坐标系里绘制ding.ts为模拟真实窗口只有贴图所在区域接收鼠标事件其余区域鼠标穿透——由主进程定时轮询鼠标位置、渲染进程判断命中后反向控制窗口的setIgnoreMouseEvents完成见上文悬浮条与鼠标穿透一节。另外值得一提的是贴图的翻译能力点击工具栏翻译后渲染进程会先加载 OCR 引擎对图片做识别loadOCRocr见 ding.ts再用配置的翻译引擎逐段翻译最后把译文按原文的段落边框、行高、倾斜角度绘制到 Canvas 覆盖层上drawText/transAndDraw见 ding.ts——未配置翻译引擎时会明确提示未配置翻译引擎。小结贴图是 eSearch 截屏工作流中连接取图与用图的关键环节从创建、缩放、调透明度到归位、鼠标穿透、CSS 变换再到全屏透明窗口的实现机制理解这些交互与源码实现后你可以根据 docs/use/ding.md 与本文把贴图用出生产力——也能在 macOS / Wayland 上通过强制鼠标穿透快捷键绕开平台限制获得完整的贴图体验。【免费下载链接】eSearch截屏 离线OCR 搜索翻译 以图搜图 贴图 录屏 万向滚动截屏 屏幕翻译 Screenshot Offline OCR Search Translate Search for picture Paste the picture on the screen Screen recorder Omnidirectional scrolling screenshot Screen translator 支持Windows Linux macOS项目地址: https://gitcode.com/GitHub_Trending/es/eSearch创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考