QPainter：绘制时钟

学习QPainter的使用

最近在学习Qt，利用QPainter画一个时钟。

主要代码

在widget.h中声明绘图事件

   void paintEvent(QPaintEvent *);

在widget.cpp中实现绘图事件

void Widget::paintEvent(QPaintEvent *)
{
    QPainter p(this);

    //抗锯齿
    p.setRenderHint(QPainter::Antialiasing);

    //字体
    QFont font = p.font();
    font.setBold(true);
    font.setPointSize(20);
    p.setFont(font);

    //置中心点为原点
    p.translate(width()/2,height()/2);

    //画大圆
    p.drawEllipse(-160,-160,320,320);

    //确定文本所在区域矩形
    QRectF f1(-20,-160,40,40);//1~3&&9~12
    QRectF f2(-20,-20,40,40);//4~8

    //画数字刻度
    for(int i = 1;i<=12;i++)
    {
        if(i<4||i>8)
        {
            p.save();
            p.rotate(30*i);
            p.drawText(f1,Qt::AlignCenter,QString::number(i));
            p.restore();
        }
        else
        {
            p.save();
            QPoint pMid(f1.left()+20,f1.top()+20);//对自身旋转的中心点

            p.rotate(30*i);
            p.translate(pMid.x(),pMid.y());
            p.rotate(180);
            p.drawText(f2,Qt::AlignCenter,QString::number(i));

            p.restore();
        }
    }

    //小刻度
    for(int i= 1;i<=60;i++)
    {
        p.drawLine(0,-155,0,-160);
        p.rotate(6);
    }
    //大刻度
    for(int i= 1;i<=12;i++)
    {
        p.drawLine(0,-150,0,-160);
        p.rotate(30);
    }

    //设计时针分针秒针形状
    static const QPoint pHour[4] = {
        QPoint(-4,4),QPoint(0,20),QPoint(4,4),QPoint(0,-60)
    };
    static const QPoint pMin[4] = {
        QPoint(-4,4),QPoint(0,30),QPoint(4,4),QPoint(0,-90)
    };
    static const QPoint pSec[4] = {
        QPoint(-4,4),QPoint(0,30),QPoint(4,4),QPoint(0,-120)
    };

    //设计颜色
    QColor cHour(Qt::black);
    QColor cMin(Qt::green);
    QColor cSec(Qt::red);

    QTime time = QTime::currentTime();

    //时针
    p.save();
    p.setBrush(cHour);
    p.rotate(time.hour()*30+30*time.minute()/60+0.5*time.second()/60);
    p.drawConvexPolygon(pHour,4);
    p.restore();

    //分针
    p.save();
    p.setBrush(cMin);
    p.rotate(360*time.minute()/60+6*time.second()/60);
    p.drawConvexPolygon(pMin,4);
    p.restore();

    //秒针
    p.save();
    p.setBrush(cSec);
    p.rotate(time.second()*6);//秒针每秒转6°
    p.drawConvexPolygon(pSec,4);
    p.restore();

    p.setBrush(Qt::white);
    p.drawEllipse(-4,-4,8,8);

    //电子时间
    QString strTime = time.toString();
    p.drawText(-190,-200,120,40,Qt::AlignLeft,strTime);
}

运行结果

界面主要的特点是符合正常视觉的倾斜显示。

一开始只用了简单的rotate（30）来实现，（如下图），但4~8不太好看，“6”变成了“9”，不符合正常钟表规范。
经过改变原点位置，并对自身旋转180°得到比较满意的结果。