1. Qt drawing event
When the application receives a drawing event, it will call QWidget::paintEvent(), which is where the window is drawn.
There are two ways to redraw a window
1. update( ) - add the redraw event to the event queue
- Repeated calls to update() will be merged into one by Qt
- No flickering of the image
- Can take parameters to specify an area to redraw
2. repaint() - Generate drawing events immediately.
Generally, this method
is not recommended. Only use in the case of special effects that require immediate redrawing. You
can specify an area with parameters to redraw
Basic drawing
- The QPainter class provides drawing operations, and its constructor prototype is:
QPainter(QPaintDevice *device);
- QPaintDevice represents the canvas for drawing 2D images;
- The following class objects inheriting QPaintDevice can be used for QPainter drawing
QWidget、QImage、QPixmap、QPicture、QPrinter、QSvgGenerator、
QGLPixelBuffer、QGLFrameBufferObject
Two, Qt 2D drawing
QPainter
- Lines and outlines can be drawn with a brush (QPen) and filled with a brush (QBrush);
- The font is defined by the QFont class. When drawing text, Qt uses the attributes of the specified font. If there is no matching font, Qt will use the closest font;
- Under normal circumstances, QPainter draws with the default coordinate system, and you can also use the QMatrix class to transform the coordinates;
- When drawing, you can use QPainter::RenderHint to tell the drawing engine whether to abandon the anti-aliasing function to make the drawing smooth;
- Possible values of QPainter::RenderHint :
QPainter::Antialiasing : Tell the drawing engine to perform edge anti-aliasing drawing if possible
QPainter::TextAntialiasing : When possible, text anti-aliasing drawing
QPainter::SmoothPixmapTransform : use Smooth pixmap transformation algorithm (bilinear interpolation algorithm) instead of nearest neighbor interpolation algorithm;
The drawing functions of QPainter are summarized as follows:
| function | Features | function | Features |
| drawArc() | arc | drawPixmap () | Image represented by QPixmap |
| drawChord () | string | drawPoint() | point |
| drawConvexPolygon() | Convex polygon | drawPoints() | Multiple points |
| drawEllipse() | oval | drawPolygon | Polygon |
| drawImage() | Image represented by QImage | drawPolyline() | Polyline |
| drawLine() | line | drawRect() | rectangle |
| drawLines() | Multiple lines | drawRects() | Multiple rectangles |
| drawPath() | path | drawRoundRect() | Rounded Rectangle |
| drawPicture() | Draw according to QPainter command | drawText() | Text |
| drawPie | sector | drawTiledPixmap() | Tile image |
| drawLineSegments() | Draw a polyline |
Three, brush
- The attributes of the pen include line type, line width, color, etc. The brush properties can be specified in the constructor, and can also be set using functions such as setStyle(), setWidth(), setBrush(), setCapStyle(), setJoinStyle(), etc.;
- Qt uses Qt::PenStyle to define 6 brush styles. They are:
You can also customize the line style ( Qt::CustomDashLine ), you need to use QPen's **setDashPattern()** function to set the custom style.
The cap style (cap style) - The end style determines the end style of the line, which is only valid for lines with a line width greater than 1.
- Qt defines three endpoint styles represented by the enumerated type Qt::PenCapStyle, which are:
| Qt :: PenCapStyle | Description |
| Qt::SquareCap | Indicates that the line is square at the vertex, and the area drawn by the line includes the end point, and extends the length of half the line width. |
| Qt::FlatCap | Indicates that the line is square at the apex, but the line drawing area does not include the end point |
| Qt::RoundCap | Indicates that the line is round at the apex, and the line drawing area includes the end point. |
Join style
- The connection style is how two lines are connected. The connection style is valid for lines with a line width greater than or equal to 1;
| Qt::PenStyle | Description |
| Qt::BevelJoin | Refers to the vertices of the center lines of the two lines meet, and the top of the square of the line remains at the connection. |
| Qt::MiterJoin | Refers to the point where the vertices of the center lines of two lines meet, and the line at the connection point extends to the outside of the line and converges to a point, forming a pointed connection |
| Qt::RoundJoin | Means that the vertices of the center lines of two lines meet, and the connecting points are connected in an arc shape |
Four, painting brush
- In Qt, the graphics are filled with QBrush, and the brush includes the fill color and style (fill mode).
- In Qt, colors are represented by the QColor class, and QColor supports RGB, HSV, and CMYK color models. QColor also supports alpha blending of outlines and fills.
- RGB is a hardware-oriented model. The colors are mixed with three primary colors of red, green and blue.
- The HSV/HSL model is more in line with people's perception of color, composed of hue (0-359), saturation (0-255), and brightness (0-255), and is mainly used for color selectors.
- CMYK is composed of four primary colors: cyan, magenta, yellow, and black. Mainly used for hardware copying equipment such as printers. The value of each color component is 0-255.
- The basic pattern filling includes patterns with various combinations of points and lines.
QColor
QColor的构造函数：QColor(int r,int g,int b,int a)
其中 参数a(alpha)是控制透明度的，取值范围为0-255；0为完全透明，255为不透明。
颜色还可以使用如下函数进行微调
QColor::lighter(int factor)
QColor::darker(int factor)
QRgb
- QRgb类可以用于保存颜色值，可与QColor相互转换获取32-bit的RGB颜色值+alpha值。
- 创建新颜色
QRgb orange = qRgb(255,127,0);
QRgb overlay = qRgb(255,0,0,100);
- 获取单独某个颜色值：qRed，qGreen，qBlue，qAlpha
int red = qRed(orange);
- 获取灰度值
int gray = qGray(orange);
模式画刷
模式化画刷构造函数QBrush(const QColor *color,Qt::BrushStyle style)，具体见下图：
五、渐变填充
-
Qt提供了渐变填充的画刷，渐变填充包括两个要素：颜色的变化和路径的变化
-
颜色变化可以指定从一种颜色渐变到另外一种颜色。
路径变化指在路径上指定一些点的颜色进行分段渐变。 -
Qt中，提供了三种渐变填充
线性（QLinearGradient）
圆形（QRadialGradient）
圆锥渐变（QConicalGradient）
所有的类都从QGradient类继承 -
构造渐变填充的画刷**
QBrush b** = QBrush(QRadialGradient(...));
填充设置
- 从图形的起点到终点，以从0至1的比例渐变填充
QGradient::setColorAt(qreal pos,QColor color);
- 完成0-1范围的填充后，后续颜色铺开的方式可以不同，通过setSpread()函数来设置
1、线性渐变填充
- 线性渐变填充指定两个控制点，画刷在两个控制点之间进行颜色插值。
- 通过创建QLinearGradient对象来设置画刷。
QPainter painter(this);
QLinearGradient g(0,0,100,100);
g.setColorAt(0.0,Qt::white);
g.setColorAt(1.0,Qt::blue);
painter.setBrush(g);
p.drawRect(0,0,100,100);
- 在QGradient构造函数中指定线性填充的两点分别为（0,0），（100,100）。
- The setColorAt() function sets the color at the specified position between 0-1.
2. Circular gradient filling.
Circular gradient filling needs to specify the center, radius and focus.
QRadialGradient(qreal cx,qreal cy,qreal radius,qreal fx,qreal fy);
- The brush performs color interpolation between the focal point and all points on the circle.
- Create a QRadialGradient object and set the brush
QPainter painter(this);
QRadialGradient radialGradient(50,50,50,30,30);
radialGradient.setColorAt(0.0,Qt::white);
radialGradient.setColorAt(1.0,Qt::blue);
painter.setBrush(radialGradient);
painter.drawRect(0,0,100,100);
Conical gradient fill
- Conical gradient fill specifies the circle and start angle
QConicalGradient(qreal cx,qreal cy,qreal angle);
- Brush to interpolate colors along the center of the circle
- Create a QConicalGradient object and set the brush
QPainter painter(this);
QConicalGradient conicalGradient(50,50,90);
conicalGradient.setColorAt(0,Qt::white);
conicalGradient.setColorAt(1,Qt::blue);
painter.setBrush(conicalGradient);
painter.drawRect(0,0,100,100);
- In order to implement custom filling, you can also use QPixmap or QImage objects for texture filling. Two kinds of images use the setTexture() and setTextureImage() functions to load the texture respectively.