QT：图像上绘制图形

news/2025/2/8 20:08:51/

需求描述

1、展示一张图像
2、在图像上可以使用数据绘制图像：矩形、不规则图形、线条
3、有按键可以选择

概要设计

规划布局如下
1、左边是Qlabel 用于展示图片
2、右边是三个按钮
在这里插入图片描述

具体实现

1、 首先设计 UI 界面，对控件进行布局

在 mainwindow.ui 文件里，运用 Qt Designer 进行如下操作：
拖入一个 QWidget 到主窗口，这个 QWidget 将作为绘图区域。
拖入四个 QPushButton 到主窗口，把它们的 text 属性分别设置为“选择图片” “绘制矩形”、“绘制不规则图形” 和 “绘制线”。
pushButton_img
pushButton_Rectangle
pushButton_IrregularShape
pushButton_Line
在这里插入图片描述

2、新建类DrawingWidget

// DrawingWidget.cpp
#include "DrawingWidget.h"
#include <QPainter>DrawingWidget::DrawingWidget(QWidget *parent) : QWidget(parent)
{QPalette palette = this->palette();palette.setColor(QPalette::Window, Qt::black);this->setAutoFillBackground(true);this->setPalette(palette);
}DrawingWidget::~DrawingWidget()
{
}
// DrawingWidget.h
#ifndef DRAWINGWIDGET_H
#define DRAWINGWIDGET_H#include <QWidget>class DrawingWidget : public QWidget
{Q_OBJECT
public:explicit DrawingWidget(QWidget *parent = nullptr);~DrawingWidget();};#endif // DRAWINGWIDGET_H

3、将现有控件提升

在 Qt Designer 中，右键单击刚刚拖入的 QWidget，选择 “提升为”。
在 “提升的类名称” 中输入 DrawingWidget。
在 “头文件” 中输入 DrawingWidget.h。
点击 “添加”，再点击 “提升”。此时，该 QWidget 就被提升为 DrawingWidget 类的实例。
在这里插入图片描述

点击运行
在这里插入图片描述

4、添加按键信号槽函数

在mainwindow.h当中添加：

private slots:void on_pushButton_img_clicked(); // 声明槽函数void on_pushButton_Rectangle_clicked(); // 声明槽函数void on_pushButton_IrregularShape_clicked(); // 声明槽函数void on_pushButton_Line_clicked(); // 声明槽函数

在mainwindow.cpp当中添加：


void MainWindow::on_pushButton_img_clicked()
{QString buttonText = ui->pushButton_img->text();qDebug() << "点击的按钮内容是: " << buttonText;
}void MainWindow::on_pushButton_Rectangle_clicked()
{QString buttonText = ui->pushButton_Rectangle->text();qDebug() << "点击的按钮内容是: " << buttonText;
}void MainWindow::on_pushButton_IrregularShape_clicked()
{QString buttonText = ui->pushButton_IrregularShape->text();qDebug() << "点击的按钮内容是: " << buttonText;}void MainWindow::on_pushButton_Line_clicked()
{QString buttonText = ui->pushButton_Line->text();qDebug() << "点击的按钮内容是: " << buttonText;}

在 Qt 中，void on_pushButton_clicked(); 这种形式的槽函数是一种特殊的命名规则，它遵循了 Qt 的自动信号 - 槽连接机制。这种机制允许你通过特定的命名约定让 Qt 自动将信号和槽连接起来，而无需手动调用 connect 函数。
自动连接机制规则
当你使用这种以 on_ 开头，接着是控件对象名（例如 pushButton），再接着是信号名（例如 clicked），最后以 () 结尾的命名方式定义槽函数时，Qt 会在调用 ui->setupUi(this); 时自动进行信号 - 槽的连接。

5、图片选择

在DrawingWidget.h 当中添加loadImage函数声明

// DrawingWidget.h
#ifndef DRAWINGWIDGET_H
#define DRAWINGWIDGET_H#include <QWidget>
#include <QImage>class DrawingWidget : public QWidget
{Q_OBJECT
public:explicit DrawingWidget(QWidget *parent = nullptr);~DrawingWidget();void loadImage(const QString &fileName);void paintEvent(QPaintEvent *event) override;private:QImage m_image;
};#endif // DRAWINGWIDGET_H

在DrawingWidget.cpp 当中添加函数细节

// DrawingWidget.cpp
#include "DrawingWidget.h"
#include <QPainter>DrawingWidget::DrawingWidget(QWidget *parent) : QWidget(parent)
{QPalette palette = this->palette();palette.setColor(QPalette::Window, Qt::black);this->setAutoFillBackground(true);this->setPalette(palette);
}DrawingWidget::~DrawingWidget()
{
}void DrawingWidget::loadImage(const QString &fileName)
{if (m_image.load(fileName)) {qDebug() << "图片加载成功: " << fileName;update();} else {qDebug() << "图片加载失败: " << fileName;}}void DrawingWidget::paintEvent(QPaintEvent *event)
{Q_UNUSED(event);QPainter painter(this);if (!m_image.isNull()) {painter.drawImage(0, 0, m_image);}}

