Qt官方ImageViewer案例的UI版本——VS开发Qt
Qt自带案例基本是纯代码撸出的界面,本片博客记录ImageViewer案例的UI版本。也可以查看我的GitHub。
VS2017配合Qt5.14.2实现。
【功能介绍】
图像居中显示,过大则出现滚动条,图像缩小、放大、还原、适应窗体,打开、另存为、退出。
【界面】MainWindow项目,项目名ImageViewer
看动图,注意控件对象名。
4个按钮,1个label,1个scrollArea。
菜单栏里三项:打开、另存为、退出
【界面属性设置】
scrollArea不勾选widgetResizable,sizeAdjustPolicy改为AdjustToContents,alignment改为AlignHCenter、AlignVCenter
label,不勾选scaledContents
【头文件】
#pragma once #include <QtWidgets/QMainWindow> #include "ui_ImageViewer.h" //#include<QScrollArea> class ImageViewer : public QMainWindow { Q_OBJECT public: ImageViewer(QWidget *parent = Q_NULLPTR); //private slots: void loadFile(); void saveAs(); //保存图像 void zoomOut(); //缩小 void zoomIn(); //放大 void normalSize(); //还原 void fitToWindow(); //适应窗体 private: Ui::ImageViewerClass ui; QImage image; double scaleFactor; //缩放系数 public: };
【cpp文件】
#include "ImageViewer.h" #include<QFileDialog> #include<QScrollBar> #include<QImageWriter> //#include<QScrollArea> //滚动区域,当图像过大时,会自动出现滚动条 ImageViewer::ImageViewer(QWidget *parent) : QMainWindow(parent) { ui.setupUi(this); connect(ui.actionOpen, &QAction::triggered, this, &ImageViewer::loadFile); //自定义函数 connect(ui.actionExit, &QAction::triggered, this, &QWidget::close); //系统函数 connect(ui.actionSaveAs, &QAction::triggered, this, &ImageViewer::saveAs); connect(ui.pushButton, &QPushButton::clicked, this, &ImageViewer::zoomOut); connect(ui.pushButton_2, &QPushButton::clicked, this, &ImageViewer::zoomIn); connect(ui.pushButton_3, &QPushButton::clicked, this, &ImageViewer::normalSize); connect(ui.pushButton_4, &QPushButton::clicked, this, &ImageViewer::fitToWindow); } //ui界面属性设置说明 //scrollArea不勾选widgetResizable,sizeAdjustPolicy改为AdjustToContents,alignment改为AlignHCenter、AlignVCenter //label,不勾选scaledContents void ImageViewer::loadFile() { QFileDialog dialog(this, "打开图片",NULL, "Image Files (*.bmp) \n Image Files (*.png *.jpg)"); //优先bmp格式 if (dialog.exec() != QDialog::Accepted) { return; } QString fullPath = dialog.selectedFiles().first(); //获取图片全路径 image.load(fullPath); //窗口标题“文件名 - 窗体名” QFileInfo fi(fullPath); //fi.fileName()获取文件名 const QString title = QString("%1 - %2").arg(fi.fileName()).arg(windowTitle()); setWindowTitle(title); //状态栏显示图片信息 const QString msg = QString("分辨率:%1×%2 ,位深度:%3").arg(image.width()).arg(image.height()).arg(image.depth()); ui.statusBar->showMessage(msg); //状态栏显示图片信息 //显示图片 ui.label->setPixmap(QPixmap::fromImage(image)); ui.label->adjustSize(); //控件适应图片 ui.scrollArea->setWidget(ui.label); //让label显示在scrollArea控件。注意窗体上label控件与scrollArea控件并列关系,而非嵌套。label大小设置为0以不占空间。alignment设置为水平、垂直居中,这样图片会居中显示。 scaleFactor = 1.0; //缩放系数 return; } void ImageViewer::saveAs() { QFileDialog dialog(this, "保存图片", NULL, "Image Files (*.bmp) \n Image Files (*.png *.jpg)"); dialog.setAcceptMode(QFileDialog::AcceptSave); if (dialog.exec() != QDialog::Accepted) { return; } QImageWriter writer(dialog.selectedFiles().first()); writer.write(image); } //缩小 void ImageViewer::zoomOut() { scaleFactor *= 0.8; //每次缩小0.8 ui.label->setScaledContents(true); //图片适应控件 ui.label->resize(scaleFactor * ui.label->pixmap(Qt::ReturnByValue).size()); //注意,图片大小未变,而是label改变 } //放大 void ImageViewer::zoomIn() { scaleFactor *= 1.2; //每次放大1.2 ui.label->setScaledContents(true); //图片适应控件 ui.label->resize(scaleFactor * ui.label->pixmap(Qt::ReturnByValue).size()); //注意,图片大小未变,而是label改变 } //还原 void ImageViewer::normalSize() { ui.label->adjustSize(); //控件适应图片。或者用以下三行 scaleFactor = 1.0; //ui.label->setScaledContents(true); //图片适应控件 //ui.label->resize(scaleFactor * ui.label->pixmap(Qt::ReturnByValue).size()); //注意,图片大小未变,而是label改变 } //适应窗体 void ImageViewer::fitToWindow() { ui.label->setScaledContents(true); //图片适应控件 ui.label->resize(ui.scrollArea->width()-1,ui.scrollArea->height()-1); }