Qt实现在QLabel上显示图片并进行线条/矩形框/多边形的绘制

已于 2023-03-12 10:18:02 修改
阅读量6.8k 收藏 64
点赞数 16
分类专栏： Qt开发 文章标签： qt qt5
于 2022-10-22 10:08:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XCJandLL/article/details/127458147
版权

文章目录

前言

本文主要讲述了使用QPainter在QLabel上进行图片的显示，并使用事件过滤器让QLabel捕获QEvent::Paint事件，并结合鼠标事件实现在图片上绘制其它图形。示例代码见文章内容，大家可以参考学习，如有错误之处，欢迎大家批评指正。

项目效果
请添加图片描述

提示：以下是本篇文章正文内容，下面案例可供参考

一、事件过滤器

Qt的事件过滤器会把控件的绘图事件给过滤，所以不能再任意控件上绘图，为了实现在QLabel上显示图片并在其上进行其它图形的绘制，首先需要给这个控件安装一个事件过滤器，然后重写bool eventFilter(QObject *obj, QEvent *event)，代码如下。想要对事件过滤器进行更详细的了解可以参考该博客：Qt 事件过滤器（秒懂）

void Widget::initWidget()
{
	//...
	//安装事件过滤器
	ui->lb_image->installEventFilter(this);
}

//重写eventFilter
bool Widget::eventFilter(QObject *watched, QEvent *event)
{
    if(watched ==ui->lb_image && event->type() == QEvent::Paint)
    {
        upPaint();
    }
    return QWidget::eventFilter(watched,event);
}

二、示例完整代码展示

1.widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPoint>
#include <QPen>
#include <QPainter>
#include <QMouseEvent>
#include <QDebug>
#include <QDir>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

    void initWidget();
    void upPaint();

protected:
    void mousePressEvent(QMouseEvent *event);
    void mouseMoveEvent(QMouseEvent *event);
    void mouseReleaseEvent(QMouseEvent *event);
    bool eventFilter(QObject *watched, QEvent *event);

private slots:
    void on_pb_line_1_clicked();
    void on_pb_line_2_clicked();
    void on_pb_rect_clicked();
    void on_pb_show_clicked();
    void on_pb_clear_clicked();

private:
    Ui::Widget *ui;

    bool isPressed;

    //line1
    int lineNum;
    bool lineFlag1;
    QPoint linePoint[5];

    //line2
    bool lineFlag2;
    QPoint lineStartPoint;
    QPoint lineEndPoint;

    //rect
    bool rectFlag;
    int rect[4] = {0};

};
#endif // WIDGET_H

2.widget.cpp

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->initWidget();
}

Widget::~Widget()
{
    delete ui;
}

void Widget::initWidget()
{
    isPressed = false;

    lineNum = 0;
    lineFlag1 = false;
    for(int i=0;i<5;i++)
    {
        linePoint[i] = QPoint(0,0);
    }

    lineFlag2 = false;
    lineStartPoint = QPoint(0,0);
    lineEndPoint = QPoint(0,0);

    rectFlag = false;

    ui->lb_image->installEventFilter(this);
}

void Widget::upPaint()     //绘图
{    
    QPainter painter(ui->lb_image);
    //显示图片
    QString imagePath = "E:/PhotoTest/drawTest.PNG";   //图片对应路径
    painter.drawPixmap(0,0,400,300,QPixmap(imagePath));

    //显示图片的另一种方法：setPixmap,这里不要使用
    //QImage Image;
    //Image.load(imagePath);
    //ui->lb_image->setPixmap(QPixmap::fromImage(Image));

    QPen pen;
    pen.setColor(Qt::red);
    painter.setPen(pen);
    painter.drawRect(1,1,100,50);
    painter.drawText(10,30,"测试文字");

    if(lineFlag1)   //line1
    {
        if(lineNum == 2)
        {
            painter.drawLine(linePoint[0],linePoint[1]);
        }
        else if(lineNum == 3)
        {
            painter.drawLine(linePoint[0],linePoint[1]);
            painter.drawLine(linePoint[1],linePoint[2]);
        }
        else if(lineNum == 4)
        {
            painter.drawLine(linePoint[0],linePoint[1]);
            painter.drawLine(linePoint[1],linePoint[2]);
            painter.drawLine(linePoint[2],linePoint[3]);
        }
        else if(lineNum == 5)
        {
            painter.drawLine(linePoint[0],linePoint[1]);
            painter.drawLine(linePoint[1],linePoint[2]);
            painter.drawLine(linePoint[2],linePoint[3]);
            painter.drawLine(linePoint[3],linePoint[4]);
        }
        else if(lineNum == 6)
        {
            painter.drawLine(linePoint[0],linePoint[1]);
            painter.drawLine(linePoint[1],linePoint[2]);
            painter.drawLine(linePoint[2],linePoint[3]);
            painter.drawLine(linePoint[3],linePoint[4]);
            painter.drawLine(linePoint[4],linePoint[0]);
        }
    }
    if(lineFlag2)   //line2
    {
        painter.drawLine(lineStartPoint,lineEndPoint);
    }
    if(rectFlag)   //line2
    {
        painter.drawRect(rect[0],rect[1],rect[2],rect[3]);
    }

    //p.drawLine(QLine(100,100,100,250));
    //painter.drawRect(100,100,200,150);
}

