Display Image While Sliding by Qt


This article is something that I rewrite again in C++, a programming article in Python, Display Image While Sliding by PySide | DeVlog – Fly With Your Devil’s Wings –.

I will describe, as can be seen well in the slide-show, how to display image while sliding in the vertical and horizontal by Qt. I also touched on the Qt-Properties.

Note: The code following, I have validated in Qt4.8 + Ubuntu(Xubuntu)13.04, Windows7.

Put a “Label” to the Main Window

First, define a framework of the application. In the main window, try to place the “label” to display the image “hoge.jpg”. (Since slide later, please prepare the “hoge.jpg” not so large.) In addition, “setGeometry()” of line 15, is setting the size of the main window. Please give appropriate values for your environment.

I generated the label that displays the image as a child of MainWindow.

When you run, it is as follows.

Deal With Qt-Property

To slide the “label” as defined here, you can use the animation technology. There are several ways to run the animation in Qt. The way to use Property will be used most often. The animation is achieved by changing little by little “properties” which QObject has. In Qt, the entity of “property” is the so-called “Setter” and “Getter”. You can find access functions (“Setter” and “Getter”) in the reference. If you define a property, you must use “Q_PROPERTY” macro.

Define the Animation

Well, the purpose of this article, “slide” can be achieved by changing the “pos” property of QWidget. “pos” is a property of QPoint to retain the position of the upper-left corner of the object.

First, define QPropertyAnimation object.

It means that animates the “pos” property of the “label” object. You must give the propery name as a string.
After, define the duration spent on the animation, initial and end value of “pos”.

And, start the animation.

By inserting the definition of the series of QPropertyAnimation object “an” after window.show() of application framework at the first, it is completed. When you run these codes, they will work like the video that you can find at the beginning of this article.

In addition, I have defined QPropertyApplication object as local variables in the main function in this article. However, if you run start() function not holding the QPropertyApplication object until the end of animation, the animation will be terminated. (You may also see the animation so that it is not running at all.) Please be careful enough about the scope of the object.

And I’ve prepared here a complete source. Next time, I will describe the fade-in or fade-out of the image.

[Referenced Site]
The Property System | Documentation | Qt Project

[Related Site]
junf/QtSamples – GitHub –

[Related Articles]

  1. Display Images in Full-Screen by Qt, Multi-Platform GUI Lib | DeVlog – Fly With Your Devil’s Wings –
  2. Display Image While Sliding by PySide | DeVlog – Fly With Your Devil’s Wings –
  3. To Display Images in Full-Screen by PySide | DeVlog – Fly With Your Devil’s Wings –
  4. Fade in / Fade-out Images by PySide | DeVlog – Fly With Your Devil’s Wings –
  5. Realize Zoom-in and Zoom-out the Image in PySide | DeVlog – Fly With Your Devil’s Wings –

Your email address will not be published.