Qt coordinate plot

1. Introduction to Coordinate System

In Qt, each window has its own coordinate system. By default, the upper-left corner of the window is the coordinate origin (0, 0). Then, the coordinates are increased horizontally to the right (X axis), and vertically downward (Y axis ). For example:

Void MyDraw: paintEvent (QPaintEvent *)

{

QPainterpaint (this );

Paint. setBrush (Qt: green );

Paint. drawRect (0, 0,100,100 );

Paint. setBrush (Qt: red );

Paint. Fig (-50,-50,100,100 );

}

In the above example, a green rectangle with a length and width of 100 pixels is first drawn at the origin (0, 0), and then at the point (-50,-50) draws a red rectangle of the same size (length and width are 100 pixels). Only a part of the red rectangle can be seen.

As follows:

This is because the other 100 of the image length and width drawn at the point (-50,-50) are blocked by the form.

2. Coordinate System Transformation.

Coordinate System Transformation is carried out using the transformation matrix. We can use the QTransform class to set the transformation matrix, because we generally do not need to change it, so it is not involved here. The following describes the application of coordinate system translation, scaling, rotation, and distortion.

2.1 use the translate () function for translation transformation.

Void MyDraw: paintEvent (QPaintEvent *)

{

QPainterpaint (this );

Paint. setBrush (Qt: green );

Paint. drawRect (0, 0,100,100 );

Paint. translate (100,100); // coordinate transformation. Use the point (100,100) as the origin point again.

Paint. setBrush (Qt: red );

Paint. drawRect (0, 0,100,100 );

Paint. translate (-100,-100); // coordinate transformation, moving (-100,-100) back to origin)

Paint. drawLine (0, 0, 50, 50 );

}

As follows:

Here (100,100) is used as the origin, so (100,100) is (100), and the previous (100) is. To re-create the original (0, 0) point as the origin point, set (-100,-100) to the origin point.

2.2 scale by using the scale () function.

Void MyDraw: paintEvent (QPaintEvent *)

{

QPainterpaint (this );

 

Paint. setBrush (Qt: green );

Paint. drawRect (0, 0,100,100 );

Paint. scale (2, 2); // zoom in twice

Paint. setBrush (Qt: red );

Paint. drawRect (50, 50, 50, 50 );

Paint. scale (0.5, 0.5); // reduce the paint size by half (restore to original)

Paint. setBrush (Qt: yellow );

Paint. drawEllipse (0, 0,100,100 );

}

As follows:

We can see that painter. scale (100,100) doubles the x-axis and Y-axis. The current (50, 50) point is equivalent to the previous () Point.

2.3 use the shear () function to perform distortion.

Void MyDraw: paintEvent (QPaintEvent *)

{

QPainterpaint (this );

Paint. setBrush (Qt: green );

Paint. drawRect (0, 0,100,100 );

Paint. shear (0, 1); // vertical twist 1 times

Paint. setBrush (Qt: red );

Paint. drawRect (0,100,100,100 );

Paint. shear (0,-1); // restore to original state

Paint. setBrush (Qt: yellow );

Paint. drawEllipse (0, 0,100,100 );

}

As follows:

Here, painter. shear (0, 1) is a vertical distortion. 0 indicates no distortion. When the first 0 is changed, it will distort the horizontal distortion. What is the effect of the distorted transformation, it is easy to find out.

2.4 use the rotate () function for proportional transformation to achieve scaling.

Void MyDraw: paintEvent (QPaintEvent *)

{

QPainterpaint (this );

Paint. drawLine (0, 0,100, 0 );

Paint. rotate (30); // rotate 30 degrees clockwise

Paint. drawLine (0, 0,100, 0 );

Paint. translate (100,100); // coordinate transformation, point of origin (100,100) ()

Paint. drawLine (0, 0,100, 0 );

Paint. rotate (30); // rotate 30 degrees clockwise

Paint. drawLine (0, 0,100, 0 );

}

As follows:

Because the default rotate () function is centered around the origin point and rotates clockwise, we need to first perform the transformation of the origin point to make it rotate around other points. Here, painter. translate (100,100) sets (100,100) as the new origin to rotate the straight line in the center, but you have found that this is not the case. Why? Add a statement as follows:

Void MyDraw: paintEvent (QPaintEvent *)

{

QPainterpaint (this );

Paint. drawLine (0, 0,100, 0 );

Paint. rotate (30); // rotate 30 degrees clockwise

Paint. drawLine (0, 0,100, 0 );

Paint. rotate (-30 );

Paint. translate (100,100); // coordinate transformation, point of origin (100,100) ()

Paint. drawLine (0, 0,100, 0 );

Paint. rotate (30); // rotate 30 degrees clockwise

Paint. drawLine (0, 0,100, 0 );

}

As follows:

This is what we want. The code we added is painter. rotate (-30). This is because the previous coordinates have been rotated for 30 degrees. We need to rotate them back to make it a normal coordinate system. This is not only the case for this function, but also for the functions described here, so it is easy to make mistakes. We will use two functions to solve this problem.

3. Coordinate System status protection.

We can use the save () function to save the current state of the coordinate system, and then perform the transformation operation. After the operation, we can use the restore () function to restore the previous state of the coordinate system, it is actually an inbound and outbound operation.

For example:

Void MyDraw: paintEvent (QPaintEvent *)

{

QPainterpaint (this );

Paint. save (); // save the coordinate State

Paint. translate (100,100 );

Paint. setBrush (Qt: green );

Paint. drawRect (0, 0,100,100 );

Paint. drawLine (0, 0, 50, 50 );

Paint. restore (); // restore coordinates

Paint. setBrush (Qt: red );

Paint. drawRect (0, 0,100,100 );

Paint. drawLine (0, 0, 50, 50 );

}

