PyQt5 繪制鍾表

參考程序鏈接：https://yq.aliyun.com/articles/119927，感謝作者。

 

該圖為pyqt5實現的效果圖：

下附源碼：

from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from math import *
import sys
  
class clockForm(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Clock")
        self.timer=QTimer()
        #設置窗口計時器
        self.timer.timeout.connect(self.update)
        self.timer.start(1000)
          
    def paintEvent(self,event):
        #時鍾指針坐標點
        hourPoint = [QPoint(7,8), QPoint(-7,8), QPoint(0, -30)]
        minPoint = [QPoint(7,8), QPoint(-7,8), QPoint(0, -65)]
        secPoint = [QPoint(7,8), QPoint(-7,8), QPoint(0, -80)]
        #時鍾指針顏色
        hourColor = QColor(200, 100, 0, 200)
        minColor = QColor(0, 127, 127, 150)
        secColor = QColor(0, 160, 230, 150)

        side = min(self.width(), self.height())

        painter = QPainter(self)
        painter.setRenderHint(QPainter.Antialiasing)
        painter.translate(self.width()/2, self.height()/2)  #painter坐標系原點移至widget中央
        painter.scale(side / 200, side / 200)               #縮放painterwidget坐標系，使繪制的時鍾位於widge中央,即鍾表支持縮放

        #繪制小時和分鍾刻度線
        painter.save()
        for i in range(0, 60):
            if (i % 5) != 0:
                painter.setPen(minColor)
                painter.drawLine(92, 0, 96, 0)#繪制分鍾刻度線
            else:
                painter.setPen(hourColor)
                painter.drawLine(88, 0, 96, 0)#繪制小時刻度線
            painter.rotate(360/60)
        painter.restore()

        #繪制小時數字
        painter.save()
        font = painter.font()
        font.setBold(True)
        painter.setFont(font)
        pointSize = font.pointSize()
        painter.setPen(hourColor)
        nhour = 0
        radius = 100
        for i in range(0, 12):
            nhour = i + 3   #按QT-Qpainter的坐標系換算，3小時的刻度線對應坐標軸0度
            if nhour > 12:
                nhour = nhour - 12

            x = radius*0.8*cos(i*30*pi/180.0) - pointSize
            y = radius*0.8*sin(i*30*pi/180.0) - pointSize/2.0
            width = pointSize*2
            height = pointSize
            painter.drawText(QRectF(x,y,width,height), Qt.AlignCenter, str(nhour))
        painter.restore()

        time = QTime.currentTime()

        #繪制小時指針
        painter.save()
        painter.setPen(Qt.NoPen)        #無輪廓線
        painter.setBrush(hourColor)     #填充色
        painter.rotate(30*(time.hour() + time.minute() / 60))#每圈360° = 12h 即：旋轉角度 = 小時數 * 30°
        print(time.hour())
        painter.drawConvexPolygon(QPolygonF(hourPoint))
        painter.restore()

        #繪制分鍾指針
        painter.save()
        painter.setPen(Qt.NoPen)        #無輪廓線
        painter.setBrush(minColor)      #填充色
        painter.rotate(6*(time.minute() + time.second() / 60))#每圈360° = 60m 即：旋轉角度 = 分鍾數 * 6°
        painter.drawConvexPolygon(QPolygonF(minPoint))
        painter.restore()

        #繪制秒鍾指針
        painter.save()
        painter.setPen(Qt.NoPen)        #無輪廓線
        painter.setBrush(secColor)      #填充色
        painter.rotate(6*time.second())
        painter.drawConvexPolygon(QPolygonF(secPoint))      #每圈360° = 60s 即：旋轉角度 = 秒數 * 6°
        painter.restore()

  
if __name__=="__main__":

    app=QApplication(sys.argv)
    form=clockForm()
    form.show()
    app.exec_()

 

手動畫了個簡單的坐標系草圖幫助理解，也方便自己以后查閱

 

如何實現鍾表跟隨窗口縮放？

painter.scale(side / 200, side / 200)這句話可以讓你200*200的區域內安心畫表，它可以幫你將畫的表自動填充到窗體內  painter的坐標原點一開始就移到widget的中央，然后以該點為原點開始繪制周圍一圈的刻度線、時鍾數字等。其中刻度線距離painter的原點最遠painter.drawLine(92, 0, 96, 0)，由於painter坐標系縮放的原因，刻度線頂點距離原點真實的長度為 96*side/200,基本接近0.5side，而side = min(self.width(), self.height()),所以時鍾可以跟隨窗口自由縮放