//鼠标按下
void Widget::mousePressEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton)
    {
        isPressed = true;
        if(lineFlag2)
        {
            lineStartPoint = QPoint(event->pos().x()-30,event->pos().y()-30);
            lineEndPoint = QPoint(event->pos().x()-30,event->pos().y()-30);
        }
        else if(rectFlag)
        {
            rect[0] = event->pos().x()-30;
            rect[1] = event->pos().y()-30;
        }
    }
}

//鼠标移动
void Widget::mouseMoveEvent(QMouseEvent *event)
{
    if(isPressed)
    {
        if(lineFlag2)
        {
            lineEndPoint = QPoint(event->pos().x()-30,event->pos().y()-30);
        }
        else if(rectFlag)
        {
            rect[2] = event->pos().x()-30 - rect[0];
            rect[3] = event->pos().y()-30 - rect[1];
        }
        this->update();
    }
}

//鼠标抬起
void Widget::mouseReleaseEvent(QMouseEvent *event)
{
    qDebug()<<"Release:"<<QPoint(event->pos().x()-30,event->pos().y()-30);
    if(event->button() == Qt::LeftButton)
    {
        if(lineFlag1)
        {
            //多个点(以5个点示例)
            if(lineNum == 0)
            {
                lineNum = 1;
                linePoint[0] = QPoint(event->pos().x()-30,event->pos().y()-30);
                this->update();
            }
            else if(lineNum == 1)
            {
                lineNum = 2;
                linePoint[1] = QPoint(event->pos().x()-30,event->pos().y()-30);
                this->update();
            }
            else if(lineNum == 2)
            {
                lineNum = 3;
                linePoint[2] = QPoint(event->pos().x()-30,event->pos().y()-30);
                this->update();
            }
            else if(lineNum == 3)
            {
                lineNum = 4;
                linePoint[3] = QPoint(event->pos().x()-30,event->pos().y()-30);
                this->update();
            }
            else if(lineNum == 4)
            {
                lineNum = 5;
                linePoint[4] = QPoint(event->pos().x()-30,event->pos().y()-30);
                this->update();
            }
            else if(lineNum == 5)
            {
                lineNum = 6;
                this->update();
            }
            else
            {
                lineNum = 0;
                this->update();
            }
        }
        else if(lineFlag2)
        {
            isPressed=false;
            lineEndPoint = QPoint(event->pos().x()-30,event->pos().y()-30);
            this->update();
        }
        else if(rectFlag)
        {
            isPressed=false;
            rect[2] = event->pos().x()-30 - rect[0];
            rect[3] = event->pos().y()-30 - rect[1];
            this->update();
        }
    }
    else if(event->button() == Qt::RightButton)
    {
        isPressed=false;
        lineNum = 0;
        lineFlag1 = false;
        lineFlag2 = false;
        rectFlag = false;
        this->update();
    }
}

bool Widget::eventFilter(QObject *watched, QEvent *event)
{
    if(watched ==ui->lb_image && event->type() == QEvent::Paint)
    {
        upPaint();
    }
    return QWidget::eventFilter(watched,event);
}

void Widget::on_pb_line_1_clicked()
{
    lineFlag1 = true;
    lineFlag2 = false;
    rectFlag = false;
    this->update();
}

void Widget::on_pb_line_2_clicked()
{
    lineFlag1 = false;
    lineFlag2 = true;
    rectFlag = false;
    this->update();
}

