前言

前几天我们自绘了一个汽车仪表盘，不知道大家觉得怎么样，今天我们再来绘制一个iPhone上的时钟图标练练手，苹果的UI还是很细节的，一个图标还是按照当前时间实时变化的，iPhone上的截图如下（网上找的图片，不是很清晰）：

我们自绘实现的效果如下：

唯一的区别就是我把分针的长度缩短了一些，当然这都有接口可以轻松设置，至于样式也都可以修改，我这里就不再一一列举，具体实现方法和上次的仪表盘非常的类似。

源码

#ifndef CLOCK_H#define CLOCK_H#include <QWidget>#include <QTimerEvent>#define SIDE_LENGTH 200class Clock : public QWidget{    Q_OBJECTpublic:    explicit Clock(QWidget *parent = 0);    void paintEvent(QPaintEvent *event);    void drawBackground(QPainter *painter);    void drawdial(QPainter *painter);    void drawNumber(QPainter *painter);    void drawHourHand(QPainter *painter);    void drawMinuteHand(QPainter *painter);    void drawSecondHand(QPainter *painter);    void timerEvent(QTimerEvent *event);public slots:private:    QColor m_BackgroundColor;   //背景颜色    QColor m_DialColor;         //表盘颜色    QColor m_FontColor;         //字体颜色    QColor m_HourHandColor;     //时针颜色    QColor m_MinuteHandColor;   //分针颜色    QColor m_SecondHandColor;   //秒针颜色    int m_nRadius;              //表盘半径    int m_nTimerId;             //定时器Id    int m_nHour;                //当前小时    int m_nMinute;              //当前分钟    int m_nSecond;              //当前秒};#endif // CLOCK_H

