我想在 Qt 上制作自定義進度條。
進度條的設計(PNG):

這是 Qt 上的結果:

Pic2的代碼:
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):
valueChanged = QtCore.Signal(int)
_val = 0
def __init__(self):
super(EProgressbar, self).__init__(None)
self.r = 15
self.setFixedHeight(40)
self._animation = QtCore.QPropertyAnimation(self, b"_vallll", duration=600)
self.valueChanged.connect(self.update)
def setValue(self, value:int) -> None:
self._animation.setStartValue(self.value())
self._animation.setEndValue(value)
self._val = value
self._animation.start()
def value(self) -> int:
return self._val
def ESetValue(self, value):
if self._val != value:
self._val = value
self.valueChanged.emit(value)
_vallll = QtCore.Property(int, fget=value, fset=ESetValue, notify=valueChanged)
def paintEvent(self, event: QPaintEvent) -> None:
pt = QPainter();pt.begin(self);pt.setRenderHints(QPainter.Antialiasing|QPainter.TextAntialiasing)
path = QPainterPath();path2 = QPainterPath(); path3 = QPainterPath()
font = QFont('Helvetica', 11, weight=QFont.Bold); font.setStyleHint(QFont.Times, QFont.PreferAntialias)
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 = self.rect().adjusted(2,2,-2,-2)#QRect(1, 0, self.width()-2, self.height())
path.addRoundedRect(rect, self.r, self.r)
#pt.setBrush(BRUSH_BASE_FOREGROUND)
#path.addRect(self.rect())
path2.addRoundedRect(QRect(2,2, self._vallll/ 100 * self.width()-4, self.height()-4), self.r, self.r)
#path2.addRoundedRect(QRect(20,2,10, self.height()), 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()
pt.setClipPath(path2, Qt.ClipOperation.ReplaceClip) # bu olmazsa polygon ta??yor, clip yap?lmas? laz?m
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.height()-y),
QPoint(x-polygon_width/2, self.height()-y)]))
pt.drawPath(path2)
pt.setFont(font)
pt.setPen(Qt.white)
pt.drawText(QRect(2,2,self.width()-4,self.height()-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(221,150)
wid = QWidget();lay = QHBoxLayout(wid);lay.setAlignment(Qt.AlignCenter)
e = EProgressbar();e.setValue(80)
timer = QTimer(wind)
def lamb():
import random
e.setValue(random.randint(0,100))
timer.timeout.connect(lamb)
#timer.start(1000)
#e.setGeometry(QRect(10,10,170,250))
lay.addWidget(e)
wind.setCentralWidget(wid)
#e.setParent(wind)
wind.show()
sys.exit(app.exec())
這個看起來不錯,但是當我將進度條值設定為0時,結果如下:

筆記:
- 我需要使用pt.setClipPath(path2, Qt.ClipOperation.ReplaceClip) else 如果你仔細看,右上角的多邊形已經越過了進度條。

所以我認為所有繪畫的東西都必須是?在同一個 QPainterPath 中?當我嘗試同一路徑中的所有繪圖(如
uj5u.com熱心網友回復:
問題在于矩形的寬度,由于寬度減小和圓角邊框而變得太窄。
更好的方法是剪輯到外部邊框的路徑并將該剪輯與向左延伸的圓角矩形合并(這樣它的寬度總是足夠的。
請注意,我選擇從根本上更改代碼中的大多數方面,也是為了提高可讀性。為了獲得更好的性能,我為小部件設定了字體(這比每次都重新創建要好),并且每當值為 0 時忽略條形繪制。
最后,由于您將值顏色繪制為白色,因此每當該值小于 50% 時,您還必須使用另一種顏色來繪制它,否則用戶將無法看到它,直到它達到該點。
class EProgressbar(QProgressBar):
valueChanged = QtCore.pyqtSignal(int)
_val = 0
def __init__(self):
super(EProgressbar, self).__init__(None)
self.r = 15
self.setFixedHeight(40)
self._animation = QtCore.QPropertyAnimation(self, b"_vallll", duration=600)
self.valueChanged.connect(self.update)
font = QFont('Helvetica', 11, weight=QFont.Bold)
font.setStyleHint(QFont.Times, QFont.PreferAntialias)
self.setFont(font)
# ...
def paintEvent(self, event: QPaintEvent) -> None:
pt = QPainter(self)
pt.setRenderHints(QPainter.Antialiasing|QPainter.TextAntialiasing)
border = QPainterPath()
border.addRoundedRect(
QRectF(self.rect().adjusted(2, 2, -3, -3)),
self.r, self.r)
pt.setPen(QColor(203,203,205))
pt.setBrush(QColor(247,247,250))
pt.drawPath(border)
pt.setClipPath(border)
foreground = QColor(255,191,153)
pt.setPen(foreground.darker(110))
pt.drawText(self.rect(), Qt.AlignCenter, '{}%'.format(self.value()))
if self._vallll <= self.minimum():
return
polygon_width = 14
brush_polygon = QPolygonF([
QPoint(0, 3),
QPoint(polygon_width, 3),
QPoint(polygon_width / 2, self.height() - 3),
QPoint(-polygon_width / 2, self.height() - 3)
])
bar_width = (self.width() - 4) * self._vallll * .01
brush_size = brush_polygon.boundingRect().width() 4
bar_count = int(bar_width / brush_size) 1
value_clip = QPainterPath()
rect = QRectF(-20, 2, 20 bar_width, self.height() - 3)
value_clip.addRoundedRect(rect, self.r, self.r)
pt.setClipPath(value_clip, Qt.IntersectClip)
brush_path = QPainterPath()
for i in range(bar_count):
brush_path.addPolygon(brush_polygon.translated(brush_size * i, 0))
pt.setPen(Qt.NoPen)
pt.setBrush(QColor(255,152,91))
pt.drawPath(border)
pt.setBrush(foreground)
pt.drawPath(brush_path)
pt.setPen(Qt.white)
pt.setFont(self.font())
pt.drawText(self.rect(), Qt.AlignCenter, '{}%'.format(self.value()))
在不相關的說明中,請注意您的代碼有很多可讀性問題;例如,您不應該使用分號來分隔函式:這樣做沒有任何好處,而且只會使代碼閱讀起來不必要地煩人;函式引數之間的空格也很重要;在Python 代碼的官方樣式指南中閱讀有關這些極其重要方面的更多資訊。
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/449622.html
