QT实现图片缩放的同时随意框选区域并保存截图

最新推荐文章于 2025-06-05 16:51:54 发布
最新推荐文章于 2025-06-05 16:51:54 发布
阅读量4.4k 收藏 37
点赞数 4
CC 4.0 BY-SA版权
分类专栏： QT 文章标签： qt绘制缩放矩形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43935474/article/details/99546087
本文介绍在QT中自定义myGraphicRectItem类，实现图片上的矩形框绘制、拉伸、缩放和拖动功能。通过鼠标事件判断用户操作，支持不同状态下的光标变化，提供保存框选截图的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这篇文章是基于我之前写的文章《QT下实现图片的自适应显示、缩放（以鼠标位置为中心进行缩放）、拖动、以及重置》https://blog.youkuaiyun.com/weixin_43935474/article/details/89327314#comments
之前的文章里说过自己重写了QGraphicsItem类（自己的类命名为ImageWidget），从而实现的图片的缩放，拖动，及重置显示。
这篇文章里主要新写了一个myGraphicRectItem类，还是继承自QGraphicsItem类，用来实现：
1.在图像显示区域绘制矩形框
2.鼠标点击矩形的任意一条边可进行矩形的拉伸，同时鼠标样式更改
3.鼠标点击矩形右下角并拖动可进行矩形的缩放
4.鼠标按住矩形内区域并移动可拖动矩形
在这里插入图片描述
myGraphicRectItem.h代码如下：

#ifndef MYGRAPHICRECTITEM_H
#define MYGRAPHICRECTITEM_H
#include <QObject>
#include <QWidget>
#include <QMouseEvent>
#include <QGraphicsScene>
#include <QGraphicsRectItem>
#include <QGraphicsSceneMouseEvent>
#include <QRect>
#include <QPainter>
enum STATE_FLAG{
    DEFAULT_FLAG=0,
    MOV_LEFT_LINE,//标记当前为用户按下矩形的左边界区域
    MOV_TOP_LINE,//标记当前为用户按下矩形的上边界区域
    MOV_RIGHT_LINE,//标记当前为用户按下矩形的右边界区域
    MOV_BOTTOM_LINE,//标记当前为用户按下矩形的下边界区域
    MOV_RIGHTBOTTOM_RECT,//标记当前为用户按下矩形的右下角
    MOV_RECT//标记当前为鼠标拖动图片移动状态
};
class myGraphicRectItem:public QObject,public QGraphicsItem
{
    Q_OBJECT
public:
    myGraphicRectItem(QGraphicsItem *parent = nullptr);
    //myGraphicRectItem(QRectF m_OriginRect = QRectF(0,0,100,100));
    QRectF  boundingRect() const;
    ~myGraphicRectItem();
    void setRectSize(QRectF mrect);
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);
    void mousePressEvent(QGraphicsSceneMouseEvent *event);
    void mouseMoveEvent(QGraphicsSceneMouseEvent *event);
    void mouseReleaseEvent(QGraphicsSceneMouseEvent *event);
    QRectF getCrtPosRectToSceen();
private:
    QRectF  m_oldRect;
    bool    m_bResize;
    QRectF  m_insicedRectf;
    QRectF  m_leftRectf;
    QRectF  m_topRectf;
    QRectF  m_rightRectf;
    QRectF  m_bottomRectf;
    QRectF  m_rbRectf;
    QPointF m_startPos;
    STATE_FLAG m_StateFlag;
protected:
};
#endif // MYGRAPHICRECTITEM_H

myGraphicRectItem.cpp

#include "mygraphicrectitem.h"

myGraphicRectItem::myGraphicRectItem(QGraphicsItem *parent):
    m_bResize(false),
    m_oldRect(QRectF(0,0,100,100)),
    m_StateFlag(DEFAULT_FLAG)
{
    m_insicedRectf = QRectF(m_oldRect.x()+4,m_oldRect.y()+4,m_oldRect.width()-8,m_oldRect.height()-8);
    m_leftRectf = QRectF(m_oldRect.x(),m_oldRect.y(),4,m_oldRect.height()-4);
    m_topRectf = QRectF(m_oldRect.x()+4,m_oldRect.y(),m_oldRect.width()-4,4);
    m_rightRectf = QRectF(m_oldRect.right()-4,m_oldRect.y()+4,4,m_oldRect.height()-8);
    m_bottomRectf = QRectF(m_oldRect.x(),m_oldRect.bottom()-4,m_oldRect.width()-4,4);
    m_rbRectf = QRectF(m_oldRect.right()-4,m_oldRect.bottom()-4,4,4);
    setToolTip("Click and drag me!");  //提示
    setCursor(Qt::ArrowCursor);   //改变光标形状,手的形状
    setFlag(QGraphicsItem::ItemIsMovable);
    //    setAcceptDrops(true);
}

