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


[TOC]


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


FLIPPED

FLIPPED
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

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


思路:

  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 submodulegit 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. 如何迭代中进行重构和封装?每次都因为什么?

解决方案


编译

依赖

  • 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 更多截图效果可 → 在此预览



作者

alt text : 我的主页 alt text : 好奇我的小窝
alt text : 直接和我聊天~ alt text :浏览量 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 学习,附学习由浅入深的目录