Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Solved How to animate drawing a complex path in Qt

    Game Development
    2
    5
    1835
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      seyed last edited by

      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 1 Reply Last reply Reply Quote 0
      • matthew.kuiash
        matthew.kuiash last edited by

        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

        The legendary cellist Pablo Casals was asked why he continued to practice at age 90. "Because I think I'm making progress," he replied.

        1 Reply Last reply Reply Quote 1
        • matthew.kuiash
          matthew.kuiash last edited by 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);
          

          The legendary cellist Pablo Casals was asked why he continued to practice at age 90. "Because I think I'm making progress," he replied.

          1 Reply Last reply Reply Quote 1
          • matthew.kuiash
            matthew.kuiash @seyed last edited by

            @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

            The legendary cellist Pablo Casals was asked why he continued to practice at age 90. "Because I think I'm making progress," he replied.

            1 Reply Last reply Reply Quote 1
            • S
              seyed last edited by

              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 :)

              1 Reply Last reply Reply Quote 1
              • First post
                Last post