“选择图片”按键，对应的函数

void MainWindow::on_pushButton_img_clicked()
{QString buttonText = ui->pushButton_img->text();qDebug() << "点击的按钮内容是: " << buttonText;QString fileName = QFileDialog::getOpenFileName(this, "选择图片", "", "图片文件 (*.png *.jpg *.jpeg)");if (!fileName.isEmpty()) {ui->widget->loadImage(fileName); // 调用 loadImage 函数加载图片}
}

点击运行程序
在这里插入图片描述

6、绘制不同图形进行选择

修改paintEvent代码


void DrawingWidget::paintEvent(QPaintEvent *event)
{Q_UNUSED(event);QPainter painter(this);// 绘制图像if (!m_image.isNull()) {painter.drawImage(0, 0, m_image);}// 根据当前绘制类型绘制不同的图形switch (m_currentPaintType) {case 0: // 绘制矩形painter.setPen(Qt::red);painter.drawRect(50, 50, 100, 100);break;case 1: { // 使用花括号限制变量作用域QPolygon polygon;polygon << QPoint(50, 50) << QPoint(150, 50) << QPoint(100, 150);painter.setPen(Qt::blue);painter.drawPolygon(polygon);break;}case 2: // 绘制线条painter.setPen(Qt::green);painter.drawLine(50, 50, 150, 150);break;default:break;}
}

添加函数void painttype(int type);
ui->widget->painttype(0);//绘制矩形
ui->widget->painttype(1);//绘制三角形
ui->widget->painttype(2);//绘制线条
添加到按键槽函数当中，点击俺家就能实现

在这里插入图片描述

代码

// DrawingWidget.h
#ifndef DRAWINGWIDGET_H
#define DRAWINGWIDGET_H#include <QWidget>
#include <QImage>class DrawingWidget : public QWidget
{Q_OBJECT
public:explicit DrawingWidget(QWidget *parent = nullptr);~DrawingWidget();void loadImage(const QString &fileName);void paintEvent(QPaintEvent *event) override;void painttype(int type);private:QImage m_image;int m_currentPaintType; // 记录当前要绘制的图形类型
};#endif // DRAWINGWIDGET_H
//mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>QT_BEGIN_NAMESPACE
namespace Ui {
class MainWindow;
}
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private slots:void on_pushButton_img_clicked(); // 声明槽函数void on_pushButton_Rectangle_clicked(); // 声明槽函数void on_pushButton_IrregularShape_clicked(); // 声明槽函数void on_pushButton_Line_clicked(); // 声明槽函数private:Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H
// DrawingWidget.cpp
#include "DrawingWidget.h"
#include <QPainter>
#include <QPolygon>
#include <QPoint>DrawingWidget::DrawingWidget(QWidget *parent) : QWidget(parent)
{QPalette palette = this->palette();palette.setColor(QPalette::Window, Qt::black);this->setAutoFillBackground(true);this->setPalette(palette);m_currentPaintType =-1;
}DrawingWidget::~DrawingWidget()
{
}void DrawingWidget::loadImage(const QString &fileName)
{if (m_image.load(fileName)) {qDebug() << "图片加载成功: " << fileName;update();} else {qDebug() << "图片加载失败: " << fileName;}}void DrawingWidget::paintEvent(QPaintEvent *event)
{Q_UNUSED(event);QPainter painter(this);// 绘制图像if (!m_image.isNull()) {painter.drawImage(0, 0, m_image);}// 根据当前绘制类型绘制不同的图形switch (m_currentPaintType) {case 0: // 绘制矩形painter.setPen(Qt::red);painter.drawRect(50, 50, 100, 100);break;case 1: { // 使用花括号限制变量作用域QPolygon polygon;polygon << QPoint(50, 50) << QPoint(150, 50) << QPoint(100, 150);painter.setPen(Qt::blue);painter.drawPolygon(polygon);break;}case 2: // 绘制线条painter.setPen(Qt::green);painter.drawLine(50, 50, 150, 150);break;default:break;}
}void DrawingWidget::painttype(int type)
{m_currentPaintType = type;update(); // 重新绘制界面
}
//mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>
#include "DrawingWidget.h"
#include <QFileDialog>
MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);
}MainWindow::~MainWindow()
{delete ui;
}void MainWindow::on_pushButton_img_clicked()
{QString buttonText = ui->pushButton_img->text();qDebug() << "点击的按钮内容是: " << buttonText;QString fileName = QFileDialog::getOpenFileName(this, "选择图片", "", "图片文件 (*.png *.jpg *.jpeg)");if (!fileName.isEmpty()) {ui->widget->loadImage(fileName); // 调用 loadImage 函数加载图片}
}void MainWindow::on_pushButton_Rectangle_clicked()
{QString buttonText = ui->pushButton_Rectangle->text();qDebug() << "点击的按钮内容是: " << buttonText;ui->widget->painttype(0);
}void MainWindow::on_pushButton_IrregularShape_clicked()
{QString buttonText = ui->pushButton_IrregularShape->text();qDebug() << "点击的按钮内容是: " << buttonText;ui->widget->painttype(1);
}void MainWindow::on_pushButton_Line_clicked()
{QString buttonText = ui->pushButton_Line->text();qDebug() << "点击的按钮内容是: " << buttonText;ui->widget->painttype(2);}
//main.cpp
#include "mainwindow.h"#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);MainWindow w;w.show();return a.exec();
}

