{"id":24,"date":"2010-04-11T13:19:51","date_gmt":"2010-04-11T13:19:51","guid":{"rendered":"http:\/\/simion314.wordpress.com\/?p=24"},"modified":"2010-04-11T13:19:51","modified_gmt":"2010-04-11T13:19:51","slug":"creating-a-imagepicture-widget-in-qt4-that-keeps-the-aspect-ration-has-zoom-and-rotate-features","status":"publish","type":"post","link":"http:\/\/ploscariu.com\/wordpress\/2010\/04\/11\/creating-a-imagepicture-widget-in-qt4-that-keeps-the-aspect-ration-has-zoom-and-rotate-features\/","title":{"rendered":"Creating a Image,Picture widget in Qt4 that keeps the aspect ration has zoom and rotate features"},"content":{"rendered":"

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++.<\/p>\n

#ifndef IMAGEWIDGET_H<\/code><\/p>\n

#define IMAGEWIDGET_H<\/code><\/p>\n

#include <QWidget><\/code><\/p>\n

class QSize;<\/code><\/p>\n

class QImage;<\/code><\/p>\n

class ImageWidget : public QWidget<\/code><\/p>\n

{<\/code><\/p>\n

Q_OBJECT<\/code><\/p>\n

public:<\/code><\/p>\n

explicit ImageWidget(QWidget *parent = 0);<\/code><\/p>\n

void setImage(const QImage &image);<\/code><\/p>\n

QImage *getImage();<\/code><\/p>\n

float getZoomFactor();<\/code><\/p>\n

\/\/this is absolute depends only on the size of the image<\/code><\/p>\n

void setZoomFactor(float zf);<\/code><\/p>\n

\/\/this is relative with the curent size\/zoom<\/code><\/p>\n

void zoom(float zoomWithThisFactor);<\/code><\/p>\n

\/\/if set to true the image will be zoomed to fit the widget<\/code><\/p>\n

void setZoomToFit(bool ztf);<\/code><\/p>\n

signals:<\/code><\/p>\n

public slots:<\/code><\/p>\n

protected:<\/code><\/p>\n

\/\/custom drawing rutine<\/code><\/p>\n

void paintEvent(QPaintEvent *);<\/code><\/p>\n

\/\/custom sizeHint method<\/code><\/p>\n

QSize sizeHint() const;<\/code><\/p>\n

private:<\/code><\/p>\n

QImage *image;<\/code><\/p>\n

float zoomFactor;<\/code><\/p>\n

float aspectRatio;<\/code><\/p>\n

bool zoomToFit;<\/code><\/p>\n

void computeZoomFactorToFitImage();<\/code><\/p>\n

void adjustSize();<\/code><\/p>\n

};<\/code><\/p>\n

#endif \/\/ IMAGEWIDGET_H<\/code><\/p>\n

I subclased QWidget and reimpemented 2 methods paintEvent() and sizeHint():<\/p>\n

void ImageWidget::paintEvent(QPaintEvent *)<\/code><\/p>\n

{ <\/code><\/p>\n

int x,y,w,h;<\/code><\/p>\n

\/\/compute the image displaty size by multipling with the zoom factor<\/code><\/p>\n

w=image->width()*zoomFactor;<\/code><\/p>\n

h=image->height()*zoomFactor;<\/code><\/p>\n

\/\/compute the x and y offset<\/code><\/p>\n

x=(rect().width()-w)\/2;<\/code><\/p>\n

y=(rect().height()-h)\/2;<\/code><\/p>\n

\/\/if from some strange bug we get a negative value, <\/code><\/p>\n

\/\/probly this must be changed to an assert or thow and error and fix the eventual problem<\/code><\/p>\n

x=qMax(x,0);<\/code><\/p>\n

y=qMax(y,0);<\/code><\/p>\n

QRectF target(x,y,w,h);<\/code><\/p>\n

QPainter p(this);<\/code><\/p>\n

p.drawImage(target,*image);<\/code><\/p>\n

}<\/code><\/p>\n

QSize ImageWidget::sizeHint() const<\/code><\/p>\n

{<\/code><\/p>\n

if(image!=NULL)<\/code><\/p>\n

{<\/code><\/p>\n

QSize hint= image->size();<\/code><\/p>\n

hint=zoomFactor*hint;<\/code><\/p>\n

return hint;<\/code><\/p>\n

}else<\/code><\/p>\n

return this->minimumSize();<\/code><\/p>\n

}<\/code><\/p>\n

The zoomToFit method will compute the zoom factor to fit the widget and will zoom the image<\/p>\n

void ImageWidget::setZoomToFit(bool ztf)<\/code><\/p>\n

{<\/code><\/p>\n

this->zoomToFit=ztf;<\/code><\/p>\n

if(zoomToFit)<\/code><\/p>\n

{<\/code><\/p>\n

computeZoomFactorToFitImage();<\/code><\/p>\n

}<\/code><\/p>\n

else<\/code><\/p>\n

{<\/code><\/p>\n

zoomFactor=1.0;<\/code><\/p>\n

}<\/code><\/p>\n

adjustSize();<\/code><\/p>\n

this->update();<\/code><\/p>\n

}<\/code><\/p>\n

void ImageWidget::computeZoomFactorToFitImage()<\/code><\/p>\n

{<\/code><\/p>\n

\/\/compute the aspect ration of the widget<\/code><\/p>\n

\/\/cast t float to get a float result, if forget (float) you will get<\/code><\/p>\n

\/\/a int value<\/code><\/p>\n

float ratio=rect().width()\/(float)rect().height();<\/code><\/p>\n

if(ratio>aspectRatio)<\/code><\/p>\n

{\/\/the widget width is larger relative of the image wirth<\/code><\/p>\n

zoomFactor=rect().height()\/(float)image->height();<\/code><\/p>\n

}<\/code><\/p>\n

else<\/code><\/p>\n

{<\/code><\/p>\n

zoomFactor=rect().width()\/(float)image->width();<\/code><\/p>\n

}<\/code><\/p>\n

}<\/code><\/p>\n

void ImageWidget::adjustSize()<\/code><\/p>\n

{<\/code><\/p>\n

resize(this->sizeHint());<\/code><\/p>\n

}<\/code><\/p>\n

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<\/p>\n

UPDATE:<\/p>\n

download<\/p>\n

svn co https:\/\/kisviwer.svn.sourceforge.net\/svnroot\/kisviwer kisviwer<\/p>\n

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<\/p>\n

\"a<\/p>\n","protected":false},"excerpt":{"rendered":"

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 … Continue reading Creating a Image,Picture widget in Qt4 that keeps the aspect ration has zoom and rotate features<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-24","post","type-post","status-publish","format-standard","hentry","category-programming"],"kl_preview_url":"http:\/\/ploscariu.com\/wordpress\/?p=24&preview=1&kc_p=84be2e8a36","_links":{"self":[{"href":"http:\/\/ploscariu.com\/wordpress\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/ploscariu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ploscariu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ploscariu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ploscariu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":0,"href":"http:\/\/ploscariu.com\/wordpress\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"wp:attachment":[{"href":"http:\/\/ploscariu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ploscariu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ploscariu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}