As follows:

Using these two functions, you can quickly switch the coordinate system and draw different images.

The source code is as follows:

/*************************************** * *************** <Br/> * Qt coordinates and Painter <br/> * Version: qt 3.1.2 <br/> * Author: yanggang2050@gmail.com <br/> * Date: 23:08:12 <br/> * <br/> ***************************** * ************************/</p> <p> # include <qapplication. h> <br/> # include <qwidget. h> </p> <p> # include <qpainter. h> <br/> # include <qmessagebox. h> </p> <p> class MyDraw: public QWidget <br/> {</p> <p> public: <br/> void paintEvent (QPaintEvent *); // draw the image <br/> void mousePressEvent (QMouseEvent *); // obtain the mouse position <br/> }; </p> <p> ///////////////////////////////// //////////// <br/> // draw the image (the following paintEvent uses one at a time) /// <br/> ///////////////////////////////// /// // </p> <p>/********* 1 paint *******/< br/> void MyDraw:: paintEvent (QPaintEvent *) <br/>{< br/> QPainter paint (this); </p> <p> paint. setBrush (Qt: green); <br/> paint. drawRect (0, 0,100,100); <br/> paint. setBrush (Qt: red); <br/> paint. fig (-50,-50,100,100 ); <br/>}</p> <p>/******** 2.1 translate *******/<br/> void MyDraw :: paintEvent (QPaintEvent *) <br/>{< br/> QPainter paint (this); </p> <p> paint. setBrush (Qt: green); <br/> paint. drawRect (0, 0,100,100); </p> <p> paint. translate (100,100); // coordinate transformation. Use point (100,100) as the origin again. </p> <p> paint. setBrush (Qt: red); <br/> paint. drawRect (0, 0,100,100); </p> <p> paint. translate (-100,-100); // coordinate transformation, moving (-100,-100) back to origin () </p> <p> paint. drawLine (0, 0, 50, 50 ); <br/>}</p> <p>/********* 2.2 scale *******/<br/> void MyDraw :: paintEvent (QPaintEvent *) <br/>{< br/> QPainter paint (this); </p> <p> paint. setBrush (Qt: green); <br/> paint. drawRect (0, 0,100,100); </p> <p> paint. scale (2, 2); // zoom in twice </p> <p> paint. setBrush (Qt: red); <br/> paint. drawRect (50, 50, 50, 50); </p> <p> paint. scale (0.5, 0.5); // reduce painting by half (Restore original) </p> <p> paint. setBrush (Qt: yellow); <br/> paint. drawEllipse (0, 0,100,100 ); <br/>}</p> <p>/******** 2.3 shear *******/<br/> void MyDraw :: paintEvent (QPaintEvent *) <br/>{< br/> QPainter paint (this); </p> <p> paint. setBrush (Qt: green); <br/> paint. drawRect (0, 0,100,100); </p> <p> paint. shear (0, 1); // vertical distortion 1 times </p> <p> paint. setBrush (Qt: red); <br/> paint. drawRect (0,100,100,100); </p> <p> paint. shear (0,-1); // restore to original state </p> <p> paint. setBrush (Qt: yellow); <br/> paint. drawEllipse (0, 0,100,100 ); <br/>}</p> <p>/******** 2.4 rotate *******/<br/> void MyDraw :: paintEvent (QPaintEvent *) <br/>{< br/> QPainter paint (this); </p> <p> paint. drawLine (0, 0,100, 0); </p> <p> paint. rotate (30); // rotate 30 degrees clockwise <br/> paint. drawLine (0, 0,100, 0); </p> <p> paint. translate (100,100); // coordinate transformation, point (0, 0) to (100,100) <br/> paint. drawLine (0, 0,100, 0); </p> <p> paint. rotate (30); // rotate 30 degrees clockwise <br/> paint. drawLine (0, 0,100, 0 ); <br/>}</p> <p>/******** 2.4-2 rotate *******/<br/> void MyDraw :: paintEvent (QPaintEvent *) <br/>{< br/> QPainter paint (this); </p> <p> paint. drawLine (0, 0,100, 0); </p> <p> paint. rotate (30); // rotate 30 degrees clockwise <br/> paint. drawLine (0, 0,100, 0); </p> <p> paint. rotate (-30); <br/> paint. translate (100,100); // coordinate transformation, point (0, 0) to (100,100) <br/> paint. drawLine (0, 0,100, 0); </p> <p> paint. rotate (30); // rotate 30 degrees clockwise <br/> paint. drawLine (0, 0,100, 0 ); <br/>}</p> <p>/********* 3 save-restore ********/<br/> void MyDraw :: paintEvent (QPaintEvent *) <br/>{< br/> QPainter paint (this); </p> <p> paint. save (); // save the coordinate status <br/> paint. translate (100,100); <br/> paint. setBrush (Qt: green); <br/> paint. drawRect (0, 0,100,100); <br/> paint. drawLine (0, 0, 50, 50); </p> <p> paint. restore (); // restore coordinates <br/> paint. setBrush (Qt: red); <br/> paint. drawRect (0, 0,100,100); <br/> paint. drawLine (0, 0, 50, 50); <br/>}</p> <p> // obtain the mouse position <br/> void MyDraw :: mousePressEvent (QMouseEvent * e) <br/>{< br/> QString mousePos = "X =" + QString: number (e-> pos (). x () + "" <br/> + "Y =" + QString: number (e-> pos (). y (); </p> <p> QMessageBox: information (this, tr (""), mousePos ); <br/>}</p> <p> // main function <br/> int main (int argc, char ** argv) <br/>{< br/> QApplication app (argc, argv); </p> <p> MyDraw draw; <br/> app. setMainWidget (& draw); <br/> draw. show (); </p> <p> return app.exe c (); <br/>}