[Qt & Visual Studio] 이미지 파일 선택하여 그리기

소개

보통 새로운 언어나 컴파일러를 사용하면 첫 예제 프로젝트가 'Hello World'로 시작하죠?

저 같은 경우는 Hello World 다음으로 이미지 파일 선택 후 그리는 작업을 시작합니다.

이미지 객체는 어떤 것이 있는지, 그려지는 대상에는 어떤 컨트롤이 사용되는지를 확인하는 것이 가장 기본 단계이기 때문입니다.

그래서 이번 포스팅에서는 Button을 클릭하면 이미지 파일을 선택하고, 선택된 이미지를 Label에 그리는 예제를 보여줍니다.

이번 프로젝트를 시작하기 전에, 아래 링크를 참고하시면 좋을 것 같습니다.

[Qt] Visual Studio에서 Qt Designer Button 이벤트 연결하기

따라하기

이번 프로젝트는 QDialog 기반으로 생성합니다.

그리고 Qt Designer에서는 아래와 같이 Push Button과 QLabel을 추가합니다.

저는 이미지 정보를 표시하기 위해 여러 개의 QLabel을 별도로 추가했습니다.

Qt Designer 배치 화면

Visual Studio에서 헤더 파일에는 다음과 같이 Slot 함수를 추가합니다. 

#pragma once

#include <QtWidgets/QDialog>
#include "ui_QtGuiApplication1.h"
#include <qfiledialog.h>

class QtGuiApplication1 : public QDialog
{
	Q_OBJECT

public:
	QtGuiApplication1(QWidget *parent = Q_NULLPTR);

private:
	Ui::QtGuiApplication1Class ui;

private slots:
	void ButtonClicked();
};

소스 파일에는 다음과 같이 추가합니다.

#include "QtGuiApplication1.h"

QtGuiApplication1::QtGuiApplication1(QWidget *parent)
	: QDialog(parent)
{
	ui.setupUi(this);

	connect(ui.pushButton_LoadImage, SIGNAL(clicked()), this, SLOT(ButtonClicked()));
}

void QtGuiApplication1::ButtonClicked()
{
	QFileDialog dlg;
	QString filePath = dlg.getOpenFileName(this, "Load Image", "", "Image Files (*.png *.jpg *.bmp)");
	
	QString fileName = filePath.section("/", -1);
	ui.label_FileName->setText(fileName);
	
	QPixmap img;
	img.load(filePath);

	int w = img.width();
	ui.label_Width->setText(QString::number(w));
	int h = img.height();
	ui.label_Height->setText(QString::number(h));
	
	ui.label_Display->setPixmap(img);
	ui.label_Display->setScaledContents(true);
}

17번째 줄은 파일 이름을 추출하기 위해 section 함수를 사용했습니다.

28번째 줄의 setPixmap 함수는 불러온 QPixmap 이미지 정보를 QLabel에 설정하는 것입니다.

29번째 줄의 setScaledContents 함수는 QLabel의 사용 가능한 모든 공간을 채우는 동작 수행합니다.

즉, 설정된 Pixmap의 크기가 조정됩니다.

결과는 아래와 같습니다.

프로젝트 예제 결과

Image Drawing Example.zip