QT to achieve line stroke effect detailed principle and example code

Time:2021-3-12

preface

Before I wrote an article to introduce two ways of drawing smooth curve in QT, here is the article. This article introduces the principle and implementation of drawing in detail, then, if you want to achieve the stroke effect on this curve, how to do?

The so-called pen edge effect is the tip of the pen when the pen is lifted. That is to say, when drawing a curve and lifting the pen, it forms a tip effect.

Without saying much, let’s see the effect directly

The animation effect is as follows:

Implementation principle

To achieve this effect, we need to complete the following key steps:

1. Every two points form a Bezier curve path to draw

2. The latest path draws a thin line (the width of the thinnest point)

3. The penultimate path draws a thick line (normal line width)

4. Add points at the junction of the two paths to make the transition smooth

Next step by step, first of all, every two points form a Bezier curve path for drawing. This is relatively simple, so I won’t talk about it more. That is to say, in the move event, every new point, let the point and the previous point generate a Bezier curve, and use qpainterpathquadToFunction, the reason why we use Bezier curve is to solve the broken line problem, which has been introduced in the previous article. I won’t repeat it here.

Let’s go straight to the second one: the latest path to draw thin lines.

How to understand this? Look at an illustration:

The above is the effect of line magnification. The latest path, that is, the newpath above, draws a thin line through the path generated by the current point and the previous point, and this line is used as the pen edge. If you lift the pen at this time, then the newpath is the last line segment, and the pen edge is formed by this line.

After the second step, let’s take a look at the rendering effect

Step 3: draw a thick line (normal line width) from the penultimate path
As can be seen from the above figure, we will draw a thin line with the latest newpath. If a new point appears at this time to form a new path, and the previous newpath will become the previous path, which is named lastpath here. Since the path is still a thin line, we need to draw the previous path as a normal thick line again. The figure is as follows:

The yellow line here is the line we added, and the latest path is still a thin line, which is easy to understand according to the above diagram.

So in short, it is to continuously draw the latest path as a thin line, and then draw the previous path as a thick line.

Take a look at the effect:

In order to distinguish different paths, different colors are used here. Each color represents a path. The latest path is the green line on the right. You can see that the connection between the latest path and the previous path is not smooth because of the different line width. Therefore, to solve this problem, you need to do the last step: fill the point.

What is complementary point? That is to say, we need to draw a series of points at the junction according to the line path of the latest path to fill, so that the junction looks smooth. The figure is as follows:

The circle above is the supplementary point. The smaller the distance between the points, the smoother it looks. The center point of the circle follows the latest path line, which is the center point of the line height of the path line. The radius of the circle gradually decreases.

Let’s look at the effect of the supplementary points

As you can see, the black line of the nib is achieved by adding points.

So, the question is, how do you know the last path?
In fact, QT has provided an interface. For the curve generated by qpainterpath, this class provides a function calledpointAtPercent, defined as:

This interface is to return the coordinate point on the path curve and call it by passing in the percentage, which is very convenient.
The way to realize my supplementary point here is through continuous drawing of the loop

//Draw supplementary points at the junction of two paths to make the junction smooth
void WbCanvasItem::drawPatchPoint(QPainter * painter,QPainterPath path)
{
 qreal temp = (PENWIDTH-3)/100.;
 int k = 0;
 for (qreal i = 0;i < 1; i+=0.01) {
  k++;
  painter->setPen(QPen(Qt::black,PENWIDTH-temp*k, 
        Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));
  painter->drawPoint(path.pointAtPercent(i));
 }
}

Code of the first three steps:

QPainterPath lastPath = obj->StrokeLastPath(PENWIDTH);
m_ Parealpainer > fillpath (lastpath, QT:: red); // fill contour
path = obj->StrokePath(3);
m_ Parealpainer > fillpath (path, QT:: red); // fill contour
drawPatchPoint(m_pRealPainter,obj->path());

OK, the whole implementation method has been introduced. This paper mainly explains the principle. If the code is not sorted out, it will not be uploaded. The key functions used have been introduced. As long as you understand the principle, you can operate step by step according to the principle.

QT to achieve pen line drawing effect detailed principle

This article about QT to achieve line stroke effect detailed principle and example code article introduced here, more related QT line stroke effect content please search developer previous articles or continue to browse the following related articles, hope you can support developer more in the future!