总结

1、自定义控件，控件提升
2、槽函数自动关联
3、加载图片
4、重写函数：void paintEvent(QPaintEvent *event) override;

提升

直接绘制图形，修改为鼠标绘制


http://www.ppmy.cn/news/1570399.html

相关文章

AI大模型评测对比2—ChatGPT对比DeepSeek

AI大模型评测对比2—ChatGPT对比DeepSeek

近期&#xff0c;DeepSeek 凭借其超高的性价比与卓越性能&#xff0c;在国内外各大社交媒体平台上赚足了眼球。令人瞩目的是&#xff0c;它仅耗费 2048 块显卡&#xff0c; 600 亿美元的成本&#xff0c;便成功训练出了可与顶级模型比肩的 Deepseek - V3 模型。这与美国公布的一…
阅读更多...
计算机网络之数据链路层（数据链路层的功能)

计算机网络之数据链路层（数据链路层的功能)

帧同步&#xff1a; 数据链路层将网络层传下来的数据报封装成帧&#xff0c;为了区分不同的帧&#xff0c;需要在每个帧的开头和结尾添加特殊的标记&#xff0c;以实现帧的定界和同步。这样&#xff0c;接收方就能准确地识别出一个帧的开始和结束。 差错控制&#xff1a; 在…
阅读更多...
GoFrame 微服务脚手架模块 (v2.8.x)

GoFrame 微服务脚手架模块 (v2.8.x)

概述 GoFrame 框架提供了丰富的微服务组件和易用的 GRPC 脚手架模块。脚手架由 grpcx 社区包实现&#xff0c;包含多个核心模块。 服务端 (Server) 基本使用 服务端由 grpcx.Server 模块维护&#xff0c;用于创建和管理服务端对象。 package mainimport ("github.com…
阅读更多...
使用 TensorRT 和 Python 实现高性能图像推理服务器

使用 TensorRT 和 Python 实现高性能图像推理服务器

在现代深度学习和计算机视觉应用中&#xff0c;高性能推理是关键。本文将介绍如何使用 TensorRT 和 Python 构建一个高性能的图像推理服务器。该服务器能够接收客户端发送的图像数据&#xff0c;使用 TensorRT 进行推理&#xff0c;并将结果返回给客户端。 1. 概述 1.1 项目目…
阅读更多...
大模型做导师之方案版本比较

大模型做导师之方案版本比较

背景&#xff1a; 在阅读lightRAG项目时&#xff0c;利用LLM辅助进行理解&#xff0c;当询问LLM如何自定义一个符合项目要求的大模型调用函数时&#xff0c;LLM给出了两个不同的版本。借此想提升一下自己的编程质量&#xff0c;于是让LLM对两个版本进行点评比较。 实现建议 基础…
阅读更多...
2. 【.NET Aspire 从入门到实战】--理论入门与环境搭建--.NET Aspire 概览

2. 【.NET Aspire 从入门到实战】--理论入门与环境搭建--.NET Aspire 概览

在当今快速发展的软件开发领域&#xff0c;构建高效、可靠且易于维护的云原生应用程序已成为开发者和企业的核心需求。.NET Aspire 作为一款专为云原生应用设计的开发框架&#xff0c;旨在简化分布式系统的构建和管理&#xff0c;提供了一整套工具、模板和集成包&#xff0c;帮…
阅读更多...
maven不能导入依赖和插件Cannot resolve plugin org.apache.maven.plugins:maven-xxx

maven不能导入依赖和插件Cannot resolve plugin org.apache.maven.plugins:maven-xxx

新建了个工程&#xff0c;新设置了一个仓库地址&#xff0c;maven导入报错&#xff1a; 连最基础的maven自带的插件都无法导入&#xff1a; Cannot resolve plugin org.apache.maven.plugins:maven-install-plugin:2.4Try to run Maven import with -U flag (force update sna…
阅读更多...
深入理解Docker：为你的爬虫项目提供隔离环境

深入理解Docker：为你的爬虫项目提供隔离环境

1. 明确目标 前置知识 在本教程中&#xff0c;我们的目标是利用Docker构建一个隔离环境&#xff0c;运行一个Python爬虫项目。该项目将采集小红书目标视频页面中的简介和评论&#xff0c;主要涵盖以下技术点&#xff1a; Docker隔离环境&#xff1a;通过Docker容器运行爬虫&…
阅读更多...
最新文章

Copyright @ 2022~2023