[QT Course Design] 1: Basic layout design and picture selection function

Preface

Recently, due to some personal life matters, the course design has been delayed for a long time=. =
After confirming the relevant requirements and making repeated changes, the current version was finally decided. The first is the most basic requirement, the function of opening and displaying pictures.

basic layout

There is basically no layout in this basic layout. First, a tabWidget is used to distinguish the picture functional area and the video functional area.

Let’s start with the picture ribbon. The black square in the middle is the piclabel in the structure diagram. Use the label to place the picture that needs to be displayed.
The left toolbar uses dockWidget as the toolbox column (workboxwidget in the structure diagram), in which a Vertical Layout is used to place buttons, and seven function buttons are placed in order. I use English literal translation or pinyin for naming. Anyway, just look at it yourself. Just understand.
At this point, the most basic part of the layout has been designed, and you can start designing the first function and selecting pictures.

Select Image

Right-click the picture button in the ui file (in my case it is ChPicBtn), go to the slot, clicked, and the button click trigger event will be automatically generated.

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;
    }

The image selection function has been completed, but it was found that there was something wrong with the image size, so one step of size matching was needed to process the image.
We create a method to process images.

//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;

    }

Remember to add this method to the header file

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

The idea here is to use a method to read the size of the read image and the Label that displays the image, assign the size of the Label to the image, and handle the vertical and horizontal relationships at the same time.

Add the method to handle the image size to the selected image method you just wrote, and then display the 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;
    }
}

At this time, the picture selection function has basically been completed.