【QT课程设计】一：基本布局设计与选择图片功能

文章目录

前言
基本布局
选择图片

前言

最近由于一些个人生活事情，课程设计拖了很久=。=
在确认过相关要求、反复更改后，最终决定当前的版本，首先是最基本的要求，打开图片并显示的功能。

基本布局

这个基本布局，基本就没咋布局，首先用了一个tabWidget来区分图片功能区与视频功能区。
暂时布局结构图

先以图片功能区开始，中间黑色的方块是结构图中piclabel，用label来放置需要显示的图片。
左侧工具栏用dockWidget做工具箱栏目（结构图中workboxwidget），其中用一个Vertical Layout来放置按钮，依次放置七个功能按钮，命名我这边用了英文直译或拼音的方式，反正只要自己看得懂就行。
至此，最基本的一部分布局已经设计完了，可以开始设计第一个功能，选择图片。

选择图片

在ui文件中右键选择图片按钮（我这边是ChPicBtn），转到槽，clicked，按钮单击触发事件会自动生成好。

void MainWindow::on_ChPicBtn_clicked()
{
    
    
    //打开图片文件，选择图片
    QStringList srcDirPathListS = QFileDialog::getOpenFileNames(this, tr("选择图片"),
                                                                QDir::homePath(), tr("图像文件(*.jpg *.png *.bmp)"));
    qDebug()<<"图片路径"<<srcDirPathListS; //在控制台输出路径观察
    QImage image=QImage(srcDirPathListS.at(0));//初始化选中第一张图片
    qDebug()<<"image:"<<image;
    if(!image.isNull())
    {
    
    
        ui->piclabel->setPixmap(QPixmap::fromImage(image));
    }
    else
    {
    
    

         return;
    }

初步效果

图片选择功能已经完成了，但发现图片大小出了点问题，所以需要做一步大小匹配来处理图片。
我们创建一个方法来处理图片。

//mainwindow.cpp
//图片居中显示,图片大小与label大小相适应
QImage MainWindow::ImageSetSize (QImage  qimage,QLabel *qLabel)
{
    
    
    QImage image;
    QSize imageSize = qimage.size();
    QSize labelSize = qLabel->size();

    double dWidthRatio = 1.0*imageSize.width() / labelSize.width();
    double dHeightRatio = 1.0*imageSize.height() / labelSize.height();
            if (dWidthRatio>dHeightRatio)
            {
    
    
                image = qimage.scaledToWidth(labelSize.width());
            }
            else
            {
    
    
                image = qimage.scaledToHeight(labelSize.height());
            }
            return image;

    }

记得要去头文件里添加这个方法

//mainwindow.h
public：
    QImage ImageSetSize(QImage  qimage,QLabel *qLabel);

这里的思路是用一个方法读取到读入的图片与显示图片的Label的size，将Label的大小赋值给image，同时处理纵横关系。

将刚刚写好的选中图片方法里，加入处理图片大小的方法，再显示图片。

void MainWindow::on_ChPicBtn_clicked()
{
    
    
    //打开图片文件，选择图片
    QStringList srcDirPathListS = QFileDialog::getOpenFileNames(this, tr("选择图片"),
                                                                QDir::homePath(), tr("图像文件(*.jpg *.png *.bmp)"));
    qDebug()<<"图片路径"<<srcDirPathListS; //在控制台输出路径观察
    QImage image=QImage(srcDirPathListS.at(0));//初始化选中第一张图片
    qDebug()<<"image:"<<image;
    if(!image.isNull())
    {
    
       
        image =ImageSetSize(image,ui->piclabel); //处理图像大小
        ui->piclabel->setPixmap(QPixmap::fromImage(image));
    }
    else
    {
    
    

         return;
    }
}

处理大小后效果

这个时候已经基本完成了选择图片功能。