QT display Image zoom in and out of the move (all the functions provided by QT directly)

This article original in www.yafeilinux.com reprint please indicate the source.

Now let's implement the picture on the window and learn how to pan, zoom, rotate, and twist the picture. Here we use the Qpixmap class to implement the image display.

First, the use of qpixmap display pictures.

1. Make a copy backup of the previous project folder, and here we rename the project folder to Painter05. (as I've said before, it's a good habit to back up the engineering catalog often.)

2. Create a new folder in the Debug folder of the project folder, which I named images, to store the image you want to use. I put a picture of linux.jpg here. As shown in.

3. Open the project in Qt creator. (That is, open the. Pro file in the project folder).

4. Change the PaintEvent () function in the Dialog.cpp file as follows.

void Dialog::p aintevent (qpaintevent *)
{
qpainter painter (this);
QPIXMAP pix;
Pix.load ("images/linux.jpg");
Painter.drawpixmap (0,0,100,100,pix);
}

This creates a new Qpixmap class object, adds a picture to it, and then displays the picture in a rectangle that starts at (0,0) and has a width height of 100. You can change the size of the rectangle and look at the effect. The final program works as follows.

(Note: The following operations will be related to the coordinates, please proceed first, we will explain the coordinate system in the next section.) ）

Second, the translation is realized by changing the origin of the coordinates.

The translate () function in the Qpainter class realizes the change of coordinate origin, and after changing the origin, this point will become the new origin (0,0);

For example:

void Dialog::p aintevent (qpaintevent *)
{
qpainter painter (this);
QPIXMAP pix;
Pix.load ("images/linux.jpg");
Painter.drawpixmap (0,0,100,100,pix);

Painter.translate (100,100); Set (100,100) as the origin of the coordinates.
Painter.drawpixmap (0,0,100,100,pix);
}

Here (100,100) is set to the new coordinate origin, so the following (0,0) point map is equivalent to the previous (100,100) point map. The effect is as follows.

Third, realize the zoom of the picture.

We can use the scaled () function in the Qpixmap class to enlarge and reduce the image.

For example:

void Dialog::p aintevent (qpaintevent *)
{
qpainter painter (this);
QPIXMAP pix;
Pix.load ("images/linux.jpg");
Painter.drawpixmap (0,0,100,100,pix);

Qreal width = pix.width (); Get the width and height of the previous picture
Qreal height = pix.height ();

PIX = pix.scaled (width*2,height*2,qt::keepaspectratio);
Enlarges the width and height of the picture by twice times, and maintains a ratio of width to height within a given rectangle.
Painter.drawpixmap (100,100,pix);
}

Where the parameter qt::keepaspectratio is the way the picture is scaled. We can view its help. Place the mouse pointer over the code, and when the F1 prompt appears, press the F1 key to see the help. Of course we can also find the code directly in the Help.

This is an enumeration variable, there are three values, just look at its picture can be roughly understood, qt::ignoreaspectratio is not to maintain the aspect ratio of the picture, Qt::keepaspectratio is to maintain the aspect ratio in the given rectangle, the last one is to maintain the aspect ratio, But it may exceed the given rectangle. The rectangle given here is determined by the parameters given when we display the picture, such as Painter.drawpixmap (0,0,100,100,pix), which is the width and height of the starting point at (0,0) is 100 of the rectangle.

The program works as follows.

Four, to achieve the rotation of the picture.

Rotation uses the rotate () function of the Qpainter class, which is rotated by default at the center of the origin. We're going to change the center of rotation, which can be done using the translate () function we talked about earlier.

For example:

void Dialog::p aintevent (qpaintevent *)
{
qpainter painter (this);
QPIXMAP pix;
Pix.load ("images/linux.jpg");
Painter.translate (50,50); Make the center of the picture the center of the rotation
Painter.rotate (90); Rotate clockwise 90 degrees
Painter.translate ( -50,-50); Restore the origin.
Painter.drawpixmap (0,0,100,100,pix);
}

You must change the center of rotation, then rotate it, and then restore the origin to achieve the desired effect.

Run the program with the following effect.

V. To realize the distortion of the picture.

The implementation of the distortion of the picture is done using the shear (qreal sh,qreal SV) Function of the Qpainter class. It has two parameters, the preceding parameters to achieve the horizontal deformation, the following parameters to achieve longitudinal deformation. When their value is 0 o'clock, no distortion is indicated.

For example:

void Dialog::p aintevent (qpaintevent *)
{
qpainter painter (this);
QPIXMAP pix;
Pix.load ("images/linux.jpg");
Painter.drawpixmap (0,0,100,100,pix);
Painter.shear (0.5,0); Transverse distortion
Painter.drawpixmap (100,0,100,100,pix);
}

The effect is as follows:

Other twist effects:

Painter.shear (0,0.5); Longitudinal twist

Painter.shear (0.5,0.5); Transverse twist

The shape of the picture changes, in fact, the use of coordinate system changes to achieve. We'll explain the coordinate system in the next section. Several of the functions in this section, which we can view in their help file, are explained in detail.

Http://www.cnblogs.com/hnrainll/archive/2011/05/24/2055766.html

QT display Image zoom in and out of the move (all the functions provided by QT directly)