最近接了一个用 Qt 做跨平台截图工具的任务,主要功能有截图、绘制图案、马赛克、毛玻璃、文字能效果,其中马赛克功能时参考网上的文献并自己研究制作出来的,这里特意给大家分享一下。有需要的朋友可以作为借鉴。

实现原理

首先要开始实现之前,我们首先要来说一下我自己实现马赛克功能的原理。

  1. 为了可以执行撤销操作,我们不能直接对图片进行修改。将图片附加到窗口上以后,需要在窗口上覆盖一层透明的窗口,在这个窗口使用画笔等工具来绘制马赛克,覆盖后面的图片来实现一个视觉效果,最终保存的时候将图片和透明窗口上绘制的数据合并得到一个绘制了马赛克效果的图片。
  2. 对窗口进行区块划分,比如当我们想让每个马赛克的块大小是 10px,那么我们以图片左上角为 0,0 点,给图片划分成一块一块 10px*10px 的小块。
  3. 当鼠标点击透明窗口的某个区域时要到实际后面图片的响应坐标取这个坐标对应像素的颜色值(QColor),如果条件允许可以将这个坐标周围的色值也都取出来做一个颜色混合得到平均的颜色色彩。
  4. 计算当前坐标对应的 10px10px 小块的起始点坐标,然后根据已经取出来的颜色绘制一个 10px10px 像素的方块。
  5. 鼠标移动过程中时时计算坐标,如果当前鼠标所在坐标已经绘制了一个图形那么不再绘制,如果没有绘制则重复 3、4 步。

大体步骤就是这样的,接下来我们来拆分每一个步骤的实现方式。

实现细节

这个透明窗口派生于 QWidget 类,在构造函数中设置窗口为透明的,这样在我们将绘制的马赛克和图片混合的时候就不会有窗口背景色了。

// 让窗口背景透明,在获取窗口绘制的数据时不显示背景色
setAttribute(Qt::WA_TranslucentBackground, true);

对窗口划分区域并根据鼠标得出马赛克绘制方块。在绘制前你要监听鼠标在窗口上按下、弹起、移动等消息,在鼠标按下前,我们要先初始化一个 image 对象来提供我们获取颜色,并根据图片大小初始化一个坐标数组,比如我们有一个 100*100 的图片,想让马赛克的大小是 10 像素,那么我们就要将这个图片宽和高都划分为 10 个 10 像素的小方块。记录下所有图片的像素坐标点。

// 将截取的未知转为 iamge 对象,用来获取坐标像素的颜色
image_ = originPainting_->toImage();
// 初始化每个像素点的坐标位置,鼠标移动过程中记录坐标并通过数组下标
// 直接访问到数据查看某个区块是否已经被绘制上了马赛克。
pointArray.reset(new QVector<QVector<bool>>);
pointArray->resize(parentWidget()->width());
for (int i = 0; i < parentWidget()->width(); i++) {
    // 高度像素
    (*pointArray)[i].resize(parentWidget()->height());
}
for (int i = 0; i < parentWidget()->width(); i++) {
    for (int j = 0; j < parentWidget()->height(); j++) {
        (*pointArray)[i][j] = false;
    }
}

在按下的时候根据背景图像取像素的点,计算并记录像素坐标点归属那一块我们划分出来的小方块:

int x = endPoint_.x() - endPoint_.x() % mosaicSize_;
int y = endPoint_.y() - endPoint_.y() % mosaicSize_;

if (x < 0) x = 0;
if (y < 0) y = 0;

// 防止越界崩溃
if (x > pointArray->size() - mosaicSize_ ||
    y > (*pointArray)[0].size() - mosaicSize_) {
    break;
}

if ((*pointArray)[x][y] == false) {
    (*pointArray)[x][y] = true;

    MosaicData mosaic;

    // 为适配 retina 屏幕从全屏界面中取像素颜色
    QColor color = image_.pixel(realX, realY);

    QPen pen;
    pen.setColor(color);

    mosaic.color_ = color;
    mosaic.pen_ = pen;
    mosaic.point_ = { x, y };

    drawMosaic_.push_back(mosaic);
}

鼠标移动的时候同样走上面的流程,记录下鼠标移动的所有的坐标。此时在透明窗口的 paintEvent 中,你已经可以根据 drawMosaic_ 里面记录的坐标开始绘制一个一个 mosaicSize_ 大小的小方块了。最后在保存图片的时候,你可以先将透明窗口图片保存为一个 pixmap,然后将 pixmap 合并到图片中就可以了。

QRect imageRect = CommonHelper::getRetinaRect(currentRect_);

// 创建一副空背景图片
QImage resultImg = QImage(imageRect.width(), imageRect.height(), QImage::Format_ARGB32);
std::shared_ptr<QPainter> painter;
painter.reset(new QPainter(&resultImg));

// 先绘制截图的内容
painter->drawPixmap(QRect(0, 0, imageRect.width(), imageRect.height()), *originPainting_, imageRect);

