QPainterPath to draw curve with fading
-
I want to draw an arbitrary curve (by points). I was able to do this with QPainterPath, but this tool only allows drawing with a solid pen, but I need to draw a curve with fading edges (channel apha = 1 in the center of the curve and alpha = 0 at the edges of the curve).
This picture as an example of the expected result (red curve):
I know that QPainter depends on QPen class, but I didn't find any method how to tune QPen to draw in a custom style.
#QPainter #QPainterPath
-
AFAIK QPainter is not suitable to do that kind of lines. Take a look at this discussion, there are some hacks, but ... https://stackoverflow.com/questions/59591826/draw-a-line-and-curves-with-fading-edges-with-qpainter.
I think the proper way would be to use OpenGL ou Quick3D, or other low level library and make your own shaders. I have done something like that in Opengl, but it was just a just a fuzzy circle, check here. For lines, it should be the same concept, the proper way is to use a mix() function to mix the vertex colors in fragment shader as they "fade" way from the line. Using shaders is not trivial at all, sorry if this is not the answer you're looking for, but I just dont know a easy way to do that in QPainter, I think it is not the right tool for what you want to achieve. -
@johngod Thanks for the help, sorry for the late reply.. I'm coming back to this problem and I want to try to do something with OpenGL. Do you have any new thoughts about this problem? What tutorial did you use to create the pointed git repository?
-
@Ejok88 Hi,
you can see official Qt examples: https://doc.qt.io/qt-6/examples-widgets-opengl.html. Additionally, you can review the chapter of the free book Qt6 QML Book and see the chapter on shaders. I can recommend my repository where I use OpenGL: https://github.com/Przemekkkth/camera-opengl-qt. -
@Ejok88 Hi
I used the the book of shaders site tutorials to create the fuzzy circle check here https://thebookofshaders.com/
I actually got a very simple idea for your problem, just use a line with width which is just nothing more that a rectangle with two colors on the edjes, and use GL_TRIANGLE_STRIP , see this new example https://bitbucket.org/joaodeusmorgado/opengltutorials/src/master/T11_FuzzyLine/mygl.cpp#lines-185
Then you just add vertices to compose your line, note that you have to use "two" lines side by side to make the double fade out effect. Then you need to add 3 more lines without width, to the center and the 2 lines in the extremes. A bit of work but doable. I can help further if you need, but right now I just to much work overloaded. What is your use case, are you using widgets and Opengl ? I think going with quick3d would be easier, it that is an option for you.
