简 述: 新开发的一款跨平台的截图贴图的软件作品， FLIPPED：Simple and beautiful cross-platform screenshot software。

本文初发于 “偕臧的小站”，同步转载于此。

FLIPPED

运行预览

视频演示

• [P1] FLIPPED-MACOS 运行演示
• [P2] FLIPPED-WINDOWS 运行演示
• [P3] FLIPPED-LINUX 运行演示

截图演示

MACOS


WINDOWS


LINUX

特性

• 贴图（钉图）
• 多屏截图，延时截图，自定义截图
• 智能识别窗口矩形（Windows & Linux）
• 矩形、椭圆、箭头、画笔、马赛克、文本、序号
• 撤销、重做（多级）、保存、取消、拷贝到剪切板
• 截图框样式三套，且主题色提供自定义；屏幕十字线样式自定义
• 国际化：英文、简体中文、繁体中文；字体和字号自定义

快捷键

按键	描述	模式
←, ↓, ↑, → ( A, S, W, D )	移动选中框位置 1 像素	局部
Ctrl + ←, ↓, ↑, →	扩展选中框尺寸 1 像素	局部
Alt + ←, ↓, ↑, →	收缩选中框尺寸 1 像素	局部
Shift + ←, ↓, ↑, →	移动选中框位置 10 像素	局部
Shift + Ctrl + ←, ↓, ↑, →	扩展选中框尺寸 10 像素	局部
Shift + Alt + ←, ↓, ↑, →	收缩选中框尺寸 01 像素	局部
Shift + F4	快速保存截图	局部
Esc	退出	局部
F6	窗口智能截图	全局
F7	延时截图	全局
F8	全屏截图	全局

架构思路

技术架构属初看觉着很简单，耗时几天就能写一个 Demo 级的截图，如很早写的 ShotX。

但后来心心念念，准备正式写一个具有高级/商业的软件时候，就属于有点规模。其属细节点超级多；

思路

1. 创建一个 QWidget 窗口，去掉标题栏后，全屏且置顶
2. 捕获此刻多屏幕状态保存为 QPixamp，然后绘画在 QWidget 最底层
3. 再绘画一层透明黑色作为遮罩
4. 将 QWidget 放于虚拟桌面的左上角；后面注意相对坐标和绝对坐标的转换
5. 判断当前所处模式：Wait / Select / Move / Draw / Stretch，标记
6. 根据模式标记，对鼠标的 Press / Move / Release 事件进行对应的操作；重点是鼠标放下和松开时的 QPoint
   • 捕获模式：智能窗口 / 全屏截图 / 延时截图 / 自定义截图 等
   • 绘画模式则细分：一级绘画栏和二级绘画栏（愈加精确的参数）
   • 拉伸可为：拉伸已绘图形 / 选中框 / … ，操作是可见区域的任意一个图案
   • 移动同上类似
7. 重复迭代步骤 6，进行标注等功能
8. 导出图片保存到本机路径 / 剪切板。
9. 亦可直接贴图（钉住）在屏幕上，然后进行缩放和透明度等操作，作为写作时的参照。

细节打磨

写的时候，保证开发过程的多平台编译，push 代码时触发构建 CI/CD， 及生成对应平台的包便于安装。

截图的工作量、尤其是细节的实现是挺多的。需要花时间来打磨产品和优化细节，让它成为美观又好用的一款软件，再造一个极佳的轮子。

绝知此事要躬行；列举开发过程中遇到的具体困境，以供后来者参考。

实际问题

1. FLIPPED 开发在不同系统上、使用不同的 Kit Tools 上面均不会乱码？
2. 项目使用第三方开源库时，选择 git submodule 还 git treemodule 命令呢？
3. 选用何种 LOG 会性能和成本最佳？便于后面定位和分析
4. CMake 管理跨平台项目，生各平台的 IDE 的解决方案
5. Window 上自带一些基础宏的数据类型含义？
6. 项目运行直接显示后，按键盘无响应的定位和解决。
7. Qt 控件显示的方块 ■◆ 乱码？
8. Linux 如何构建打包为 .deb 文件？
9. Window 如何构建一件安装的 .exe? 书写构建的脚本？
10. ----------------------------------- 更多进阶细节问题----------------------------------
11. 如何实现一个完美的无边框窗口（跨平台）？
12. 如何实现一个完美的透明磨砂效果（跨平台）？
13. Windows 和 Linux 支持一次截多个屏幕，MacOS 没有对应接口，如何实现呢？
14. 如何书写 .yml 的脚本，构建私人的 CI/CD 呢？
15. Window / Linux / MacOS 下如何获取所有窗口的位置和尺寸，以及其它更多信息呢？
16. 如何实现国际化 I18N？尤其是未使用 Qt Designer 创建 .ui 文件，遇到无 ui->retranslateUi(this) 函数？
17. 如何解决快捷键 和 Action 调用不同截图？
18. 如何确保 MacOS 上的效果和 Window上面保持外观的一致？
19. 如何解决使用 ESC 取消截图后的内存泄露问题？QPointer 、智能指针、还是单例？
20. 对于使用单例模式不止一处时，可采用奇异玄幻模板？
21. 代码如何更好的解耦和是适当位置，采用适当的设计模式？
22. 如何绘制自己的独有的控件？
23. 如何迭代中进行重构和封装？每次都因为什么？
24. …

