Qt 之 截图功能进阶（四）截图时显示当前截图信息

一、简述

在 Qt 之 简单截图功能（三）实现可拖拽选中区域 中 实现了截图的基本功能，今天讲述的是在选取截图区域时，实时显示当前的截图信息，具体仿照了QQ的截图功能。

先看一下效果图：

---

在放大图窗口要超出下方屏幕时更改显示位置。

二、代码之路

这里主要是在paintEvent事件中绘制截图信息 ， 关于截图功能的代码可以查看 Qt 之 简单截图功能（三）实现可拖拽选中区域。

仿照QQ截图功能，在截图时 实时捕获当前截取区域的大小，同时显示鼠标位置区域的放大图，这里为什么QQ要放大鼠标拖动点区域，也是因为能够更精确地截取到我们实际想要的部分。

在放大图片下方显示了窗口大小信息，而左上角也显示截取区域大小，这个感觉上可能有点多余。实际则不是，因为我们在截图时一般留意的是截图区域的右下方，也就是鼠标当前的位置，所以这里显示了当前截取的大小，更利于我们查看。我们也可以在放大图下方看到当前鼠标位置图片的RGB值。这一个小功能非常好，我们在日常要取某个颜色时，就能直接利用此功能。

比如我之前模仿QQ登录界面，一些背景色的RGB取值都是利用QQ的截图功能获取到，所以功能虽小，但确是十分好用。