// 再绘制图形数据
for (auto window : drawItemList_) {
    // 跳过空文本窗体
    if (window->getDrawModel() == DrawUnit::MODEL::Text && window->getDrawText().size() == 0) {
        continue;
    }

    // 获取窗口数据到 pixmap 中
    QPixmap pixmap = window->grab();
    // 获取窗口实际大小
    QRect windowRect = window->rect();
    // retina 兼容
    QRect windowImageRect = CommonHelper::getRetinaRect(windowRect);

    painter->drawPixmap(QRect(currentRect_.width() - windowRect.width(), currentRect_.height() - windowRect.height(),
        windowImageRect.width(), windowImageRect.height()), pixmap, windowImageRect);

    window->close();
}

return resultImg;

最终效果

下载

离线安装包:http://download.qt.io/archive/qt/5.11/5.11.1/

安装

安装过程中设置好路径,安装选项中记得勾选 Source 和 MinGW 5.3.0 32bit。

初始化

用终端(Windows 下 cmd)进入你安装的 Qt\Qt5.11.1\5.11.1\Src 目录下,执行如下命令。请注意 -prefix "D:\Documents\Qt\Qt5.11.1_MinGW_Static" 参数,这里指定了最终生成的静态编译文件的位置,最后一步 mingw32-make install 的时候会复制文件到这个目录下。

Configure.bat -confirm-license -opensource -platform win32-g++ -mp -debug-and-release -static -prefix "D:\Documents\Qt\Qt5.11.1_MinGW_Static" -qt-sqlite -qt-zlib -qt-libpng -qt-libjpeg -opengl desktop -qt-freetype -no-qml-debug -no-angle -nomake tests -nomake examples

编译

执行如下命令开始编译,-j8 代表使用 8 个线程,根据你 CPU 的情况而定。大概编译时间 2 – 3 小时。

mingw32-make -j8

安装

会复制到你之前设置的 -prefix "D:\Documents\Qt\Qt5.11.1_MinGW_Static" 目录下。

mingw32-make install

配置 Qt

打开 Qt Creator 增加静态库配置,打开工具->选项菜单,进入构建和运行->Qt Versions 选项卡。添加你刚才编译好的静态库目录下的 qmake.exe。

添加完成后切换到构建和套件选项卡,接着添加一个构建套件,注意调试器、编译器什么的都要选择好,不然无法使用:

静态编译项目

打开你的项目在项目设置中就能看到可以使用的静态构建套件了。

配置好静态编译的构建套件后,项目下方就可以选择这个套件来生成项目了。

当有多个信号函数(Signal)绑定同一个槽函数(Slot)时,你会有这样的需求,在槽函数中我希望知道到底是哪个信号函数发送出来的信号,这样根据不同的发送者来执行不同的操作。想实现这个功能可以在槽函数中调用 sender() 方法获取发送信号的对象类型。然后进行处理,具体代码如下:

继续阅读

信号和槽是 Qt 独有的一种机制,他让窗口的各种消息处理简化到极致,常规情况下我们相应某窗口(控件)的点击时都需要自己投递消息到框架中,由框架的消息队列投递给不同的窗口消息处理函数来处理。如果使用信号和槽,需要声明信号、定义槽函数、绑定信号和槽、发射信号就可以完成上述功能,代码简单容易理解,逻辑简单易懂。信号和槽的大致实现图如下:继续阅读

键盘消息和鼠标消息没有什么差异,用法和覆写方法都差不多,可以通过传递的参数判断按下了哪些键,下面代码中有比较详细的示例。其中也介绍了一下定时器消息,当覆写一个定时器消息时,你需要调用 QWidget 的成员函数 startTimer 来启动定时器,它的参数是定时器多长时间运行一次,并且如果有多个定时器时,你还需要知道每个定时器的 ID 是多少,定时器消息因为哪个定时器触发了而运行。这些都在例子中有所体现。

继续阅读

在继承了 QWidget 窗口类以后,我们可以实现很多父类提供的虚函数,其中就包括鼠标的诸多消息处理函数,比如 mousePressEvent(鼠标单击消息)、mouseReleaseEvent(鼠标弹起消息)等等,这些虚函数我们可以通过 Qt 的帮助文档查看,如下:

继续阅读

QString 是 Qt 内部的一种字符串数据类型,QString 支持多字节编码(unicode)的一个字符串类。在程序和网络之间传输数据时,其他的程序和网络另一端的程序是不能识别他这种数据类型的。所以要想将 QString 类型的数据保存到文件或发送到网络,需要转换成 QByteArray 类型才可以。继续阅读

与 stl 和 boost 库中的链表差不多,都有我们常见的属性,如at、push_back、push_front、erase 等等,操作与我们以前学习过的都大相径庭,所以我只贴出代码,有更多需要可以参考 Qt 帮助文档。下面只是 QList 的代码,其实你把里面 QList 的关键字替换成 QVector 就可以切换成数组形式了。这是 Qt 对为了让大家更方便的使用,所以让接口风格装都保持一致性,只不过在遍历时,vector使用at方法要比遍历链表速度快。

继续阅读