"Qt Learning Notes" 11. Custom Controls Customize the Widget

First, window drawing--basic method

Custom window:

QT allows you to customize the window control to meet special requirements:

1, can modify its display, self-drawing

2, can show dynamic effect

3, can add events, support mouse and keyboard operation

The custom control can be used directly in QT Designer and can be added directly to the parent window.

Steps:

1. Create a new class, inherit from Qwidget and Qframe, preferably inherit from Qframe
2. Override the following function void Cellmonitor::p aintevent (qpaintevent* event)

3. Use this class

Circlewidget::circlewidget (Qwidget *parent): Qframe (parent) {}circlewidget::~circlewidget () {}void CircleWidget:: PaintEvent (Qpaintevent * event) {Qpainter painter (this);p Ainter.setbrush (Qbrush (Qcolor (0x00, 0xFF, 0x00))); Painter.drawellipse (Qpoint (100, 100), 100, 100);

Used in QT Designer:

Custom widgets can drag and drop layouts directly in QT Designer, just as with native controls.

1. Drag and drop a parent control such as Qframe

2. Promote to ... Materialized as a sub-class control, you can complete

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/8B/6D/wKiom1hOFWeArNgEAAAlqGGvuc8753.png "title=" 1.png " alt= "Wkiom1hofwearngeaaalqggvuc8753.png"/>

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/8B/69/wKioL1hOFgODM2lKAAAnUrai1m8424.png "title=" 2.png " alt= "Wkiol1hofgodm2lkaaanurai1m8424.png"/>

Second, the drawing of the window--the drawing of the geometry

Common:

Line: Direct

Rect: Rectangular (with squares)

Ellipse: Oval (with round)

Other:

Arc: Arc

Chord: Closed arc

Polygon: Polygon

RGB color:

You often specify a color when drawing, and QT uses the RGB color, which is the color value defined by the red, Green, and blue components. 0 ~ 255 per component

Such as:

Qcolor Green (0, 0xFF, 0);

Qcolor White (0xFF, 0xFF, 0xFF);

Qcolor Black (0, 0, 0);

Qpen and Qbrush:

In Qt, there are two kinds of drawing parameters

Qpen: Responsible for the color and style of the line

Qbrush: The color and style responsible for filling

For example, when a circle is drawn, the line is determined by the current qpen, and the fill is determined by the Qbrush (enclosed area).

Attention:

1, for non-closed shape, such as line, is not filled

2, must first set the color and then draw again, otherwise the painting finishes only then sets the color to be meaningless obviously

Several types are commonly used:

Qpoint: Describes the coordinates of a point

Qsize: Description of width and height

Qrect: Describes the coordinates and size of a rectangle

In addition, qpointf, QRECTF is the corresponding float version

In general, the window that is drawn later overrides the previously drawn window

Three, the window drawing--The realization of the animation

The movement of the picture:

Redraw n times per second, it looks like a sport to the human eye.

Steps:

1. Create a Timer

2, call Qwidget::update (), notification interface redraw

Attention:

The update () function merely notifies the interface to redraw, producing a "paint event" in the event loop, which is redrawn at the appropriate time (simply by generating a redraw signal waiting for the response to be processed instead of immediately redrawing)

Iv. drawing of Windows--Drawing of text

1, Color: qpen

2. Font: Qfont

The font contains the following parameters:

Family (font): such as "Times" "Song Body"

Size: 10 16

Weight (style): such as Qfont:normal, Qfont::bold qfont::light, etc...

Italic (Italic): True False

3. Position and alignment

Painter.drawtext (0, 0, Width, 40,//specified position

Qt::alignhcenter | Qt::alignvcenter,//Specify attributes such as alignment

"Hello World")

);

Example code:

qpainter painter (this); Qfont font ("Times", Qfont::light, True);p Ainter.setpen (Qcolor (0xFF, 0, 0));p ainter.setfont (font); Painter.drawtext (0, 0, Width (), height (), Qt::alignleft | Qt::aligntop, "Change World");

V. Drawing of Windows--drawing of pictures

Use Qpixmap to represent pictures in QT

The source of the picture:

There are two ways to load a picture in QT:

1. Files in the file system

Use an absolute path or relative path to specify

2. Files in resources

:/xxx/resources/xx.jpg (starts with a colon)

Drawing parameters:

1. SOURCE Rectangle

You can draw all of the images or just part of them

Qrect Source (0, 0, img_width, img_height); SOURCE Rectangle

2. Target Rectangle

Can be filled to all windows, or only to part

Qrect Target (0, 0, WIDTH/2, HEIGHT/2);    Target Rectangle Painter.drawpixmap (target, m_picture, source); Draw

Precautions:

Qpixmap should be a member variable and load only once, because:

1. High loading cost (large overhead)

2, there is no need to repeatedly load

Vi. Mouse Support-Basic concepts

The mouse events in QT are divided into four types:

1. Press

2. Lift Up Release

3. Mobile Move

4. Double click

Using the Qmouseeventl class to represent a mouse event

X, y: coordinates

GLOBALX, globaly: global coordinates

Button: Left mouse button, right button, middle

Mouse event inheritance and qwidget, so override these 4 event handling methods, you can customize the control to support mouse action

void Mousedoubleclickevent (qmouseevent* event), void Mousemoveevent (qmouseevent* event), void Mousepressevent ( qmouseevent* event); void Mousereleaseevent (qmouseevent* event);

