专栏首页jiajia_dengQt 用画笔对图片实现马赛克效果

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;

最终效果

Post Views: 16

相关

Warning: Missing argument 1 for cwppos_show_review(), called in /home/wwwroot/www.mycode.net.cn/wp-content/themes/flat/content-single.php on line 29 and defined in /home/wwwroot/www.mycode.net.cn/wp-content/plugins/wp-product-review/includes/legacy.php on line 18

Notice: Undefined variable: post_id in /home/wwwroot/www.mycode.net.cn/wp-content/plugins/wp-product-review/includes/legacy.php on line 20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 简洁、开源、功能强大的 PDF 阅读器 Sumatra PDF

    不得不感慨开源的力量。我用过挺多的 PDF 工具,最后都卸载掉了,直接用 Chrome 来查看,但是局限性还是比较大,最近看知乎一篇文章的时候看到了这个工具,工...

    我与梦想有个约会
  • 创建离线的 Visual Studio 2017 RC ISO 安装包

    从 www.visualstudio.com 下载的 VS2017RC 安装包只有离线版本的,搜索了一下网络上的资料,在微软的官网上找到了解决方案。地址:htt...

    我与梦想有个约会
  • sqlite 替换某字段关键字的 SQL 语句

    当我们需要批量把其中的路径从 E:\ 更换为 F:\ 的时候,就可以用到下面的方法:

    我与梦想有个约会
  • 速读原著-TCP/IP(窗口扩大选项)

    窗口扩大选项使T C P的窗口定义从16 bit增加为32 bit。这并不是通过修改T C P首部来实现的, T C P首部仍然使用 16 bit ,而是通过定...

    cwl_java
  • FTP:构建在TCP协议之上的文件传输协议

    在前几节我们辛苦完成了TCP协议的基本设计,我们的代码当然无法达到工业级要求,但是基本将TCP协议的要点表达出来,是一个”基本可用版本“。TCP协议类似于一条货...

    望月从良
  • 浏览器与服务器的消息通信

    最近工作中遇到一个场景,商家在商家后台需要实时的获取到有没有新订单,有的话是几个;这个需求类似与日常中使用QQ或者微信时的新信息提醒一样,只要有新信息就需要提醒...

    李海彬
  • 浏览器与服务器的消息通信

    最近工作中遇到一个场景,商家在商家后台需要实时的获取到有没有新订单,有的话是几个;这个需求类似与日常中使用QQ或者微信时的新信息提醒一样,只要有新信息就需要提醒...

    李海彬
  • 【Flink】Flink中的窗口函数、时间语义及watermark

    Flink 流应用程序处理的是以数据对象表示的事件流。所以在 Flink 内部,我们需要能够处理这些对象。它们需要被序列化和反序列化,以便通过网络传送它们;或者...

    魏晓蕾
  • 浏览器与服务器的消息通信

    最近工作中遇到一个场景,商家在商家后台需要实时的获取到有没有新订单,有的话是几个;这个需求类似与日常中使用QQ或者微信时的新信息提醒一样,只要有新信息就需要提醒...

    哲洛不闹
  • Webstorm配置babel将.js文件转换为es5

    最近编写工具站(Laravel + Vue.js【是引用.js文件,不是前端vue.js后端laravel】)的时候,写js的时候,是在不想写es5语法,比如写...

    无道

扫码关注云+社区

领取腾讯云代金券