How to animate drawing a complex path in Qt

seyed

Hello all
My question is simple but answer may be difficult!
how can I implement "Animated signing of signature" in Qt using QPainter or in new method using QtQuick?
You can see an SVG version here and another one here and it seems to be same this and this one
Also Google has implemented some awesome SDK for creating same effect. You can see some sample here.
Do you now what really this effect named?
Thank's all

matthew.kuiash

Hi, I do not have all the answers for you but I have some hints.

QPainterPath has a pointAtPercent function http://doc.qt.io/qt-5/qpainterpath.html#pointAtPercent this gets us someway!

I'm not sure how to 'crop' the start/end percentage positions for drawing except to create a vector of all points between two percentage positions and draw those with lines. This works (kinda) except for paths that are disjoint. I think that is what is called "trim path" in some of those examples. I wonder if some of those demos use a colour gradient that is based on path position (percentage) instead of position (or pixel position aka transformed position). I don't know how to do that in Qt (yet!)

Anyway, as a small help and demo I've uploaded a simple project that animates movement of a object along an path.

It is here http://kuiash.net/dokuwiki/doku.php?id=animated_painter_paths

matthew.kuiash

To give some context on the "trimming" I mentioned.

I'm not sure there is any trimming built into the Qt painter path but the basic concept is like this.

QPainterPath untrimmedPath;
//...
QPainterPath trimmedPath;
// how much accuracy do you want? this isn't going to be fantastic in a lot of cases BTW esp sharp corners
qreal gap = (trimEnd - trimStart) / 500.0;
trimmedPath.moveTo(untrimmedPath.pointAtPercent(trimStart));
for (qreal trim = trimStart + gap; trim <= trimEnd; trim += gap) {
    trimmedPath.lineTo(untrimmedPath.pointAtPercent(trim));
}
painter.drawPath(trimmedPath);

matthew.kuiash

@seyed I've updated my example to show a basic way to do trimming. I expect it isn't very efficient but it works.

Here's the link http://kuiash.net/dokuwiki/lib/exe/fetch.php?media=animatedpath2.zip

seyed

Thank you @matthew-kuiash
It is a good solution for my problem.
Although the QtQuick uses new backend (QQuickItem) not old one (QPainter). If you can get a solution with QQuickItem It will be perfect.
For now I can use QQuickPaintedItem for using your good solution in QtQuick environment.
Thanks again :)

Solved How to animate drawing a complex path in Qt