Small exercise:

Write a program that, when the mouse is pressed, draw the trajectory of the mouse movement until it is released

When pressed: M_pressedflag = true;

When moving: Record track

When released: M_pressedflag = false;

The effect is as follows:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/8B/75/wKioL1hOqn2xq0NGAAAX2i-lIFs851.png "title=" 3.png " alt= "Wkiol1hoqn2xq0ngaaax2i-lifs851.png"/>

Implementation code:

Class mywidget : public qframe{q_objectpublic:mywidget (qwidget *parent); ~MyWidget (); Private:void paintevent ( QPaintEvent* event );//mouse Event Void mousedoubleclickevent ( qmouseevent *event); void mousemoveevent (qmouseevent *event); Void mousepressevent ( qmouseevent *event); Void mousereleaseevent (qmouseevent *event);p rivate:bool m_pressedflag; A collection of qvector<qpoint> m_points;//storage tracks}; Mywidget::mywidget (qwidget *parent):  qframe (parent),  m_pressedflag (false) {M_points.resize (1024) ;} Mywidget::~mywidget () {}void mywidget::p aintevent (qpaintevent* event) {qpainter painter (this); int  width = this->width (); Int height = this->height ();//Background Painter.setbrush ( Qcolor (0, 0, 0));//Black Painter.drawrect (0, 0, width, height);p Ainter.setpen (QColor (255,  255, 255));for  (size_t i = 0; i < m_poinTs.size ()  - 1; ++i)//Traverse {qpoint& p1 = m_points[i]; QPOINT&AMP;&NBSP;P2&NBSP;=&NBSP;M_POINTS[I&NBSP;+&NBSP;1];p ainter.drawline (P1,&NBSP;P2);}} Ignore double-click event Void mywidget::mousedoubleclickevent (qmouseevent *event) {qwidget::mousedoubleclickevent ( event);} Void mywidget::mousemoveevent (qmouseevent *event) {if  (m_pressedflag == true) {QPoint  pos = event->pos ();//Show Track M_points.push_back (POS); update ();//Redraw}}//Mouse Press Void mywidget:: Mousepressevent (qmouseevent *event) {m_pressedflag = true;m_points.clear ();} Mouse lifted Void mywidget::mousereleaseevent (qmouseevent *event) {m_pressedflag = false;}

Seven, mouse support--transmitting signal

Events and Signals:

When an event of a custom control occurs, it should be sent in the form of a signal.

For example: For a button, when it is pressed (press, release), a clicked () signal is fired externally

The way to customize the signal is as follows:

Class Xxx{signals:void Signalname (Qpoint pos);}

When an event occurs,

Emit Signalname (POS);

The signal is emitted by emit operation.

Note: Emit is not a C + + syntax, it's a concept that QT adds itself

Small exercise:

Area: Loads a picture, selects an area, and launches a signal when the mouse is released

Make the following effect:

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/8B/7A/wKiom1hOt-DQksRiAATS9rFeO24763.png "title=" 4.png " alt= "Wkiom1hot-dqksriaats9rfeo24763.png"/>

Code:

Class mywidget : public qframe{q_objectpublic:mywidget (qwidget *parent); ~MyWidget (); Private:void paintevent ( QPaintEvent* event );//mouse support Void mousemoveevent (qmouseevent  *event); void mousepressevent (qmouseevent *event); Void mousereleaseevent (QMouseEvent  *event);p rivate:bool m_pressedflag; qpixmap m_picture; qpoint m_curpos;//Mouse Current Position qpoint m_begin; qpoint m_end;}; Mywidget::mywidget (qwidget *parent):  qframe (parent), M_pressedflag (false), M_begin (Qpoint (0, 0)), M_end (Qpoint (0, 0)) {m_picture.load ("./resources/mypic.jpg");//overhead, written in the constructor, loaded only once, rather than written in PaintEvent, each time} Mywidget::~mywidget () {}void mywidget::p aintevent (qpaintevent* event) {qpainter painter (this); int  width = this->width (); Int height = this->height ();// Show background picture Painter.drawpixmap (0, 0, width, height, m_picture);//Draw the area if  (M_pressedFlag  == true) {Draw a cross line Painter.setpen (Qcolor (255, 0, 0));//The red area is the cross-crossing Painter.drawline (Qpoint (0, m_curpos.y ( )),  qpoint (Width, m_curpos.y ()));//Horizontal Painter.drawline (Qpoint (M_curpos.x (),  0),  qpoint (m_ Curpos.x (),  height));//Draw the selected area qrect selected (m_begin, m_end);p Ainter.setpen (Qcolor (0, 0,  0));//painter.setbrush (Qcolor (100, 100, 100));p Ainter.drawrect (selected);}} Mouse Movement Void mywidget::mousemoveevent (qmouseevent *event) {if  (m_pressedflag = true) {m_ Curpos = event->pos (); M_end = m_curpos;update ();}} Mouse down Void mywidget::mousepressevent (qmouseevent *event) {M_pressedflag = true;m_begin  = event->pos (); m_end = m_begin;} Mouse lifted Void mywidget::mousereleaseevent (qmouseevent *event) {m_pressedflag = false;}

————————————

Tail

It's a lot of stuff this time.

"Qt Learning Notes" 11. Custom Controls Customize the Widget