QRectF myGraphicRectItem::boundingRect() const
{
    return QRectF(m_oldRect);
}

myGraphicRectItem::~myGraphicRectItem()
{

}

void myGraphicRectItem::setRectSize(QRectF mrect)
{
        m_oldRect = mrect;
        m_insicedRectf = QRectF(m_oldRect.x()+4,m_oldRect.y()+4,m_oldRect.width()-8,m_oldRect.height()-8);
        m_leftRectf = QRectF(m_oldRect.x(),m_oldRect.y(),4,m_oldRect.height()-4);
        m_topRectf = QRectF(m_oldRect.x()+4,m_oldRect.y(),m_oldRect.width()-4,4);
        m_rightRectf = QRectF(m_oldRect.right()-4,m_oldRect.y()+4,4,m_oldRect.height()-8);
        m_bottomRectf = QRectF(m_oldRect.x(),m_oldRect.bottom()-4,m_oldRect.width()-4,4);
        m_rbRectf = QRectF(m_oldRect.right()-4,m_oldRect.bottom()-4,4,4);
}

void myGraphicRectItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    QPen mPen = QPen(Qt::yellow);
    painter->setPen(mPen);
    painter->drawRect(m_oldRect);
}

void myGraphicRectItem::mousePressEvent(QGraphicsSceneMouseEvent *event)
{
    if(event->button()== Qt::LeftButton)
    {
        m_startPos = event->pos();//鼠标左击时，获取当前鼠标在图片中的坐标，
        if(m_insicedRectf.contains(m_startPos))//在矩形内框区域时按下鼠标，则可拖动图片
        {
            setCursor(Qt::ArrowCursor);   //改变光标形状,手的形状
            m_StateFlag = MOV_RECT;//标记当前为鼠标拖动图片移动状态
        }
        else if(m_leftRectf.contains(m_startPos))
        {
            setCursor(Qt::SizeHorCursor);
            m_StateFlag = MOV_LEFT_LINE;//标记当前为用户按下矩形的左边界区域
        }
        else if(m_rightRectf.contains(m_startPos))
        {
            setCursor(Qt::SizeHorCursor);
            m_StateFlag = MOV_RIGHT_LINE;//标记当前为用户按下矩形的右边界区域
        }
        else if(m_topRectf.contains(m_startPos))
        {
            setCursor(Qt::SizeVerCursor);
            m_StateFlag = MOV_TOP_LINE;//标记当前为用户按下矩形的上边界区域
        }
        else if(m_bottomRectf.contains(m_startPos))
        {
            setCursor(Qt::SizeVerCursor);
            m_StateFlag = MOV_BOTTOM_LINE;//标记当前为用户按下矩形的下边界区域
        }
        else if(m_rbRectf.contains(m_startPos))
        {
            setCursor(Qt::SizeFDiagCursor);
            m_StateFlag = MOV_RIGHTBOTTOM_RECT;//标记当前为用户按下矩形的右下角
        }
    }
    else
    {
        QGraphicsItem::mousePressEvent(event);
    }
}

