Qt 用画笔对图片实现马赛克效果

最近接了一个用 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;

最终效果