Table of contents
1. Download and installation of QT
Official website download address
1. Download and installation of QT
Before downloading QT, we should first know what QT is and what can QT do?
Qt is a cross-platform C++ development library, mainly used to develop the graphical user interface Qt. Although it is often regarded as a GUI library for developing graphical interface applications, this is not all of Qt; in addition to drawing beautiful interfaces (including controls, layout, and interaction), Qt also includes many other functions, such as multi-threading, Access databases, image processing, audio and video processing, network communications, file operations, etc.
Next let’s start downloading QT
-
Official website download address:
https://download.qt.io/archive/qt/5.14/ -
Just download the exe file:
The installation package is a bit large, please be patient.
-
Install QT
1. Click on the exe file and select next
2. Log in to your Qt account. If you don’t have an account, register on this page first. It should be noted that the account password must be at least 7 characters and must include three of the following four types: lowercase letters, uppercase letters, numbers, symbols (**!"#/() =?@${[]}\,.-_|;:'*^~+**)
After the new user is registered, click the activation link received in the email to activate. After activation, return to the installation page to log in.
3. Check the red box in the picture below and click next
4. Click next
5. Select the appropriate installation path (note: spaces and Chinese characters cannot appear, and it is not recommended to install on the C drive)
6. Select components. MSVC needs to match the corresponding Visual Studio version before it can be used. Qt5.14.2 only supports VS2015 and VS2017.
Here I only selected "MSVC 2017 64-bit" and "MinGW 7.3.0 64-bit" (you can choose as needed if you have other needs)
7. Click Next and wait for installation
Installation successful!
-
Configuration Environment
1. Find the installation path of QT and the path of the tool, and copy them
2. Right-click this computer->Properties->Advanced System Design->Environment Variables->Double-click Path->Add the Qt installation path and tool path to the environment variables.
At this point, the environment variables have been configured successfully!
2. Create a new project
Entering the QT main interface, you can see that there are a welcome interface, a file editing interface, a visual window editing interface, a debugging interface, a project property setting interface, and a help interface on the left. As follows:
1. Switch to the welcome interface, click to create a new project, and select the first "QT Widgets Application". Click choose in the lower right corner
(Widgets means components, Widgets Application component application)
2. Fill in your project name, be careful not to have spaces, and do not have a Chinese name in the project location, click Next
3. The compilation system defaults to
4. Name the class yourself.
QT has three base classes: QMainWindow, QWidget, and QDialog.
QMainWindow: An application window that provides a menu bar and a status bar
QWidget: base class for all user interface objects, blank window
QDialog: The base class of dialog box, an interactive window mainly used to transmit messages
Here we can choose QWidget.
5. Select language
6. Select the compilation environment
7. Click Finish
8. Click Run. If a blank interface appears, it means the new project is successful.
3. Image scaling
The preparation work is finally done, now we can officially start writing code!
Before that, let's first understand the file structure of a QT and switch to the editing interface
Our code is mainly written in the window class source file and window class header file.
Before writing code, let's first understand an important concept: signals and slots (slots)
Signals and slots are used for communication between two objects. When a special thing happens, a signal can be emitted. For example, when a button is clicked, the clicked() signal is emitted; and the slot is a function that is called to respond to the signal after the signal is emitted.
Let's further understand the signal and slot mechanism in application.
The following are some basic code explanations of window header files and window source files:
#ifndef WIDGET_H //防止重复定义
#define WIDGET_H
#include <QWidget> //包含Qt的QWidget类的头文件
QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE
class Widget : public QWidget
{
Q_OBJECT //允许使用信号和槽机制
public:
Widget(QWidget *parent = nullptr); //类的构造函数
~Widget(); //析构函数
private:
Ui::Widget *ui; //把Ui::Widget作为一个私有类，可以通过它来访问在Qt设计师中设计的窗口部件
}；
#endif // WIDGET_HImage Processing
- Image Scaling
To perform image processing, we should first add header files for displaying images, processing images and creating buttons.
Next we should explain the pointers of Qlabel and QImage objects, which are used to display images and store images respectively, and then declare the enlarge button and reduce button.
Finally, define a private slot in which the response function for connecting to the signal is declared.
(Slots are divided into three categories: public slots; protect slots; private slots. You can understand the corresponding differences by yourself)
The code is as follows:
In widget.cpp, in the constructor we should instantiate label, img, and the zoom in and zoom out buttons. At the same time, define the response functions of the zoom in button and zoom out button outside the constructor. The specific code is as follows:#ifndef WIDGET_H #define WIDGET_H #include <QWidget> //窗口组件 #include <QLabel> //显示图片 #include <QImage> //处理图像 #include <QPushButton> //创建按钮 QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACE class Widget : public QWidget { Q_OBJECT public: Widget(QWidget *parent = nullptr); ~Widget(); private: Ui::Widget *ui; private: QLabel *label; QImage *img; QPushButton *bigBt; //放大按钮 QPushButton *smallBt; //缩小按钮 private slots: //私有槽:只有类自己可以将信号与之相连接 void bShow(); //放大 void sShow(); //缩小 }; #endif // WIDGET_H#include "widget.h" #include "ui_widget.h" Widget::Widget(QWidget *parent) : QWidget(parent) , ui(new Ui::Widget) { ui->setupUi(this); //实例 QLabel label = new QLabel(this); label->setGeometry(QRect(160,50,500,500)); //放置控件位置，x,y,宽，高 //实例QImage img = new QImage; //QImage加载图片 img->load("S:/VStudio/image/1.bmp"); //label显示图片 label->setPixmap(QPixmap::fromImage(*img)); //QPixmap类是一种图像表示形式，可以用作绘画设备 //实例放大按钮 bigBt = new QPushButton(this); bigBt->setGeometry(QRect(50,100,100,25)); //设置按钮位置和大小 bigBt->setText("放大"); connect(bigBt,SIGNAL(clicked()),this,SLOT(bShow())); //使用connect()函数连接按钮的clicked()信号到窗口的bShow()槽函数 //表明用户在单机该按钮时，会触发bShow()槽函数执行操作 //实例缩小按钮 smallBt = new QPushButton(this); smallBt->setGeometry(QRect(50,150,100,25)); smallBt->setText("缩小"); connect(smallBt,SIGNAL(clicked()),this,SLOT(sShow())); } //放大操作 void Widget::bShow() { *img = img->scaled(600,600,Qt::IgnoreAspectRatio); label->setPixmap(QPixmap::fromImage(*img)); //绘制图像 } //缩小操作 void Widget::sShow() { *img = img->scaled(100,100,Qt::IgnoreAspectRatio); label->setPixmap(QPixmap::fromImage(*img)); //绘制图像 } Widget::~Widget() { delete ui; }
Realization effect:
Summary:
The button and response function need to be declared in .h, and the button and response function must be instantiated and defined in .cpp.
Following this idea, we can add move buttons, vertical flip buttons, horizontal flip buttons, angle flip buttons, brightness adjustment buttons, grayscale buttons, etc. The methods and ideas are
consistent with the image reduction button. Here I only provide the key code:
private:
QLabel *label;
QImage *img;
QPushButton *bigBt; //放大按钮
QPushButton *smallBt; //缩小按钮
QPushButton *move; //移动按钮
QPushButton *Vflip; //垂直翻转按钮
QPushButton *Hflip; //水平翻转按钮
QPushButton *Dflip; //角度翻转按钮
QPushButton *bright; //亮度调节按钮
private slots: //私有槽:只有类自己可以将信号与之相连接
void on_pushButton_clicked();
void bShow(); //放大
void sShow(); //缩小
void moveImg(); //移动
void hshow(); //水平翻转
void vShow(); //垂直翻转
void angleShow(); //角度操作
Widget::Widget(QWidget *parent) //父窗口指针
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
//实例 QLabel
label = new QLabel(this);
label->setGeometry(QRect(160,50,500,500)); //放置控件位置，x,y,宽，高
//实例QImage
img = new QImage;
//QImage加载图片
img->load("S:/VStudio/image/1.bmp");
//label显示图片
label->setPixmap(QPixmap::fromImage(*img)); //QPixmap类是一种图像表示形式，可以用作绘画设备
//实例放大按钮
bigBt = new QPushButton(this);
bigBt->setGeometry(QRect(50,100,100,25)); //设置按钮位置和大小
bigBt->setText("放大");
connect(bigBt,SIGNAL(clicked()),this,SLOT(bShow())); //使用connect()函数连接按钮的clicked()信号到窗口的bShow()槽函数
//表明用户在单机该按钮时，会触发bShow()槽函数执行操作
//实例缩小按钮
smallBt = new QPushButton(this);
smallBt->setGeometry(QRect(50,150,100,25));
smallBt->setText("缩小");
connect(smallBt,SIGNAL(clicked()),this,SLOT(sShow()));
//实例移动按钮
move = new QPushButton(this);
move->setGeometry(QRect(50,200,100,25));
move->setText("移动");
connect(move,SIGNAL(clicked()),this,SLOT(moveImg()));
//实例垂直翻转按钮
Vflip = new QPushButton(this);
Vflip->setGeometry(QRect(50,250,100,25));
Vflip->setText("垂直翻转");
connect(Vflip,SIGNAL(clicked()),this,SLOT(vShow()));
//实例水平翻转按钮
Hflip = new QPushButton(this);
Hflip->setGeometry(QRect(50,300,100,25));
Hflip->setText("水平翻转");
connect(Hflip,SIGNAL(clicked()),this,SLOT(hshow()));
//实例角度翻转按钮
Dflip = new QPushButton(this);
Dflip->setGeometry(QRect(50,350,100,25));
Dflip->setText("角度翻转");
connect(Dflip,SIGNAL(clicked()),this,SLOT(angleShow()));
}
//放大操作
void Widget::bShow()
{
*img = img->scaled(600,600,Qt::IgnoreAspectRatio);
label->setPixmap(QPixmap::fromImage(*img)); //绘制图像
}
//缩小操作
void Widget::sShow()
{
*img = img->scaled(100,100,Qt::IgnoreAspectRatio);
label->setPixmap(QPixmap::fromImage(*img)); //绘制图像
}
//点击移动
int i=50;
void Widget::moveImg()
{
//移动label控件
label->move(i,50); //修改控件位置
i+=10; //每次移动10像素
}
//垂直翻转
void Widget::vShow()
{
*img = img->mirrored(false,true); //水平翻转false，垂直翻转true
label->setPixmap(QPixmap::fromImage(*img));
}
//水平翻转
void Widget::hshow()
{
*img = img->mirrored(true,false);
label->setPixmap(QPixmap::fromImage(*img));
}
//角度操作
void Widget::angleShow()
{
QMatrix matrix;
//88度
matrix.rotate(88);
*img = img->transformed(matrix);
label->setPixmap(QPixmap::fromImage(*img));
}
Realization effect:
So far, the most basic image processing has been completed. But there is still a lot of room for improvement. For example, adjusting the grayscale and brightness of the image, designing the interface to make it look better, making the image scaling effect better, etc.
If I have time later, I will continue to improve it.