void myGraphicRectItem::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
    if(m_StateFlag == MOV_RECT)
    {
        QPointF point = (event->pos() - m_startPos);
        moveBy(point.x(), point.y());
    }
    else if(m_StateFlag == MOV_LEFT_LINE)
    {
        if(event->pos().x()>(m_oldRect.right()-10))
        {
            return;
        }
        else
        {
            QRectF newRect(m_oldRect);
            newRect.setLeft(event->pos().x());
            setRectSize(newRect);
            scene()->update();//必须要用scene()->update()，不能用update();否则会出现重影
        }
    }
    else if(m_StateFlag == MOV_TOP_LINE)
    {
        if(event->pos().y()>(m_oldRect.bottom()-10))
        {
            return;
        }
        else
        {
            QRectF newRect(m_oldRect);
            newRect.setTop(event->pos().y());
            setRectSize(newRect);
            scene()->update();//必须要用scene()->update()，不能用update();否则会出现重影
        }
    }
    else if(m_StateFlag == MOV_RIGHT_LINE)
    {
        if(event->pos().x()<(m_oldRect.left()+10))
        {
            return;
        }
        else
        {
            QRectF newRect(m_oldRect);
            newRect.setRight(event->pos().x());
            setRectSize(newRect);
            scene()->update();//必须要用scene()->update()，不能用update();否则会出现重影
        }
    }
    else if(m_StateFlag == MOV_BOTTOM_LINE)
    {
        if(event->pos().y()<(m_oldRect.top()+10))
        {
            return;
        }
        else
        {
            QRectF newRect(m_oldRect);
            newRect.setBottom(event->pos().y());
            setRectSize(newRect);
            scene()->update();//必须要用scene()->update()，不能用update();否则会出现重影
        }
    }
    else if(m_StateFlag == MOV_RIGHTBOTTOM_RECT)
    {
        if(event->pos().y()<(m_oldRect.top()+10))
        {
            return;
        }
        else if(event->pos().x()<(m_oldRect.left()+10))
        {
            return;
        }
        else
        {
            QRectF newRect(m_oldRect);
            newRect.setBottomRight(event->pos());
            setRectSize(newRect);
            scene()->update();//必须要用scene()->update()，不能用update();否则会出现重影
        }
    }
    else {
        QGraphicsItem::mouseMoveEvent(event);
    }
}

void myGraphicRectItem::mouseReleaseEvent(QGraphicsSceneMouseEvent *event)
{
    setCursor(Qt::ArrowCursor);
    if(m_StateFlag == MOV_RECT)
    {
        m_StateFlag = DEFAULT_FLAG;
    }
    else {
        QGraphicsItem::mouseReleaseEvent(event);
    }
}

QRectF myGraphicRectItem::getCrtPosRectToSceen()
{
    QRectF retRect = QRectF(m_oldRect.x()+pos().x(),m_oldRect.y()+pos().y(),m_oldRect.width(),m_oldRect.height());
    return retRect;
}

上面类的使用方式如下，其中m_qgraphicsScene为QGraphicsScene场景，请结合上篇文章内容理解：

void MainWindow::on_pushButton__DrawRect_clicked()
{
    myGraphicRectItem *m_myGraphicRectItem;
    m_myGraphicRectItem = new myGraphicRectItem();//实例化myGraphicRectItem
    m_myGraphicRectItem->setRectSize(QRectF(-100,-100,200,200));//设置矩形大小，以m_qgraphicsScene的中心为原点，边长200的正方形
    m_qgraphicsScene->addItem(m_myGraphicRectItem);//将绘制的矩形添加到m_qgraphicsScene场景中
    m_qgraphicsScene->setFocusItem(m_myGraphicRectItem);
}

接下来是截取矩形区域的图片，并保存。实现过程如下：
1.用户点击“保存框选截图”按钮后，主程序调用ImageWidget类的getImgFromRect（QRectF rectf）函数，实现获取矩形区域对应的图像的信息
2.在getImgFromRect（）函数内，因为用户在之前的操作中，可能对图片进行了缩放和拖动操作，所以我们需要将矩形rectf进行坐标转换，转换后为temprectf，然后在原图中拷贝temprectf区域，并以QPixmap 变量的形式返回。
3.在主程序中将函数返回的QPixmap 保存到程序执行目录下。getImgFromRect（）函数如下：

QPixmap ImageWidget::getImgFromRect(QRectF rectf)//rectf是外界传进来的以QGraphicsScene为坐标基准的矩形区域（即界面上看到的图片显示区域的正中央为（0,0）点）
{
    qreal nwidthOffset = pos().x();//pos()为当前m_pic图片正中央相对于显示控件的正中央（0,0）点偏移的位置
    qreal nheightOffset = pos().y();
    QRectF temprectf = QRectF(rectf.x()/m_scaleValue+m_pix.width()/2-nwidthOffset/m_scaleValue,rectf.y()/m_scaleValue+m_pix.height()/2-nheightOffset/m_scaleValue,rectf.width()/m_scaleValue,rectf.height()/m_scaleValue);
    //temprectf是将rectf转换为当前m_pic图片中的对应位置区域
    QPixmap retPixmap = m_pix.copy(temprectf.toRect());//拷贝m_pic图片中的对应区域
    return retPixmap;
}

