Help about Custom Paint Event of Progressbar

[Emrecp]

Hello, I want to make a custom progressbar.
Here is I wanted:

Here is the result on Qt:

If you look closely, the polygon in the upper right has crossed the progressbar. How can I fix that?

My code:

import sys, os, time
from PySide6 import QtCore, QtWidgets, QtGui
from PySide6.QtWidgets import *
from PySide6.QtCore import *
from PySide6.QtGui import *


class EProgressbar(QProgressBar):
    def __init__(self):        
        super(EProgressbar, self).__init__(None)
        self.r, self.h = 15, 32
        self.setValue(self.value())
    def paintEvent(self, event: QPaintEvent) -> None:
        pt = QPainter();pt.begin(self);pt.setRenderHint(QPainter.Antialiasing,True)        #pt.setRenderHint(QPainter.SmoothPixmapTransform,True)
        path = QPainterPath();path2 = QPainterPath(); path3 = QPainterPath()


        BRUSH_BASE_BACKGROUND, BRUSH_BASE_FOREGROUND, BRUSH_POLYGON, BRUSH_CORNER = QColor(247,247,250), QColor(255,152,91), QColor(255,191,153), QColor(203,203,205)



        pt.setPen(QPen(BRUSH_CORNER,1.5));pt.setBrush(BRUSH_BASE_BACKGROUND)
        rect = QRect(1, 0, self.width()-2, self.h)
        path.addRoundedRect(rect, self.r, self.r)





        path2.addRoundedRect(QRect(2,2, self.value() / 100 * self.width() - 4, self.h-4), self.r, self.r)




        pt.drawPath(path)
        pt.setBrush(BRUSH_BASE_FOREGROUND)

        pt.drawPath(path2)

        pt.setPen(Qt.NoPen)
        pt.setBrush(BRUSH_POLYGON)
        start_x = 20
        y, dx = 3, 6
        polygon_width = 14
        polygon_space =18 #15#18
        progress_filled_width = self.value()/self.maximum()*self.width()
        for i in range(100):
            x = start_x + (i*polygon_width) + (i*polygon_space)
            if x >= progress_filled_width or (x+ polygon_width >= progress_filled_width):
                break
            path2.addPolygon(QPolygon([
            QPoint(x, y),
            QPoint(x+polygon_width, y),
            QPoint(x+polygon_width/2, self.h-y),
            QPoint(x-polygon_width/2, self.h-y),
            #QPoint(15, d*2),
            #QPoint(10, self.h-d*2),
            #QPoint(10, d * 2),
            #QPoint(15, self.h-d*2),

        ]))
        pt.drawPath(path2)

        font = QFont('Helvetica', 11, weight=QFont.Bold)
        pt.setFont(font)
        pt.setPen(Qt.white)
        pt.drawText(QRect(2,2,self.width()-4,self.h-4), Qt.AlignCenter, f"%{self.value()}")

        pt.end()


if __name__ == "__main__":
    app = QApplication(sys.argv)
    wind = QMainWindow();wind.setStyleSheet("QMainWindow{background-color:blue}")
    wind.setWindowTitle("EProgressBar")
    wind.resize(200,150)
    #wid = QWidget()
    #lay = QHBoxLayout(wid)
    #lay.setAlignment(Qt.AlignCenter)
    e = EProgressbar()
    e.setValue(80)
    e.setGeometry(QRect(10,10,170,250))
    #lay.addWidget(e)
    #wind.setCentralWidget(wid)
    e.setParent(wind)
    wind.show()
    sys.exit(app.exec())

[SGaist]

Hi,

From the top of my head, you would need to do some clipping.

[Pl45m4]

@Emrecp

Maybe this helps...
It's C++ code, but maybe you can adept. It requires some re-calculation... maybe there's another way..

[Emrecp]

@Pl45m4 Thank you but it did not help me.

[SGaist]

Hi,

From the top of my head, you would need to do some clipping.

[Emrecp]

@SGaist Wow thank you very much!
I fixed with pt.setClipPath(path2, Qt.ClipOperation.ReplaceClip)

Some part of total code:

 progress_filled_width = self.value()/self.maximum()*self.width()
 pt.setClipPath(path2, Qt.ClipOperation.ReplaceClip)
 for i in range(100):