Realize Zoom-in and Zoom-out the Image in PySide


This time, let’s zoom in or zoom out the image using PySide. In this way, you will get the effect to be displayed while the enlargement or reduction image. Before you read this article, to be easier to understand, you should read
Display Image While Sliding by PySide | DeVlog – Fly With Your Devil’s Wings –.

I have verified in Python3.3 also this article.

Make the Skeleton of the Application

First, make the skeleton of the application as usual. Display the “label” that displays an image “hoge.jpg” in the main window “wndow”. Please adjust as necessary parameters of setGeometry.

When you run, the image is displayed in the upper left corner.
base

How to Achieve the Zoom

QLabel has a property called “scaledContents”. By setting it to “True”, the image stored in it will be enlarged or reduced to be displayed the same as the size of the label. Using this property, without the operation to expand or shrink the image itself, zoom can be achieved with only zoom in or out “label”.

You can write a method to get the zoom animation as follows. Give QLabel objects as “target”, and give zoom magnification of the first and last to “mag1”, “mag2” (0-1).

You can realize the zoom by using “setScaledContents(True)” to set “scaledContents” “True” and animating the “size” property of QLabel.
Because QSize object (mapsize) has over-loaded “*” operator, new QSize object can be obtained simply by multiplying the magnification. We are lucky to be able to use “Operator overloading” even in Python.

To run the animation, run the start method of animation object.

To Zoom on the Basis of the Image Center

If zoomed on the basis of the image center, the image will protrude from window while placing the image in the upper left corner. Therefore, as first prepared, place the image to window center. Such as the following, create a method to calculate “pos” (upper left corner of the image) in the case where you place the image which width is “width” and height is “height” to the center of the parent object “parent”.

Using this method, place the image to window center.

center

So, try to think again the zoom of the central fixed. Zooming with left upper being fixed is that “pos” is fixed. Because “pos” is by definition coordinate of the upper left corner of the target, it is obvious. To put it the other way around, if the central fixed, “pos” changes with zooming.
zoom

This is, you should make an animation that changes also “pos” at the same time as the zoom of the image. Please also see Display Image While Sliding by PySide | DeVlog – Fly With Your Devil’s Wings – for the animation to change the “pos” (slide the image).

Fist, define a method to get the animation to change “pos” from pos1 to pos2.

Next, prepare a method to calculate the position of the “pos” when zoom the target.

Then, create a method to get the animation to zoom at a fixed target center. By using the QParallelAnimationGroup, you can run at the same time the move and zoom. (As an example of using the QSequentialAnimationGroup, see also Fade in / Fade-out Images by PySide | DeVlog – Fly With Your Devil’s Wings –.)

When you run start() method of the animation object, you can obtain effects such as those shown at the beginning of this page. In addition, since I have prepared here the complete code, please try to run it prepared “hoge.jpg”.

[Related Site]
junf/PySideSamples ยท GitHub

[Related Articles]

  1. To Display Images in Full-Screen by PySide | DeVlog – Fly With Your Devil’s Wings –
  2. Display Image While Sliding by PySide | DeVlog – Fly With Your Devil’s Wings –
  3. Fade in / Fade-out Images by PySide | DeVlog – Fly With Your Devil’s Wings –

Your email address will not be published.