Qt自绘系列-透明时钟

分手后的思念是犯贱 2022-12-29 01:41 244阅读 0赞

> 使用QPainter画透明时钟。

上手难度：⭐️⭐️⭐️

## 1. 演示 ##

![在这里插入图片描述][2021010214461963.gif]

## 2. 实现 ##

1.  画背景图，一个白色圆环，60个圆点和12个数字组成。  
    ![background.png][]

QPixmap pixmap = QPixmap(width, height);
    pixmap.fill(Qt::transparent);
    
    QPainter painter(&pixmap);
    painter.setRenderHint(QPainter::Antialiasing, true);
    painter.setRenderHints(QPainter::SmoothPixmapTransform, true);
    painter.setPen(QPen(Qt::white, width * 0.035));
    
    /* 改变绘图坐标点。 */
    painter.translate(width / 2, height/2);
    /* 画白色圆环 */
    painter.drawEllipse(-(width - painter.pen().width()) / 2,
                        -(height -painter.pen().width())/ 2,
                        height - painter.pen().width(),
                        height - painter.pen().width());
    
    int circleRadius = width * 0.025;
    painter.rotate(-90);
    /* 绘制60个圆点 */
    for (int i = 0; i < 60; i++) { 
    
        QColor color("#90d5d5d5");
        if (i % 5 == 0) { 
            color = Qt::black;
            /* 画数字 */
            painter.drawPixmap(width*0.55/2, -25, createOneNumberPixmap(i == 0 ? 12 : i/5, 50, -i*6 + 90));
        }
    
        painter.rotate(6);
    }

1.  画中心白色小圆点。

QPixmap pixmap = QPixmap(radius, radius);
    pixmap.fill(Qt::transparent);
    
    QPainter painter(&pixmap);
    painter.setRenderHint(QPainter::Antialiasing, true);
    if (isBorder)
        painter.setPen(QPen(QColor("#333333"), 1));
    else
        painter.setPen(Qt::NoPen);
    
    painter.setBrush(QBrush(color));
    
    painter.drawEllipse(0, 0, radius, radius);

1.  画小时指针线和分钟指针线(它们相同实现)。

QPixmap pixmap = QPixmap(width, height);
    pixmap.fill(Qt::transparent);
    
    QPainter painter(&pixmap);
    painter.setRenderHint(QPainter::Antialiasing, true);
    painter.setPen(Qt::NoPen);
    painter.setBrush(QBrush(color));
    
    /* 画头部圆 */
    painter.drawEllipse(0, 0, height, height);
    /* 画矩形 */
    painter.drawRect(height/2, 0, width - height, height);
    /* 画尾部圆 */
    painter.drawEllipse(width - height, 0, height, height);

1.  画秒钟指针线，它是一个梯形状。

QPixmap pixmap = QPixmap(width, height);
    pixmap.fill(Qt::transparent);
    
    QPainter painter(&pixmap);
    painter.setRenderHint(QPainter::Antialiasing, true);
    painter.setPen(Qt::NoPen);
    painter.setBrush(QBrush(color));
    
    const QPointF points[4] = { 
        QPointF(0, height),
        QPointF(0, 0),
        QPointF(width, height * 0.25),
        QPointF(width, height * 0.75)
    };
    
    /* 画梯形，从左下角顺时针绘制。 */
    painter.drawPolygon(points, 4);

1.  每隔一秒定时更新时钟。

m_timerId = this->startTimer(1000, Qt::PreciseTimer);
    this->updateTime();

void ClockView::updateTime()
    { 
        QTime currentTime = QDateTime::currentDateTime().time();
        m_hourAngle = -90 + 30 * currentTime.hour() + 30 * currentTime.minute()/60;
        m_minuteAngle = -90 + 6 * currentTime.minute();
        m_secondAngle = -90 + 6 * currentTime.second();
        update();
    }

## 3. 透明窗口与拖动 ##

在桌面状态下运行效果：  
![demo2.gif][]

1.  画透明窗口背景实现。

setWindowFlags(Qt::FramelessWindowHint |
                   Qt::X11BypassWindowManagerHint);
    setAttribute(Qt::WA_TranslucentBackground);

1.  通过处理鼠标按下事件处理实现窗口拖动。

QPoint m_startPoint;
    void ClockView::mousePressEvent(QMouseEvent *event)
    { 
        if (event->button() == Qt::LeftButton) { 
            /* 记录鼠标左键按下的初始状态。 */
            m_startPoint = frameGeometry().topLeft() - event->globalPos();
        }
    }
    
    void ClockView::mouseMoveEvent(QMouseEvent *event)
    { 
        /* 移动窗口 */
        this->move(event->globalPos() + m_startPoint);
    }

## 4. 获取更多 ##

已付费用户，如需源码或技术交流，请在评论区留言QQ号，拉你进群，可在群文件获取。

[2021010214461963.gif]: /images/20221120/d3b231791fed44f18b57bb5f89528734.png
[background.png]: /images/20221120/706dbce374434ecfb88b2109dbbb2848.png
[demo2.gif]: /images/20221120/c68891e647fc41838816470e2783d208.png