解决方案

• 『解决』 愿编程不再乱码(含Qt)-根因深究

• 『解决』 Git Submodule 基本用法

• 『解决』从 LOG 分析调研，采用 Spdlog / QDebug，以及对此两套的宏封装

  • Log：日志选型调研『一』
  • Log：日志之 Spdlog 极简用法示范『二』
  • Log：日志之 Spdlog 核心构成『三』

• 『解决』有很多，后抽空整理更多

  1. CMake 设置 Target 输出目录和后缀名
  2. CMake 之 BUILD_SHARED_LIBS 和 CMAKE_BUILD_TYPE 用法教程

• 『解决』 LPSTR/LPCSTR/LPTSTR/HWND/HANDLE/HMODULE/HINSTANCE 等含义和区别

• 『解决』 参考

  • Qt 新弹窗不响应键盘按键，难道也是无焦点？
  • Windows 编程之 WINUSERAPI 和 WINAPI 区别

• 『解决』还是 Qt Assistant 解围粗心， 创建 QKeySequenceEdit() 后，显示方块■◆乱码

• 『解决』 Linux 中用 dh_make 将 Qt + CMake 项目打包为 deb 文件

• 『解决』构建的自动打包

  

• 『解决』未完待续…

编译

依赖

• Qt >= 5.15.2

• CMake >= 3.16

• MSVC >= 2019 | MinGW >= 8.1.0 | GCC >= 9.4 | Clang >= 12.0

  备注: 这是已经成功编译的一些版本，在更低的版本未经过测试。

Windows

• 工具链: Windows 10 & Qt 5.15.2 & CMake 3.24.1 & MSVC 2019 ( or MinGW 8.1.0)

• 编译步骤:

  # ******************** MSVC 2019 ********************
  #『Step1』
  # x86:
  # 添加 "C:\Qt\5.15.2\msvc2019\bin" 到 path 后，终端执行 echo %PATH% 使其立即生效
  "C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\VC\Auxiliary\Build\vcvarsall.bat" x86
  cmake -G "Visual Studio 16 2019" -A Win32 ..
  devenv Flipped.sln /Build "Release|Win32"# x64:
  # 添加 "C:\Qt\5.15.2\msvc2019_64\bin" 到 path 后，终端执行 echo %PATH% 使其立即生效
  "C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional\VC\Auxiliary\Build\vcvarsall.bat" x64
  cmake -G "Visual Studio 16 2019" -A x64 ..
  devenv Flipped.sln /Build "Release|x64"#『Step2』
  Visual Studio 2019 open `Flipped.sln`#『Step3』
  windeployqt  bin/Flipped.exe --no-translations# ******************** MinGW 8.1.0 ********************
  QtCreator opens the `CMakeLists.txt` file in the root directory of the source code
  

MacOS / Linux

• 工具链:

  • MacOS: MacOS 10.15 & Qt 5.15.2 & CMake 3.24 & Clang 12.0
  • Linux: Ubuntu 20.04 & Qt 5.15.2 & CMake 3.24 & GCC 9.4

• 编译步骤:

  git clone --recursive https://github.com/XMuli/xxxxx.git
  cd Flipped
  mkdir build & cd build
  cmake ..
  make -j16
  

运行效果

构建各个平台后的包，附上另外一些实际运行图。Other 更多截图效果可 → 在此预览

作者

GitHub 偕臧 → XMuli

贡献者

若是帮助到了你，或者觉得有用，可以点击该项目的的 ⭐Star 和🍴 Fork 的两个图标，方便抬手之间，表示点个赞，手有余香，其次才是一份冰的肥宅快乐水。 → project-flipped

当然也可以赠与一杯冰阔落[捐赠/打赏 ← 点击展开二维码]

- 若是此项目帮助到了你，或者觉得有用，或是想帮助此项目的发展，你也能够邀请我喝一杯杯肥仔快乐水。 -

反馈

非常欢迎你的加入！对于此软件有任何缺陷、建议、功能想法、都可 提一个 Issue ；

下载安装包

→ 离线安装包下载 Releases

→ 反馈 BUG/SUGGEST，用户社区等，和最新版本安装包获取，在QQ群:418103279

系列地址

QtExamples 欢迎 star ⭐ 和 fork 🍴这个系列的 C++ / QT / DTK 学习，附学习由浅入深的目录