源码：https://download.youkuaiyun.com/download/weixin_43935474/11545517

Qt/C++音视频开发47-通用视频控件
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
11-18 1873
一、前言 自从视频监控系统的内核不断增加，从最初的vlc到ffmpeg然后到mpv，后面还陆续增加了海康sdk等，每次增加一个内核，整个视频监控系统就有三五个代码文件需要修改，而且大部分是重复的代码，通过define来区分不同的内核，所以重新整理了一个视频类，里面就define处理好了，提供了个公共接口，在需要的地方直接实例化一个类就行，而不需要在不同的地方实例化不同的类，大大减轻了后期的工作量，也复用了很多代码。 通用视频控件基本功能： 调用setUrl函数设置要播放的视频文件或者流地址。 调用open
Qt实现的图片ROI区域圈选（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-19 529
Qt实现的图片ROI区域圈选（附完整源码）
Qt5实现的图片ROI区域的框选、移动、缩放
03-14
基于VS+Qt5实现的用于图片ROI区域框选，并可以对区域进行移动缩放删除保存操作。主要通过重写QLabel，代码仅供参考。 介绍链接：https://blog.youkuaiyun.com/qq_36131739/article/details/104855098
Qt作品(一)： 框选图片任意数量Roi(感兴趣区域)工具
weixin_44901043的博客
03-09 3904
文章目录前言一、pandas是什么？二、使用步骤1.核心代码：2.功能演示：总结 前言 一、pandas是什么？ 二、使用步骤 1.核心代码： void Widget::mousePressEvent(QMouseEvent *event) { if(event->button() == Qt::LeftButton && event->pos().x() < srcOri.cols) { bIsDrawing = true;
Qt实现简单截图工具详解
最新发布
weixin_35750483的博客
06-05 901
Qt 是一个跨平台的 C++ 应用程序框架，广泛用于开发图形用户界面（GUI）应用程序，以及非 GUI 程序如命令行工具和服务器。它为开发者提供了一整套的工具和API，可以用于处理图形、网络、数据库和其他常见的编程任务。Qt 的模块化设计使其可以轻松扩展，同时其信号和槽机制提供了一种优雅的方式来响应用户交互。本章将探讨Qt的基本组件和其在应用程序开发中的关键特性，为接下来的章节提供坚实的基础。
Qt中在QLabel上载入图片后在上面画矩形框，并将矩形框选的区域显示
06-09
实在受不了了，网上搜的那些都只有框选，并没有把框选的区域显示，只能自己干了，希望能够帮到你们
qt qml：图片上绘制矩形框，局部框选图片
qq_45194214的博客
11-27 1242
在工业软件中常常会遇到在图片上进行局部框选的需求，qt中一般使用QGraphicsView来绘制矩形框，而qml没有QGraphicsView，下面介绍使用Ractangle组件来实现框选的方法。代码只实现了矩形框的绘制，如有需要，还可以添加矩形框的拖拽，删除和形变功能。
Qt实现的图片ROI区域圈选，可进行拖动、缩放、删除等操作
热门推荐
qq_36131739的博客
03-14 1万+
最近做到一个项目需要对图片的部分区域进行识别，所以需要手动框选图片的位置大小等信息，网上看了些demo，有些有BUG未解决，有些功能不完善，索性就自己花了点时间写了一个。 功能如下： 目前功能支持矩形区域的选择，并可以对矩形区域进行拖动、缩放、以及保存删除操作。基本上我要的功能都实现了。 原理 操作在一个自定义的QLabel中实现， 重写实现它的一些鼠标事件绘图事件...
PYTHON+QT5用标签类搭建游戏开发框架
mr_LuoWei2009的专栏
07-22 293
PYTHON QT5 游戏开发框架
Qt Designer 详细介绍
2301_81210371的博客
07-28 1万+
QtDesigner 是 QT 官方推出的图形化制作GUI界面的工具。通过拖拽控件的方式就可以快速的制作出一个 GUI 界面。可视化搭建好图形界面之后，只需要关注业务代码即可。Qt Designer 的设计符合MVC的架构，其实现了视图和逻辑的分离。使用 Qt designer 就是为了快速创建出 UI 界面，毕竟手动实现界面效率还是比较低的，特别是还要考虑各种固定组件的布局位置。组件触发可以放在 python 代码中完成。Qt Designer 的使用方法其实不难，从左侧的组件库里面拖拽组件放到窗口里面。
Qt Quick 开发基础 + 实战（持续更新中…）
遇己
12-04 4197
-
Qt之根据图片计算绘制区域
Black_Silencer的博客
10-26 305
QRect QStyle::itemPixmapRect(const QRect &rect, int alignment, const QPixmap &pixmap) const { QRect result; int x, y, w, h; rect.getRect(&x, &y, &w, &h); const int pixmapWidth = pixmap.width()/pixmap.devicePixelRati
QT下实现图片的自适应显示、缩放（以鼠标位置为中心进行缩放）、拖动、以及重置并截图保存
12-22
可自适应显示图片，以鼠标位置为中心进行缩放，按住鼠标左键进行图片拖动，可添加截图方框并截图保存，可载入显示大部分tif格式的图，可显示伪彩，灰度图
Qt：读入一张图片，切割特定区域的图片并保存
OceanStar的博客
03-20 6233
读入一张图片，切割特定区域的图片并保存 MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); QImage img; if(!img.load("C://Users//Administrato...
使用Qt5+CMake实现图片的区域选择（附源码）
weixin_30897233的博客
08-12 262
近期研发涉及到了图片的区域选择，找来一些资料一直不能很满意，所以自己实现了一个。 实现步骤如下。源码可以点击ImageAOI获取。 Gitee clone: ImageAOI. 如下资料来自源码的README。 ImageAOI (XLabel): AOI Selection Based on Qt5 Dependency Qt >= 5.0 Usage Double click to ...
Qt实现的图片ROI区域选择
CyberFlare的博客
09-09 732
在鼠标按下事件中，我们记录下按下的位置作为选择区域的起点。在鼠标移动事件中，我们根据鼠标移动的位置更新选择区域的大小，并在窗口中绘制一个矩形表示该区域。在项目中，我们需要引入Qt的图形库，并创建一个窗口来显示图像和选择ROI。在图像处理和计算机视觉应用中，常常需要选择感兴趣的区域（ROI，Region of Interest），进行进一步的分析和处理。函数中，我们根据鼠标的移动位置更新选择区域的终点，并在窗口中绘制一个红色矩形来表示该区域。函数中，我们记录了鼠标按下的位置作为选择区域的起点，而在。
qt鼠标悬停图片放大_QT实现图像缩放拖动并截图保存.rar
weixin_35779309的博客
12-30 660
【实例简介】1.用户点击框选按钮后在图像显示区域绘制矩形框2.鼠标点击矩形的任意一条边可进行矩形的拉伸，同时鼠标样式更改3.鼠标点击矩形右下角并拖动可进行矩形的缩放4.鼠标按住矩形内区域并移动可拖动矩形5.用户点击保存截图按钮后可将矩形框选的图像保存到执行目录下【实例截图】【核心代码】QT实现图像缩放拖动并截图保存└── EditPic├── EditPic.pro├── EditPic.pro....
QT PC端实现图片裁剪选择框
weixin_41605683的博客
08-28 2587
文章目录需求需求分析开发实现 需求 实际项目中经常需要选择本地图片的部分预览、剪切、上传处理后图片到服务端，上图，效果图： 这个是最近QT实现的PC项目里的需求和成品截图。这里讲讲上图红色圈圈里的选择框实现。 需求分析 UI实现：外侧需要半透明蒙层，虚线的选择框和四个缩放用的顶点，内侧透明镂空交互：四个点可以缩放，镂空处可以移动，且边框边界限制 开发实现 实现比较简单，直接上代码，具体解释在代码里都有了 ui文件： <?xml version="1.0" encoding="UTF-8"?>
Qt绘图：选中区域
龚建波
12-01 3745
0.前言 选区操作是比较常见的需求，如截图、图表等。一般矩形选区居多，有的是四个边都可编辑，有的是横向可编辑。单个选区的操作逻辑也是比较简单的，之后会在此基础上增加更复杂的需求。 本文代码源码链接及实现效果如下： github 链接（SimpleSelection类）：https://github.com/gongjianbo/EasyQPainter 1.实现细节 矩形区域可以用 QRect 来保存，先对这个类有个基本的认识： QRect有四个成员变量，分别对应左上角和右下角点坐标 x.
评论 42
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GreenHandBruce

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值