How to create a text along with curve using QPainterPath

[ChrisW67]

I don't have time to read your code right now, but it look like you are rotating each character by the right amount but in the wrong direction.

[Achayan]

Thanks Chris,

Yes I dont have any clue how I can achieve a rotation based on angle QTransform.

[Achayan]

http://labs.qt.nokia.com/2006/11/07/text-on-a-path/ ... this looks also my solution but a google search for Zack Rusin returned https://www.facebook.com/pages/RIP-Z...830579?sk=info, if its true and if its the same Zack Rusin then its so sad

[ChrisW67]

Actually, the original C++ code has the same problem. You get a better result if you make the angle negative at line 44 of your Python version.

The solution can e simplified a little by getting Qt to do more of the mathematics:

#include <QtGui>
#include <cmath>
 
class Widget : public QWidget
{
public:
    Widget ()
        : QWidget() { }
private:
    void paintEvent ( QPaintEvent *)
    {
        QString hw("hello world");
        int drawWidth = width() / 100;
        QPainter painter(this);
        QPen pen = painter.pen();
        pen.setWidth(drawWidth);
        pen.setColor(Qt::darkGreen);
        painter.setPen(pen);
 
        QPainterPath path(QPointF(0.0, 0.0));
 
        QPointF c1(width()*0.2,height()*0.8);
        QPointF c2(width()*0.8,height()*0.2);
 
        path.cubicTo(c1,c2,QPointF(width(),height()));
 
        //draw the bezier curve
        painter.drawPath(path);
 
        //Make the painter ready to draw chars
        QFont font = painter.font();
        font.setPixelSize(drawWidth*2);
        painter.setFont(font);
        pen.setColor(Qt::red);
        painter.setPen(pen);
 
        qreal percentIncrease = (qreal) 1/(hw.size()+1);
        qreal percent = 0;
 
        for ( int i = 0; i < hw.size(); i++ ) {
            percent += percentIncrease;
 
            QPointF point = path.pointAtPercent(percent);
            qreal angle = path.angleAtPercent(percent);   // Clockwise is negative
 
            painter.save();
            // Move the virtual origin to the point on the curve
            painter.translate(point);
            // Rotate to match the angle of the curve
            // Clockwise is positive so we negate the angle from above
            painter.rotate(-angle); 
            // Draw a line width above the origin to move the text above the line
            // and let Qt do the transformations 
            painter.drawText(QPoint(0, -pen.width()),QString(hw[i]));
            painter.restore();
        }
    }
 
};
 
int main(int argc, char **argv)
{
    QApplication app(argc, argv);
    Widget widget;
    widget.show();
    return app.exec();
}

#include <QtGui>
#include <cmath>

class Widget : public QWidget
{
public:
    Widget ()
        : QWidget() { }
private:
    void paintEvent ( QPaintEvent *)
    {
        QString hw("hello world");
        int drawWidth = width() / 100;
        QPainter painter(this);
        QPen pen = painter.pen();
        pen.setWidth(drawWidth);
        pen.setColor(Qt::darkGreen);
        painter.setPen(pen);

        QPainterPath path(QPointF(0.0, 0.0));

        QPointF c1(width()*0.2,height()*0.8);
        QPointF c2(width()*0.8,height()*0.2);

        path.cubicTo(c1,c2,QPointF(width(),height()));

        //draw the bezier curve
        painter.drawPath(path);

        //Make the painter ready to draw chars
        QFont font = painter.font();
        font.setPixelSize(drawWidth*2);
        painter.setFont(font);
        pen.setColor(Qt::red);
        painter.setPen(pen);

        qreal percentIncrease = (qreal) 1/(hw.size()+1);
        qreal percent = 0;

        for ( int i = 0; i < hw.size(); i++ ) {
            percent += percentIncrease;

            QPointF point = path.pointAtPercent(percent);
            qreal angle = path.angleAtPercent(percent);   // Clockwise is negative

            painter.save();
            // Move the virtual origin to the point on the curve
            painter.translate(point);
            // Rotate to match the angle of the curve
            // Clockwise is positive so we negate the angle from above
            painter.rotate(-angle); 
            // Draw a line width above the origin to move the text above the line
            // and let Qt do the transformations 
            painter.drawText(QPoint(0, -pen.width()),QString(hw[i]));
            painter.restore();
        }
    }

};

int main(int argc, char **argv)
{
    QApplication app(argc, argv);
    Widget widget;
    widget.show();
    return app.exec();
}

To copy to clipboard, switch view to plain text mode 

[Achayan]

thanks a lot Chris, it works perfectly ...