// 矩形选中区边框宽度;#define SELECT_RECT_BORDER_WIDTH                1// 选中矩形8个拖拽点小矩形的宽高;#define STRETCH_RECT_WIDTH                      6#define STRETCH_RECT_HEIGHT                     6// 选中矩形信息矩形的宽高;#define SELECT_RECT_INFO_WIDTH                  75#define SELECT_RECT_INFO_HEIGHT                 20// 选区矩形的右下顶点放大图的宽高;#define END_POINT_RECT_WIDTH                    122#define END_POINT_RECT_HEIGHT                   122#define END_POINT_IMAGE_HEIGHT                  90// 绘制选中矩形信息;void CaptureScreen::drawSelectRectInfo(){    int posX, posY;    QPoint topLeftPoint = m_currentSelectRect.topLeft();    posX = topLeftPoint.x() + SELECT_RECT_BORDER_WIDTH;    if (topLeftPoint.y() > SELECT_RECT_INFO_HEIGHT)    {        posY = topLeftPoint.y() - SELECT_RECT_INFO_HEIGHT - SELECT_RECT_BORDER_WIDTH;    }    else    {        posY = topLeftPoint.y() + SELECT_RECT_BORDER_WIDTH;    }    topLeftPoint = QPoint(posX, posY);    QColor backColor = QColor(0, 0, 0, 160);    m_painter.fillRect(QRect(topLeftPoint, QSize(SELECT_RECT_INFO_WIDTH, SELECT_RECT_INFO_HEIGHT)), backColor);    // 当前选中矩形的宽高信息;    QString selectRectSizeInfo = QString("%1 * %2").arg(m_currentSelectRect.width()).arg(m_currentSelectRect.height());    int fontWidth = this->fontMetrics().width(selectRectSizeInfo);    m_painter.setPen(QPen(Qt::white));      m_painter.drawText(QPoint(topLeftPoint.x() + (SELECT_RECT_INFO_WIDTH - fontWidth) / 2, topLeftPoint.y() + 14), selectRectSizeInfo);}// 绘制鼠标拖拽时选区矩形的右下顶点的放大图;void CaptureScreen::drawEndPointImage(){    int posX, posY;    QPoint topLeftPoint = QCursor::pos();    // 5、25 分别为鼠标所在点距离放大图的X轴、Y轴距离;    //当放大图片区域超出右边屏幕时;    if (topLeftPoint.x() + END_POINT_RECT_WIDTH + 5 > m_screenwidth)    {        // 这里暂时未考虑到双屏幕（多屏幕）;        if (topLeftPoint.x() > m_screenwidth)        {            posX = m_screenwidth - END_POINT_RECT_WIDTH - 5;        }        else        {            posX = topLeftPoint.x() - END_POINT_RECT_WIDTH - 5;        }           }    else    {        posX = topLeftPoint.x() + 5;    }    // 当放大图片区域超出屏幕下方时;    if (topLeftPoint.y() + END_POINT_RECT_HEIGHT + 25 > m_screenheight)    {        posY = topLeftPoint.y() - END_POINT_RECT_HEIGHT - 25;    }    // 当鼠标未屏幕下方，正常显示时;    else    {        posY = topLeftPoint.y() + 25;    }    topLeftPoint = QPoint(posX, posY);    // 绘制放大图;    QPixmap endPointImage = m_loadPixmap.copy(QRect(QCursor::pos().x() - 15, QCursor::pos().y() - 11, 30, 22)).scaled(END_POINT_RECT_WIDTH, END_POINT_IMAGE_HEIGHT);    m_painter.drawPixmap(topLeftPoint, endPointImage);    // 绘制十字坐标;    m_painter.setPen(QPen(QColor(0, 180, 255 , 180), 4));    // 竖线;    m_painter.drawLine(QPoint(topLeftPoint.x() + END_POINT_RECT_WIDTH / 2, topLeftPoint.y() + 2), QPoint(topLeftPoint.x() + END_POINT_RECT_WIDTH / 2, topLeftPoint.y() + END_POINT_IMAGE_HEIGHT - 2));    // 横线;    m_painter.drawLine(QPoint(topLeftPoint.x() + 2 , topLeftPoint.y() + END_POINT_IMAGE_HEIGHT / 2), QPoint(topLeftPoint.x() + END_POINT_RECT_WIDTH - 2 , topLeftPoint.y() + END_POINT_IMAGE_HEIGHT / 2));    m_painter.setPen(QPen(Qt::white, 3));    m_painter.drawRect(QRect(QPoint(topLeftPoint.x() + 1 , topLeftPoint.y() + 1), QSize(END_POINT_RECT_WIDTH - 2, END_POINT_IMAGE_HEIGHT - 2)));    m_painter.setPen(QPen(Qt::black, 1));    m_painter.drawRect(QRect(topLeftPoint, QSize(END_POINT_RECT_WIDTH, END_POINT_IMAGE_HEIGHT)));    // 绘制放大图信息;    topLeftPoint = QPoint(topLeftPoint.x(), topLeftPoint.y() + END_POINT_IMAGE_HEIGHT);    QColor backColor = QColor(0, 0, 0, 160);    m_painter.fillRect(QRect(topLeftPoint, QSize(END_POINT_RECT_WIDTH, END_POINT_RECT_HEIGHT - END_POINT_IMAGE_HEIGHT)), backColor);    // 当前选中矩形的宽高信息;    QString selectRectSizeInfo = QString("%1 * %2").arg(m_currentSelectRect.width()).arg(m_currentSelectRect.height());    QImage image = m_loadPixmap.toImage();    QColor endPointColor = image.pixel(QCursor::pos());    QString selectPointRGBInfo = QString("RGB:(%1,%2,%3)").arg(endPointColor.red()).arg(endPointColor.green()).arg(endPointColor.blue());    m_painter.setPen(Qt::white);    m_painter.drawText(QPoint(topLeftPoint.x() + 6, topLeftPoint.y() + 14), selectRectSizeInfo);    m_painter.drawText(QPoint(topLeftPoint.x() + 6, topLeftPoint.y() + 27), selectPointRGBInfo);}

---

尾

以上通过两个方法完成了在截图时在屏幕上绘制截图信息，这两个功能虽小，但是在截图的使用过程中却起到了很大的作用。同时我们也不仅仅可以用来截图，比如上方我提到的在模仿QQ界面时，获取某一种颜色的RGB值，也可以获取某个窗口或者窗口控件、屏幕上图片、文字等具体大小。

---

—— 更新于2017年1月23日