Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a text along with curve using QPainterPath

I am trying to build a arc with some text. I am able to create the arc and I can place the text along with curve. But so far I cant find a way rotate text perpendicular to the curve.

Here is the code I am trying

from __future__ import division
import os
import sys
from PyQt4 import QtGui,QtCore
import math

class PathPaintTest(QtGui.QFrame):


    def __init__(self, *args):
        super (PathPaintTest, self).__init__(*args)
        self.setMaximumSize(250, 110)
        self.setMinimumSize(250, 110)
        self.setFrameShape(QtGui.QFrame.WinPanel)
        self.setFrameShadow(QtGui.QFrame.Sunken)

    def paintEvent(self, event):
        hw = QtCore.QString("Hello World")
        drawWidth = self.width() / 100
        painter = QtGui.QPainter(self)
        pen = painter.pen()
        pen.setWidth(drawWidth)
        pen.setColor(QtGui.QColor(QtCore.Qt.red))
        painter.setPen(pen)
        painter.translate(5,0)
        cc1 = QtCore.QPointF(5, -15)
        cc2 = QtCore.QPointF(220, -15)
        path1 = QtGui.QPainterPath(QtCore.QPointF(5, 140))
        path1.cubicTo(cc1, cc2, QtCore.QPointF(240, 140))
        painter.drawPath(path1)

        pen.setColor(QtGui.QColor(QtCore.Qt.yellow))
        painter.setPen(pen)
        font = painter.font()
        font.setPixelSize(drawWidth * 5)
        painter.setFont(font)
        percentIncrease = 1 / (hw.size() + 1)
        perecent = 0
        for i in range(hw.size()):
            perecent+=percentIncrease
            point = QtCore.QPointF(path1.pointAtPercent(perecent))
            painter.drawText(point,QtCore.QString(hw[i]))

        QtGui.QFrame.paintEvent(self,event)


class TextTest(QtGui.QWidget):
    def __init__(self):
        super(TextTest, self).__init__()
        self.initUI()

    def keyPressEvent(self, event):
        if event.key() == QtCore.Qt.Key_Escape:
            self.close()

    def initUI(self):
        self.mypb = PathPaintTest()
        hbox = QtGui.QHBoxLayout()
        hbox.addWidget(self.mypb)

        vbox = QtGui.QVBoxLayout()
        vbox.addLayout(hbox)

        self.setLayout(vbox)
        self.setGeometry(1900, 500, 450, 180)
        self.setWindowTitle('Text Test')

def run():

    app = QtGui.QApplication(sys.argv)
    ex = TextTest()
    ex.show()
    sys.exit(app.exec_())

if __name__ == "__main__":
    run()

But I am trying to achieve something close to this post http://zrusin.blogspot.com/2006/11/text-on-path.html . Like text want to be rotated based on the angle. Any idea how I can do with QPainterPath and QPainter or any other methods ?

I am looking a output like this

enter image description here

Sorry for putting the image link because of less reputation i am unable to add image to my post.

EDIT :

Here is some updated version .. its python version of qt-project.org/faq/answer/how_do_i_make_text_follow_the_line_curve_and_angle_of_the_qpainterpath

from __future__ import division
import os
import sys
from PyQt4 import QtGui,QtCore
import math

class PathPaintTest(QtGui.QFrame):


    def __init__(self, *args):
        super (PathPaintTest, self).__init__(*args)
        self.setMaximumSize(250, 110)
        self.setMinimumSize(250, 110)
        self.setFrameShape(QtGui.QFrame.WinPanel)
        self.setFrameShadow(QtGui.QFrame.Sunken)

    def paintEvent(self, event):
        hw = QtCore.QString("Hello World")
        drawWidth = self.width() / 100
        painter = QtGui.QPainter(self)
        pen = painter.pen()
        pen.setWidth(drawWidth)
        pen.setColor(QtGui.QColor(QtCore.Qt.red))
        painter.setPen(pen)
        painter.translate(5,0)

        c1 = QtCore.QPointF(5, -15)
        c2 = QtCore.QPointF(220, -15)
        path = QtGui.QPainterPath(QtCore.QPointF(5, 140))
        path.cubicTo(c1, c2, QtCore.QPointF(240, 140))
        painter.drawPath(path)

        pen.setColor(QtGui.QColor(QtCore.Qt.green))
        painter.setPen(pen)
        font = painter.font()
        font.setPixelSize(drawWidth * 10)
        painter.setFont(font)
        perecentIncrease = 1 / (hw.size() + 1)
        perecent = 0

        for i in range(hw.size()):
            perecent+=perecentIncrease
            point = QtCore.QPointF(path.pointAtPercent(perecent))
            angle = path.angleAtPercent(perecent)
            rad = math.radians(angle)
            sina = math.sin(rad)
            cosa = math.cos(rad)
            deltaPenX = cosa * pen.width()
            deltaPenY = sina * pen.width()
            newX = (cosa * point.x()) - (sina * point.y())
            newY = (cosa * point.y()) + (sina * point.x())
            deltaX = newX - point.x()
            deltaY = newY - point.y()
            tran =  QtGui.QTransform(cosa,sina,-sina,cosa,-deltaX + deltaPenX,-deltaY - deltaPenY)
            painter.setWorldTransform(tran)
            painter.drawText(point,QtCore.QString(hw[i]))

        QtGui.QFrame.paintEvent(self,event)


class TextTest(QtGui.QWidget):
    def __init__(self):
        super(TextTest, self).__init__()
        self.initUI()

    def keyPressEvent(self, event):
        if event.key() == QtCore.Qt.Key_Escape:
            self.close()

    def initUI(self):
        self.mypb = PathPaintTest()
        hbox = QtGui.QHBoxLayout()
        hbox.addWidget(self.mypb)

        vbox = QtGui.QVBoxLayout()
        vbox.addLayout(hbox)

        self.setLayout(vbox)
        self.setGeometry(300, 200, 500, 250)
        self.setWindowTitle('Text Test')

def run():

    app = QtGui.QApplication(sys.argv)
    ex = TextTest()
    ex.show()
    sys.exit(app.exec_())

if __name__ == "__main__":
    run()

but still I cant manage to get the rotation .

UPDATE :

I got it working now here is the updated section, maybe it will help some one else also.

    painter.save()
    painter.translate(point)
    painter.rotate(-angle)
    painter.drawText(QtCore.QPoint(0, -pen.width()),QtCore.QString(hw[i]))
    painter.restore();
like image 834
Achayan Avatar asked Jun 08 '12 20:06

Achayan


1 Answers

painter.save()
painter.translate(point)
painter.rotate(-angle)
painter.drawText(QtCore.QPoint(0, -pen.width()),QtCore.QString(hw[i]))
painter.restore();

Answering my own question because of the comment and sorry for the late reply :)

like image 189
Achayan Avatar answered Oct 22 '22 22:10

Achayan