Creating a Image,Picture widget in Qt4 that keeps the aspect ration has zoom and rotate features

To display image in Qt4 you can use a QLabel and the setPixmap() method. But if you need something more complex that will keep the aspect ratio and can zoom and rotate you will have to create a custom widget. This is how i did it for a Image viewer application that i make it in Qt4 using c++.

#ifndef IMAGEWIDGET_H

#define IMAGEWIDGET_H

#include <QWidget>

class QSize;

class QImage;

class ImageWidget : public QWidget

{

Q_OBJECT

public:

explicit ImageWidget(QWidget *parent = 0);

void setImage(const QImage &image);

QImage *getImage();

float getZoomFactor();

//this is absolute depends only on the size of the image

void setZoomFactor(float zf);

//this is relative with the curent size/zoom

void zoom(float zoomWithThisFactor);

//if set to true the image will be zoomed to fit the widget

void setZoomToFit(bool ztf);

signals:

public slots:

protected:

//custom drawing rutine

void paintEvent(QPaintEvent *);

//custom sizeHint method

QSize sizeHint() const;

private:

QImage *image;

float zoomFactor;

float aspectRatio;

bool zoomToFit;

void computeZoomFactorToFitImage();

void adjustSize();

};

#endif // IMAGEWIDGET_H

I subclased QWidget and reimpemented 2 methods paintEvent() and sizeHint():

void ImageWidget::paintEvent(QPaintEvent *)

{

int x,y,w,h;

//compute the image displaty size by multipling with the zoom factor

w=image->width()*zoomFactor;

h=image->height()*zoomFactor;

//compute the x and y offset

x=(rect().width()-w)/2;

y=(rect().height()-h)/2;

//if from some strange bug we get a negative value,

//probly this must be changed to an assert or thow and error and fix the eventual problem

x=qMax(x,0);

y=qMax(y,0);

QRectF target(x,y,w,h);

QPainter p(this);

p.drawImage(target,*image);

}

QSize ImageWidget::sizeHint() const

{

if(image!=NULL)

{

QSize hint= image->size();

hint=zoomFactor*hint;

return hint;

}else

return this->minimumSize();

}

The zoomToFit method will compute the zoom factor to fit the widget and will zoom the image

void ImageWidget::setZoomToFit(bool ztf)

{

this->zoomToFit=ztf;

if(zoomToFit)

{

computeZoomFactorToFitImage();

}

else

{

zoomFactor=1.0;

}

adjustSize();

this->update();

}

void ImageWidget::computeZoomFactorToFitImage()

{

//compute the aspect ration of the widget

//cast t float to get a float result, if forget (float) you will get

//a int value

float ratio=rect().width()/(float)rect().height();

if(ratio>aspectRatio)

{//the widget width is larger relative of the image wirth

zoomFactor=rect().height()/(float)image->height();

}

else

{

zoomFactor=rect().width()/(float)image->width();

}

}

void ImageWidget::adjustSize()

{

resize(this->sizeHint());

}

You can find all the code on source forge in a Image viewer application, the application is licnsed under GPL v3 , if someone needs the code under other license email me and i can give the rights

UPDATE:

download

svn co https://kisviwer.svn.sourceforge.net/svnroot/kisviwer kisviwer

you must use a svn client or the svn command line application, if in linux install svn and paste that line in the terminal,and a drectory kisviwer will appear with the code,windws guys google it

a simple image viewer ,Qt4

Leave a Reply