QLabel中显示图片，让图片保持比例进行放大缩小

目录

1.先看效果图

2.实现该功能的具体步骤

3.具体代码及相应解释。

4.结语

---

1.先看效果图

本例子实现了一个空白的Wigdet上显示一张图片，该图片保持原有的比例进行显示，当你改变Widget的宽高的同时，图片依然能保持原有比例进行放大缩小显示。该功能按理说是一个很基础的功能，Qt官方应该直接封装好，但是并没有，只能自己多写几行代码实现了。

2.实现该功能的具体步骤

1.先拖拽一个Widget，名称为m_pWidgetBg;m_pWidgetBg中放置一个QLabel,在QLabel中加载一个图片，其中不要给m_pWidgetBg设置任何布局。在QLabel中加载图片的代码后面会给出。做完这一步，会得到三个东西，最外层的m_pWidgetBg，且没有布局，一个普通的QLabel控件，以及用代码加载完成的QLabel中的图片。

2.QLabel先按照图片大小比例加载图片，然后又让图片填充满整个QLabel,当最外层的m_pWidgetBg大小发生变化的时候，我们只需要重新计算(按比例计算)并设置QLabel的大小，因为图片是填充整个QLabel的，所以图片就会保持原有的比例。具体按比例计算，直接看第三部分的具体的代码。

3.具体代码及相应解释。

1.按步骤添加好相应的控件

2.项目.h文件

#pragma once

#include <QWidget>
#include "ui_Pet2DWidget.h"
#include <qimage.h>

class CPet2DWidget : public QWidget
{
	Q_OBJECT

public:
	CPet2DWidget(QWidget *parent = Q_NULLPTR);
	~CPet2DWidget();

	void InitUi();
protected:
	void paintEvent(QPaintEvent* event);

private:
private:
	Ui::CPet2DWidget ui;
	QImage* m_pImage;			//加载图片的类
	float m_fScale;				//图片宽高比

};

其中QImage* m_pImage; 用来加载图片；

float m_fScale;    用来保存图片的宽高比

3.项目.cpp文件

#include "Pet2DWidget.h"

CPet2DWidget::CPet2DWidget(QWidget *parent)
	: QWidget(parent)
	, m_fScale(1)
{
	ui.setupUi(this);
	InitUi();
}

CPet2DWidget::~CPet2DWidget()
{
}

void CPet2DWidget::InitUi()
{
	//添加一张图片进行显示
	m_pImage = new QImage(":/CDesktopPet/Resource/image/bobi.png");
	QPixmap pixmap = QPixmap::fromImage(*m_pImage);
	pixmap.scaled(ui.m_pLabelImg->size(),Qt::IgnoreAspectRatio, Qt::SmoothTransformation);
	ui.m_pLabelImg->setPixmap(pixmap);
	ui.m_pLabelImg->setScaledContents(true);    //让图片填充满QLabel
	int imgW = m_pImage->width();
	int imgH = m_pImage->height();
	m_fScale = imgW / imgH;               //计算一下宽高比,获得一个比例
	ui.m_pLabelImg->resize(imgW, imgH);  //QLabel的宽高和图片宽高一致

}

void CPet2DWidget::paintEvent(QPaintEvent* event)
{
    //如果m_pBgWidget的宽大于高了,就按照它的高计算比例大小
	if (ui.m_pBgWidget->width() > ui.m_pBgWidget->height())
	{
		float fScaleH = ui.m_pBgWidget->height();
		float fScaleW = fScaleH * m_fScale;
		ui.m_pLabelImg->resize(fScaleW, fScaleH); //重新设置QLabel的宽和高
	}
	else
	{
    //如果m_pBgWidget的宽小于高了,就按照它的宽计算比例大小
		float fScaleW = ui.m_pBgWidget->width();
		float fScaleH = fScaleW / m_fScale;
		ui.m_pLabelImg->resize(fScaleW, fScaleH);//重新设置QLabel的宽和高
	}
}

在InitUI()函数中加载了图片，先让图片填充满整个QLabel，再把QLabel大小设置和图片原本宽高一样，也实现了保持原有的比例进行显示图片。

重写了paintEvent()函数，在函数中先计算此时是宽和高的值哪个大，如果宽大于高了，就以当前的高为基准，根据当前高的值，依据图片原有比例的值，计算最新的宽是，再将宽和高复制个QLabel,因为图片是填充整个QLabel,所以图片也会变为最新的宽和高。

4.结语

代码不复杂，用于记录。继续加油！