#include "Clock.h"#include "MyType.h"#include <QtMath>#include <QDateTime>#include <QDebug>Clock::Clock(QWidget *parent) : QWidget(parent){    this->resize(SIDE_LENGTH, SIDE_LENGTH);    this->setAttribute(Qt::WA_DeleteOnClose);    this->setWindowTitle(ZH_CN("时钟"));    m_nRadius = SIDE_LENGTH / 2 * 0.9;    m_nHour = 0;    m_nMinute = 0;    m_nSecond = 0;    m_BackgroundColor = QColor(0, 0, 0);    m_DialColor = QColor(255, 255, 255);    m_FontColor = QColor(0, 0, 0);    m_HourHandColor = QColor(0, 0, 0);    m_MinuteHandColor = QColor(0, 0, 0);    m_SecondHandColor = QColor("#FF7F00");    m_nTimerId = startTimer(1000);}//重写绘制函数void Clock::paintEvent(QPaintEvent *event){    Q_UNUSED(event);    QPainter painter(this);    painter.setRenderHint(QPainter::Antialiasing); //开启反锯齿    painter.translate(this->width() / 2, this->height() / 2); //将坐标原点平移到到窗口正中心    /*     * 此时坐标系：     * (-,-) | (+,-)     * -------------     * (-,+) | (+,+)    */    //等比例缩放，保证m_nRadius不变的情况下，圆的大小随窗口的大小自适应    int nSideLen = qMin(this->width(), this->height()); //获取较短边的边长，外圆直径就等于较短边边长    painter.scale(nSideLen / (SIDE_LENGTH * 1.0), nSideLen / (SIDE_LENGTH * 1.0));    drawBackground(&painter);   //绘制背景    drawdial(&painter);         //绘制表盘    drawNumber(&painter);       //绘制数字    drawHourHand(&painter);     //绘制时针    drawMinuteHand(&painter);   //绘制分针    drawSecondHand(&painter);   //绘制秒针}//绘制背景void Clock::drawBackground(QPainter *painter){    painter->save();    painter->setPen(Qt::NoPen); //不绘制边框    //绘制外圆    painter->setBrush(m_BackgroundColor);    QRectF rectangle(-(SIDE_LENGTH / 2), -(SIDE_LENGTH / 2), SIDE_LENGTH, SIDE_LENGTH);    painter->drawRoundedRect(rectangle, SIDE_LENGTH / 5, SIDE_LENGTH / 5);    painter->restore();}//绘制表盘void Clock::drawdial(QPainter *painter){    painter->save();    painter->setPen(Qt::NoPen); //不绘制边框    //绘制外圆    painter->setBrush(m_DialColor);    painter->drawEllipse(QPointF(0, 0), m_nRadius, m_nRadius);    painter->restore();}//绘制数字void Clock::drawNumber(QPainter *painter){    painter->save();    int nRadius = (int)(m_nRadius * 0.83);    painter->setFont(QFont("Arial", 18, QFont::Bold));    painter->setPen(QPen(m_FontColor));    QFontMetricsF fm = QFontMetricsF(painter->font());    double dbRotate = (double)360 / 12;    for (int i=0; i<12; i++)    {        //绘图坐标系中3点钟方向是0°，1点钟方向要减去60°        int nAngle = -60 + dbRotate * i;        //sin()和cos()的参数是弧度，所以要先将角度转换为弧度，360° = 2π，所以 1° = π / 180        float fAngleArc = (nAngle % 360) * M_PI / 180;        //此时就相当于一个数学题，已知圆的圆心(x0, y0)、半径r和以及点A(x1, y1)与X轴的夹角a，求该点A的坐标        //x1 = x0 + r * cos(a * π / 180)        //y1 = y0 + r * sin(a * π / 180)        //并且圆心就是(0, 0)        int x = nRadius * cos(fAngleArc);        int y = nRadius * sin(fAngleArc);        QString strNumber = QString::number(i + 1);        int w = (int)fm.width(strNumber);        int h = (int)fm.height();        x = x - w / 2;        y = y + h / 4;        painter->drawText(QPointF(x, y), strNumber);    }    painter->restore();}//绘制时针void Clock::drawHourHand(QPainter *painter){    painter->save();    int nRadius = (int)(m_nRadius * 0.9);    double dbRotate = (double)360 / 12 / 60; //时针每分钟走的度数，一分钟变一次    //绘图坐标系中3点钟方向是0°，0秒的方向要减去90°    dbRotate = -90 + (m_nHour * 60 + m_nMinute) * dbRotate;    // 画中心圆环外圆    painter->setPen(Qt::NoPen);  //没有边界    painter->setBrush(m_HourHandColor);    painter->drawEllipse(QPointF(0, 0), 5, 5);    // 画中心圆环内圆    painter->setBrush(m_DialColor);    painter->drawEllipse(QPointF(0, 0), 3, 3);    painter->restore();    //画指针    painter->save();    painter->rotate(dbRotate);    painter->setPen(Qt::NoPen);  //没有边界    painter->setPen(QPen(QBrush(m_HourHandColor), 2));    painter->drawLine(QPointF(-7, 0), QPointF(nRadius / 5, 0)); //每次都是绘制3点钟方向    painter->restore();    //画矩形    painter->save();    painter->rotate(dbRotate);    painter->setBrush(m_BackgroundColor);    QRectF rectangle(nRadius / 5, -2, nRadius / 5 * 2, 4);    painter->drawRoundedRect(rectangle, 2, 2);    painter->restore();}//绘制分针void Clock::drawMinuteHand(QPainter *painter){    painter->save();    int nRadius = (int)(m_nRadius * 0.9);    double dbRotate = (double)360 / 60; //分针每分钟走的度数，一分钟变一次    //绘图坐标系中3点钟方向是0°，0秒的方向要减去90°    dbRotate = -90 + m_nMinute * dbRotate;    //画指针    painter->rotate(dbRotate);    painter->setPen(Qt::NoPen);  //没有边界    painter->setPen(QPen(QBrush(m_MinuteHandColor), 2));    painter->drawLine(QPointF(-7, 0), QPointF(nRadius / 5, 0)); //每次都是绘制3点钟方向    painter->restore();    //画矩形    painter->save();    painter->rotate(dbRotate);    painter->setBrush(m_BackgroundColor);    QRectF rectangle(nRadius / 5, -2, nRadius / 5 * 3, 4);    painter->drawRoundedRect(rectangle, 2, 2);    painter->restore();}//绘制秒针void Clock::drawSecondHand(QPainter *painter){    painter->save();    int nRadius = (int)(m_nRadius * 0.95);    double dbRotate = (double)360 / 60; //秒钟每秒走的度数，一秒变一次    //绘图坐标系中3点钟方向是0°，0秒的方向要减去90°    dbRotate = -90 + m_nSecond * dbRotate;    //画指针    painter->rotate(dbRotate);    painter->setPen(Qt::NoPen);  //没有边界    painter->setPen(QPen(QBrush(m_SecondHandColor), 2));    painter->drawLine(QPointF(-nRadius * 0.1, 0), QPointF(nRadius, 0)); //每次都是绘制3点钟方向    painter->restore();}void Clock::timerEvent(QTimerEvent *event){    if (event->timerId() == m_nTimerId)    {        QDateTime now = QDateTime::currentDateTime();        m_nHour = now.time().hour() % 12; //12小时制        m_nMinute = now.time().minute();        m_nSecond = now.time().second();        this->update();    }}

其他一些设置的接口我就不贴出来了，无非就是对变量赋值，大家自己实现即可。