Qt自适应大小显示图片，添加菜单

电玩女神 2022-06-18 08:52 409阅读 0赞

由于后面的图像处理需要UI，OpenCV自带也不怎么会，MFC实在懒得学的。听同学说Qt不错，就用Qt做UI了。

本文主要介绍三个内容：在Qt Creator中使用OpenCV2、Qt中自适应显示图片以及在Qt窗口中添加菜单

## 1.在Qt Creator中使用OpenCV2 ##

一直使用 Visual Studio作为开发环境，OpenCV2在Visual Studio中也已经配置好了，而且Qt也有官方开发的Visual Studio的插件，所以就想着直接在Visual Studio中用OpenCV2+Qt5的。但是Qt在Visual Studio用着实在别扭，特别是UI文件同步到VS中有一定的延迟，也就是你在UI上拖放了一个Button，但是要过一段时间VS的自动提示才会有那个Button对象名的提示，并且改动UI后要首先编译一次。所以，最后决定在Qt Creator中使用OpenCV2。

网上看了不少Qt Creator中使用OpenCV2都是自己编译OpenCV的源代码生成库文件，然后再Qt Creator中使用。我是直接使用OpenCV为VS预先编译好的库文件，配置方法也很简单，就是打开项目的pro文件，在该文件中添加如下内容：

![复制代码][copycode.gif]

INCLUDEPATH += E:/opencv/build/include\
        E:/opencv/build/include/opencv2
    
    win32:CONFIG(debug, debug|release): {
    LIBS += -LE:/opencv/build/x86/vc12/lib \
    -lopencv_calib3d249d \
    -lopencv_contrib249d \
    -lopencv_core249d \
    -lopencv_features2d249d \
    -lopencv_flann249d \
    -lopencv_gpu249d \
    -lopencv_highgui249d \
    -lopencv_imgproc249d \
    -lopencv_legacy249d \
    -lopencv_ml249d \
    -lopencv_nonfree249d \
    -lopencv_objdetect249d \
    -lopencv_photo249d \
    -lopencv_stitching249d \
    -lopencv_ts249d \
    -lopencv_video249d \
    -lopencv_videostab249d
    } else:win32:CONFIG(release, debug|release): {
    LIBS += -LE:/opencv/build/x86/vc12/lib \
    -lopencv_core249 \
    -lopencv_imgproc249 \
    -lopencv_highgui249 \
    -lopencv_ml249 \
    -lopencv_video249 \
    -lopencv_features2d249 \
    -lopencv_calib3d249 \
    -lopencv_objdetect249 \
    -lopencv_contrib249 \
    -lopencv_legacy249 \
    -lopencv_flann249
    }

![复制代码][copycode.gif]

把上面文件的路径以及版本号改成自己机器上的即可。

## 2.Qt窗口自适应大小显示图片 ##

实现思路也挺简单的，使用QLabel显示图片，把这个QLabel放在一个ScrollArea上面，这样图片过大的时候会自动的添加滚动条，最后窗体使用水平布局，这样ScrollArea的大小会随着窗口的大小自动改变。下面上代码

private:
        Ui::MainWindow *ui;
        QLabel *label ;

首先声明一个QLabel用于图片（ScrollArea在设计器上拖放到窗体上，并设置窗口的布局方式为水平布局）。

设置QLabel的pixmap，并设置QLabel的大小和图片一致，最后将该QLabel添加到ScrollArea上。

![复制代码][copycode.gif]

QString fileName = QFileDialog::getOpenFileName(this,"Choose Image","x:/image",("Image File(*.*)")) ;
        QImage image ;
        image.load(fileName) ;
    
        label = new QLabel();
        label->setPixmap(QPixmap::fromImage(image));
        label->resize(QSize(image.width(),image.height()));
        ui->scrollImag->setWidget(label);

![复制代码][copycode.gif]

效果如下：

[![image][]][image 1]

图片比较大，自动的添加了滚动条。

[![image][image 2]][image_image 2]

改变了窗口的大小，图片全部显示出来，滚动条消失。

## 3.添加菜单 ##

Qt中窗体上的菜单栏对象是QMenuBar，菜单栏上可以有多个菜单(QMenu)，每个菜单可以下拉多个选项(QAction)。

首先需要想窗体中添加一个QMenuBar（Qt5好像是默认添加的），然后一个个菜单，并添加到QMenuBar上。

fileMenu = ui->menuBar->addMenu(tr("File"));
    grayLevelTransMenu = ui->menuBar->addMenu(tr("LineTransform")) ;

menuBar的addMenu的返回值是QMenu的实例，这里添加两个菜单：File和LineTransform

接下来要创建菜单选项也就是Action，并为这些Action绑定上槽函数，最后将创建好的Action添加到菜单上就完成了。

![复制代码][copycode.gif]

private:
        void createMenu();
        void createAction();
    
    private:
        Ui::MainWindow *ui;
        QLabel *imageLabel ;
    
        QMenu *fileMenu ;
        QMenu *grayLevelTransMenu ;
    
        QAction *openImageAction ;
        QAction *lineTransformAction ;
        QAction *logTransformAction ;
        QAction *powerTransfromAction ;
        QAction *expTransformAction;
        QAction *grayEqualizeAction;
    
    private slots:
        void openImageActionSlot();
        void lineTransformActionSlot();
        void logTransformActionSlot();
        void powerTransfromActionSlot();
        void expTransformActionSlot();
        void grayEqualizeSlot();

![复制代码][copycode.gif]

声明需要的菜单(QMenu)和菜单选项(QAction)，并且声明好了每个QAction所使用的槽函数。CreateMenu和CreateAction用来创建菜单和菜单选项的。

openImageAction = new QAction(tr("Open Image"),this) ;
        QObject::connect(openImageAction,SIGNAL(triggered()),this,SLOT(openImageActionSlot()));

创建打开图片的菜单选项，并绑定好了槽函数，其余的菜单选项于此类似。

fileMenu = ui->menuBar->addMenu(tr("File"));
        fileMenu->addAction(openImageAction);

创建File菜单，并将打开图片的菜单选项添加到其下。

最终效果：

[![image][image 3]][image_image 3]

[copycode.gif]: /images/20220618/64c3cc51bc4b40359bb16bd615d4947f.png
[image]: /images/20220618/a08bc0d7b4d74ef69a1a141d78a947f2.png
[image 1]: http://images.cnitblog.com/blog/439761/201410/251028472159939.png
[image 2]: http://images.cnitblog.com/blog/439761/201410/251028564962306.png
[image_image 2]: /images/20220618/1ae5a417e30344508602cc0f799bf3ea.png
[image 3]: http://images.cnitblog.com/blog/439761/201410/251029002938145.png
[image_image 3]: /images/20220618/4fb2291d71d34129a0e149aa63614fe5.png