使用 QPainter 绘制带有渐变边缘的直线和曲线

Question

QPainter is very easy to use and to draw a line one would simply do this:

QPainter painter(&image);
QPen pen;
pen.setWidth(5);
pen.setColor("black");
painter.setPen(pen);
painter.drawLine(QPointF(0,0), QPointF(200,250));

Now this works well, but I would like to create a "special" pen that produce lines with "smoothed" edges. For example, suppose the line I want to draw has a thickness of 10 pixels, then I would like the middle of the line (by middle I mean in terms of thickness and not length) to be fully opaque and at the edges the line should become semitransparent. I believe this could be obtained for example having the picture below as my point and then "drag" and paint the line so I will obtain the effect I desire. I know that Qt provides you with QBrush and gradients, but I can't figure out how to to do this.

Answer 1

While Qt definitely has many drawing functions , there is none to let you draw using a pixmap brush along a path like you describe.

I can think of 2 ways to achieve what you want:

1. Draw the path using standard non-fuzzy brush multiple times with a varying brush width and a transparent color. With enough iterations this will approximate the "fuzzy line" you are looking for.

2. Draw the pixmap repeatedly along the path. This is usually how drawing software like photoshop or gimp will do it as it allows for some flexibility in the parameters such as different brush pixmaps and orientations etc.

I will try to provide example code (untested for now as I am currently away from my dev computer) for the second way of doing it here:

void drawPathWithPixmapBrush(QPainter painter, QPainterPath path, QPixmap pixmapBrush, qreal spacing=1.0) {
    qreal length = path.length();
    qreal pos = 0.0;
    // Adjust the spacing to be relative to brush size
    spacing=(spacing * pixmapBrush.width() );
    while (pos < length) {
        qreal percent = path.percentAtLength(pos);
painter.drawPixmap(path.pointAtPercent(percent), pixmapBrush);
pos += spacing;
    }
}

As you can see, this code will iteratively move along the given QPainterPath , and for each step draw the QPixmap brush to the given QPainter , resulting in what can be preceived as one continuous line drawn along the path with the pixmap brush.

QPainterPath supports all drawing operations that QPainter does, such as polygons, splines, lines, arches etc., so it will function as a dropin replacement for your existing QPainter draw calls for the most part (see the full list of drawing operations ).

Here is example code to construct a simple straight line segment using QPainterPath :

QPainterPath path
QPointF lastPosition(10, 10);
QPointF currentPosition(100, 100);
path.moveTo(lastPosition);
path.lineTo(currentPosition);

Possible improvements include calculating spacing so that it ends exactly on the end of the line, and also maybe more correctly calculating the required number of draws will best give the impression of a line.

Answer 2

One way to achieve this is to use a QRadialGradient as a brush for your QPen :

QPointF centerPoint(400, 400);
qreal centerRadius = 200;

QRadialGradient radialGrad(centerPoint, centerRadius);
radialGrad.setColorAt(0.000, QColor(0, 0, 0, 255));
radialGrad.setColorAt(0.8, QColor(0, 0, 0, 0.8 * 255));
radialGrad.setColorAt(1.000, QColor(0, 0, 0, 0.000));

QPen pen;
pen.setWidth(400);
pen.setColor("black");
pen.setBrush(radialGrad);

QPainter painter(this);
painter.setPen(pen);
painter.drawPoint(centerPoint);

The downside of this technique is the fact that the gradient is not smooth near the GradientStop. You should add several GradientStop to ease your radial gradient.

Another (and prettier) way to achieve this could be to create a custom QBrush with a dedicated texture or texture image (using the method QBrush::setTexture or QBrush::setTextureImage ) representing the wanted brush pattern.

Answer 3

As a tentative answer. I know you said QT, but I am unfamiliar with it. I will give you some GLSL code I use for my own work and hopefully this helps you.

In the most absolute naive implementation, line anti aliasing can be coded by selecting the alpha value of a point in a rectangle depending on its distance from the desired line. That is to say, you render a rectangle and for each point in that rectangle you decide how far away from the line it is and select its alpha value based on that distance. For example in the fragment shader one could write:

#version 450
#extension GL_ARB_separate_shader_objects : enable

layout(location = 0) in vec2 p1;
layout(location = 1) in vec2 p2;
layout(location = 2) in vec2 frag_pos;

layout(location = 0) out vec4 outColor;

layout(binding = 0) uniform LineProperties {
    vec4 offset;
    vec4 color;
    float aspect_ratio;
    float line_width;
};

void main() {

    vec2 line_dir = normalize(p2 - p1);
    vec2 proj = dot(frag_pos - p1, line_dir) * line_dir;
    float distance = length((frag_pos - p1) - proj);
    float coeff = distance / line_width;
    float intensity = 1 - smoothstep(0.2, 0.9, coeff);
    outColor = vec4(intensity * color.xyz, intensity);
}

That can give you lines like this:

If you inspect that image more closely you will notice some gaps at the joints between straight segments. That can be avoided by not calculating the shortest distance to the line, but the shortest distance to a segment that is smaller than the line, this will make your straight regions look somewhat like a 2D pill/capsule, also known as a stadium .

The centers of 2 adjacent stadiums should be equal, that way all gaps will be gone.