void Widget::on_pb_rect_clicked()
{
    lineFlag1 = false;
    lineFlag2 = false;
    rectFlag = true;
    this->update();
}

void Widget::on_pb_show_clicked()
{
    lineFlag1 = true;
    lineFlag2 = true;
    rectFlag = true;
    this->update();
}

void Widget::on_pb_clear_clicked()
{
    isPressed = false;

    lineNum = 0;
    lineFlag1 = false;
    for(int i=0;i<5;i++)
    {
        linePoint[i] = QPoint(0,0);
    }

    lineFlag2 = false;
    lineStartPoint = QPoint(0,0);
    lineEndPoint = QPoint(0,0);

    rectFlag = false;
    for(int i=0;i<4;i++)
    {
        rect[i] = 0;
    }

    this->update();
}

3.widget.ui请添加图片描述

三、下载链接

我的示例百度网盘链接：https://pan.baidu.com/s/1wJj8UHgr7Aub-7p8pojnrw
提取码：xxcj

总结

本文示例使用到了Qt的事件过滤器并重写了QPaintEvent、QMouseEvent等事件，这也是比较常见的方式。在我们之后的工作中，要学会灵活使用事件系统来实现自己的需求。示例中要注意的一点，这里在QLabel上显示图片需要使用QPainter中的drawPixmap，而不能使用QLabel的setPixmap方法，不然在进行绘制线条时出现无法显示的情况（其实是绘制出来了，但是被图片挡住了）。

hello：
共同学习，共同进步，如果还有相关问题，可在评论区留言进行讨论。

参考博客：
Qt 事件过滤器（秒懂）
QT中在QLabel显示图片并且利用鼠标点击画线

