基于 QT 开发的 FLIPPED 一款简易且漂亮的跨平台截图软件

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

[TOC]

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

FLIPPED

Simple and beautiful cross-platform screenshot software.

运行预览

视频演示

截图演示

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。

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

思路：

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

细节打磨

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

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

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

实际问题

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

解决方案

『解决』愿编程不再乱码(含Qt)-根因深究
『解决』 Git Submodule 基本用法
『解决』从 LOG 分析调研，采用 Spdlog / QDebug，以及对此两套的宏封装
『解决』有很多，后抽空整理更多
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/Flipped.git
cd Flipped
mkdir build & cd build
cmake ..
make -j16

运行效果

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

作者

: 我的主页	: 好奇我的小窝
: 直接和我聊天~	：浏览量 100W+

贡献者

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

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

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

反馈 & 贡献

非常欢迎你的加入！对于此软件有任何缺陷、建议、功能想法、都可提一个 Issue ；或者帮助此项目的完善，提交一个 Pull Request。请遵循 Contributor Covenant 行为规范。

下载安装包

→ **离线安装包下载 Releases **

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

系列地址

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

ExCMake 欢迎 star ⭐ 和 fork 🍴这个系列的 CMake 学习，附学习由浅入深的目录

FLIPPED

FLIPPED

Simple and beautiful cross-platform screenshot software.

相关文章

运行预览

视频演示

截图演示

特性

快捷键

架构思路

细节打磨

实际问题

解决方案

编译

依赖

Windows

MacOS / Linux

运行效果

作者

贡献者

反馈 & 贡献

下载安装包

系列地址