QT Drawing Technology PaintEvent gradient technology

Before you say something about anti-aliasing, here's a look at the gradient. Gradients are a common feature in drawings that use color interpolation to smooth transitions between two or more colors, simply by blending several colors together to allow them to transition naturally, rather than suddenly becoming another color. They are often used to create three-dimensional effects of two-dimensional graphics. The algorithm of the gradient is more complicated, the writing is not good, the efficiency will be very low, fortunately many drawing systems have built-in gradient function, QT is no exception. Gradients are generally used in padding, so the gradient is set in Qbrush.
QT supports three types of gradients, namely linear gradient (qlineargradient), radiation gradient (qradialgradient), tapered gradient (qconicalgradient).

1. The linear gradient is defined by two control points and a series of color breakpoints are set on the line connecting the two points. These breakpoints are clamped to a floating point number between 0 and 1, 0 corresponds to the first control point, 1 corresponds to the second control point, and the color between the two specified breakpoints is worth the linear interpolation. such as the code (the following gives the code inside the PaintEvent () function):

void mywidget::p aintevent (qpaintevent *event) { qpainter painter (this);  Painter.setrenderhint (qpainter::antialiasing, true);  qlineargradient lineargradient (60, 50 ,  200, 200);   lineargradient.setcolorat (0.2, qt::white);   Lineargradient.setcolorat (0.6, qt::green);   lineargradient.setcolorat (1.0, Qt::black);   painter.setbrush (Qbrush (lineargradient));   painter.drawellipse (50, 50, 200,  150);} 

Here 0 corresponds to the first control point (60,50), 1 corresponds to the second control point (200,200), with three color interpolation between the results, such as:

650) this.width=650; "src=" Http://img1.tuicool.com/iMZBJj.jpg!web "style=" height:auto;vertical-align:middle; border:0px none;margin:0px auto;text-align:center; "/>

    2, radiation gradients are controlled by a center point, radius, a focus, and a color breakpoint. The center point and radius define a circle. The color spreads outward from the focus, which can be the center point or other point within the circle. The code is as follows:  

void mywidget::p aintevent (qpaintevent *event) { qpainter painter (this);  Painter.setrenderhint (qpainter::antialiasing, true);   qradialgradient radialgradient (130,  130, 100, 130, 130);  radialgradient.setcolorat (0.0, qt::white);  Radialgradient.setcolorat (0.6, qt::black);  radialgradient.setcolorat (0.8, Qt::green);  Painter.setbrush (Qbrush (radialgradient));  painter.drawellipse (50, 50, 200, 150);} 

Here Qradialgradient radialgradient (130, 130, 100, 130, 130); The first two parameters specify the center point, the third parameter specifies the radius, the last two parameters specify the focus, where the center point and the focus are the same point, So it looks like the effect is spreading evenly from the center point outward. The effect is as follows:

650) this.width=650; "src=" Http://img0.tuicool.com/BZ73u2.jpg!web "style=" height:auto;vertical-align:middle; border:0px none;margin:0px auto;text-align:center; "/>

        3, tapered gradient is defined by a center point and an angle, and the color starts at the angle of the x-axis deflection, rotating and diffusing at a given color breakpoint. The code is as follows:

void mywidget::p aintevent (qpaintevent *event) { qpainter painter (this);  Painter.setrenderhint (qpainter::antialiasing, true);   qconicalgradient conicalgradient ( 150,150, 90);  conicalgradient.setcolorat (0.2, qt::white);  conicalgradient.setcolorat (0.6,  qt::green);  conicalgradient.setcolorat (0.8, qt::black);  painter.setbrush (QBrush ( conicalgradient));  painter.drawellipse (50, 50, 200, 150);} 

Here the definition (150,150) is the center point, from the X-axis forward start deflection 90 degrees, and then press the white green black rotation spread, the effect is as follows:

650) this.width=650; "src=" Http://img0.tuicool.com/vQBzie.jpg!web "style=" height:auto;vertical-align:middle; border:0px none;margin:0px auto;text-align:center; "/>

4, then how do we control the line is also the gradient effect? Usually we draw the line with a brush to do, but Qpen is to receive qbrush do parameters, that is, you can use a qbrush to create a qpen, so that qbrush all the fill effect can be used on the brush! The code is as follows:

void mywidget::p aintevent (qpaintevent *event) { qpainter painter (this);  Painter.setrenderhint (qpainter::antialiasing, true);   qlineargradient lineargradient (60,  50, 200, 200);   lineargradient.setcolorat (0.2, qt::white);   Lineargradient.setcolorat (0.6, qt::green);   lineargradient.setcolorat (1.0, Qt::black);   painter.setpen (Qpen (Qbrush (lineargradient), 5));   painter.drawellipse (50, 50,  200, 150);} 

Come down and look at the gradient of our line of paint!

650) this.width=650; "src=" Http://img0.tuicool.com/iAjYJj.jpg!web "style=" height:auto;vertical-align:middle; border:0px none;margin:0px auto;text-align:center; "/>

650) this.width=650; "Src=" Http://s3.51cto.com/wyfs02/M01/89/54/wKioL1gQFeaQ9OjzAAC2hmHsmxk033.jpg-wh_500x0-wm_3 -wmp_4-s_1523577854.jpg "title=" he. jpg "alt=" wkiol1gqfeaq9ojzaac2hmhsmxk033.jpg-wh_50 "/>

QT Drawing Technology PaintEvent gradient technology