电气徐小江
关注
  • 16
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Qt在QLabel显示图片并绘制矩形框
qq_32497777的博客
05-09 5313
利用QLabel显示图片，在里面进行矩形框的显示。下面就是一个简单的事例。 首先重新定义一个自己的类，用来重新定义函数paintEvent ( QPaintEvent * ) class QtLabel :public QLabel { public: QtLabel(); ~QtLabel(); int x,y,w,h; void paintEvent(QPaintEvent *event); void DrawRangle(int x ,int ..
QT 在QLabel上加载图片 并在其上绘制矩形
08-22
综上所述，"QT在QLabel上加载图片并在其上绘制矩形"这一主题涉及到的主要知识点包括： 1. `QLabel`的使用，特别是`setPixmap()`函数加载图片。 2. 自定义`QLabel`子类并重写`paintEvent()`方法。 3. `QPainter`类的...
Qt中在QLabel上载入图片后在上面画矩形框，并将矩形框选的区域显示
06-09
实在受不了了，网上搜的那些都只有框选，并没有把框选的区域显示，只能自己干了，希望能够帮到你们
Qt实现点击添加图片，并可以在图片上画线、矩形、圆
04-28
Qt实现点击添加图片，并可以在图片上画线、矩形、圆
QT 利用QPainter绘制常规图形
最新发布
xxh7758的博客
05-24 795
但有一点需要注意的是，如果我们使用QPainter中的drawLine()函数去绘制线段的话，我们是无法进行实时的绘制的，而在这里我们使用drawPolygon()函数去进行绘制线段，我们把线段定义成一个QPolygon类对象，这样就可以实现在拖动的过程中实时绘制了。将切换绘制图形的功能绑定在鼠标右键的菜单上，并使用connect来连接我们自己的槽函数实现选中效果的展示和对应功能。觉得这个颜色、宽度、样式都不符合我们的预期，我们就可以使用画笔工具去进行自定义，设置完成会在页面上实时进行更新。
Qt QGraphics 实现可移动缩放的矩形框
12-10
Qt QGraphics 实现可移动缩放的矩形框，源码及发布版本。博客https://blog.csdn.net/ShareProgress/article/details/101287935
QT中在QLabel显示图片并且利用鼠标点击画线
草帽小子的博客
01-21 2685
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/binleebit/article/details/75949211 &amp;lt;/div&amp;gt; &amp;lt;link rel=&quot;stylesheet&quot;...
QT QLabel控件(使用详解)
断点
08-01 1万+
本文详细的介绍了TextLabel控件的各种操作，例如：显示边框、设置文字、设置字体、设置信息提示框、状态提示、居中对齐、加载图片、自适应图片大小、设置位置大小、样式表等操作。本文作者原创，转载请附上文章出处与本文链接。
QT 实现Label上画线
qiu_fang的博客
04-25 2378
实现功能：Label上有一张图片，用画笔在图像上画线。 一、头文件添加以下函数和变量 QMouseEvent * mouseEvent; void mousePressEvent(QMouseEvent* event); void mouseMoveEvent(QMouseEvent* event); void mouseReleaseEvent(QMouseEvent* event); void paintEvent(QPaintEvent *p
Window系统下开发Qt——在图片上绘制图形
m0_73443478的博客
11-02 1367
在图片上绘制图形
pyqt5 QLabel 加边框并设置边框样式
BAIFOL的博客
12-04 8796
# -*- coding: utf-8 -*- from PyQt5 import QtCore, QtWidgets from PyQt5.QtWidgets import QFrame, QApplication, QMainWindow import sys class Ui_MainWindow(QMainWindow): def __init__(self,parent=None): super(Ui_MainWindow,self).__init__(parent.
QT如何设置Label的边框(画线、虚线、实线、3D边框)等
热门推荐
Pailugou的博客
09-15 1万+
本文主要总结用QSS实现控件QLabel边框类型，其它任何一个控件（包括QWidget）同样可以用这种方法设置。用QSS可以设置QLabel控件边框线型，这些类型包括点画线、虚线、实线、3D边框，下面将详细介绍各种线型的实现方式。 1.1设置QLabel控件边框为点画线（dotted） QLabel{border:10px dotted #242424;} 1.2设置QLabel...
Qt 在任意Label上面绘制图形
03-22
这只是一个可以在lable上面绘图的demo，需要用到该只是的朋友可以试一下，改良一下，我也是学习别人的东西，免费分享，评论就可以拿回拿一分了，不是么
Qt实现在QLabel上播放视频文件，可以拖动进度条，快进倒退
01-09
在Qt框架下开发一个视频播放器，特别是在QLabel上实现这一功能，是一项有趣且实用的任务。这个项目的目标是创建一个用户界面，用户可以在QLabel组件上观看视频，并通过进度条来控制播放进度，包括快进、倒退以及两倍...
在Qlabel上显示图片，并矩形图
02-21
在本项目中，我们将探讨如何在QLabel上显示图片并叠加一个矩形图，这在GUI应用开发中可能涉及到图像处理或者界面设计。下面我们将详细讲解这个过程。 首先，我们需要了解QLabel的基本用法。QLabel可以使用`...
在QLabel上显示图片，并在图片上画矩形ROI
zhaojiandeai的博客
12-06 740
在QLabel上显示图片，并在图片上画矩形ROI
qtdesigner给QLabel添加边框
qq_51206550的博客
04-19 4704
边框添加成功（开头就是添加过的样子）。
QT如何在控件上绘图（例如QLabel,Button,QWidget等）
qq_58136559的博客
05-01 4251
自己定义一个MyWidget类继承于QWidget，然后在这个类中重写paintEvent(QPaintEvent *)函数，并在里面绘图。总结： 由上看出，绘图事件里的实现代码，与事件过滤里的实现代码是一样的，所以，完全可以将其封装成为函数。由两个函数组成的一种操作,用来完成一个部件对其他部件的事件监视，这两个函数分别是installEventFilter();event->type() == QEvent::Paint 判断的是绘图事件。示例：要在Form窗口里的 widget(红框部分) 中绘图。
Qt与OpenCV编程：在QLabel加载的图像上画矩形并剪切
知来者逆的博客
12-28 3100
前言 1.使用Qt与OpenCV做开发时，时常会用到鼠标与图像交互这块，OpenCV有自己的鼠标事件，但要在Qt搭建的界面上是不能使用OpenCV封装的鼠标事件,Qt有自己的鼠标事件。 2.Qt鼠标事件： protected: void mousePressEvent(QMouseEvent *event); //鼠标单击动作 void mouseReleaseEvent(QMouseEv...
qt在qlabel上显示图片并在图片上画直线
07-20
### 回答1： 采用Qt库在QLabel控件上显示图片并在图片上画直线的实现步骤如下： 1. 创建一个QLabel控件，并设置其大小和位置。 ```cpp QLabel* label = new QLabel(this); label->setGeometry(0, 0, 300, 300); ``` 2. 加载图片并设置为QLabel的背景。 ```cpp QPixmap pixmap(":/image/image.png"); // 从资源文件中加载图片 QPalette palette; palette.setBrush(label->backgroundRole(), QBrush(pixmap)); label->setPalette(palette); label->setAutoFillBackground(true); ``` 3. 在QLabel上创建一个QPainter对象，并设置画笔的颜色、宽度等属性。 ```cpp QPainter painter(label); painter.setPen(QPen(Qt::red, 2)); // 设置画笔为红色，宽度为2 ``` 4. 使用QPainter在图片上绘制直线。 ```cpp painter.drawLine(50, 50, 250, 250); // 在图片上绘制一条从(50, 50)到(250, 250)的直线 ``` 5. 更新QLabel控件以显示绘制好的图片。 ```cpp label->update(); ``` 完整代码如下所示： ```cpp #include <QtWidgets> int main(int argc, char *argv[]) { QApplication a(argc, argv); // 创建主窗体 QWidget window; window.setWindowTitle("Qt Display Image"); window.resize(300, 300); // 创建QLabel控件 QLabel* label = new QLabel(&window); label->setGeometry(0, 0, 300, 300); // 加载图片并设置为QLabel的背景 QPixmap pixmap(":/image/image.png"); // 从资源文件中加载图片 QPalette palette; palette.setBrush(label->backgroundRole(), QBrush(pixmap)); label->setPalette(palette); label->setAutoFillBackground(true); // 在QLabel上创建一个QPainter对象，并设置画笔的颜色、宽度等属性 QPainter painter(label); painter.setPen(QPen(Qt::red, 2)); // 设置画笔为红色，宽度为2 // 使用QPainter在图片上绘制直线 painter.drawLine(50, 50, 250, 250); // 在图片上绘制一条从(50, 50)到(250, 250)的直线 // 更新QLabel控件以显示绘制好的图片 label->update(); window.show(); return a.exec(); } ``` 以上代码演示了如何使用Qt在QLabel上显示图片并在图片上绘制直线。图片加载部分使用了资源文件的方式，即图片需要事先添加到Qt的资源文件中。 ### 回答2： 在Qt中，要在QLabel上显示图片并在图片上画直线，您可以按照以下步骤进行操作： 1. 创建一个QLabel对象，并将其设置为一个窗口部件（Widget）的子部件，使用QVBoxLayout进行布局。 ```cpp QLabel *label = new QLabel(this); QVBoxLayout *layout = new QVBoxLayout(); layout->addWidget(label); this->setLayout(layout); ``` 2. 加载图片到QPixmap对象中，并将其设置到QLabel中进行显示。 ```cpp QPixmap pixmap("image.png"); label->setPixmap(pixmap); label->setScaledContents(true); // 自适应QLabel的大小 ``` 3. 创建一个QPainter对象来绘制直线。可以在QLabel的paintEvent事件函数中绘制直线。 ```cpp void MyWidget::paintEvent(QPaintEvent *event) { QPainter painter(this); painter.drawPixmap(label->geometry(), pixmap); // 在QLabel的范围内绘制图片 // 绘制直线 painter.setPen(Qt::red); // 设置直线颜色为红色 painter.drawLine(50, 50, 200, 200); // 在图片上画一条直线，起点(50, 50)，终点(200, 200) } ``` 这样，您就可以在Qt的QLabel上显示图片并在图片上绘制直线了。希望对您有所帮助！ ### 回答3： 在Qt中，要在QLabel上显示图片并在图片上画直线，可以通过以下步骤实现： 1. 创建一个QLabel控件，并设置其大小和位置。 ```cpp QLabel *label = new QLabel(this); label->setGeometry(10, 10, 500, 500); ``` 2. 从文件中加载图片，并将其设置为QLabel的背景。 ```cpp QPixmap pixmap("image.jpg"); label->setPixmap(pixmap); ``` 3. 在QLabel上添加一个QPainter对象，并设置其渲染目标为QLabel。 ```cpp QPainter painter(label); ``` 4. 使用QPen设置画笔的颜色、宽度等属性。 ```cpp QPen pen(Qt::red); pen.setWidth(2); painter.setPen(pen); ``` 5. 使用QPainter在图片上画直线。 ```cpp painter.drawLine(10, 10, 300, 300); ``` 这将在图片上从点(10, 10)绘制一条直线到点(300, 300)。 6. 结束绘制并更新QLabel的显示。 ```cpp painter.end(); label->update(); ``` 通过以上步骤，你可以在Qt的QLabel控件上显示图片并在图片上画直线。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值