前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Qt自绘系列-透明时钟

Qt自绘系列-透明时钟

作者头像
Qt君
发布2023-03-17 14:52:18
6250
发布2023-03-17 14:52:18
举报
文章被收录于专栏:跟Qt君学编程跟Qt君学编程

❝使用QPainter画透明时钟,还可拖动。❞

一、演示

二、实现

  1. 画背景图,一个白色圆环,60个圆点和12个数字组成。
代码语言:javascript
复制
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. 画中心白色小圆点。
代码语言:javascript
复制
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. 画小时指针线和分钟指针线(它们相同实现)。
代码语言:javascript
复制
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. 画秒钟指针线,它是一个梯形状。
代码语言:javascript
复制
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. 每隔一秒定时更新时钟。
代码语言:javascript
复制
m_timerId = this->startTimer(1000, Qt::PreciseTimer);
this->updateTime();
代码语言:javascript
复制
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();
}

三、透明窗口与拖动

  在桌面状态下运行效果:

  1. 画透明窗口背景实现。
代码语言:javascript
复制
setWindowFlags(Qt::FramelessWindowHint |
               Qt::X11BypassWindowManagerHint);
setAttribute(Qt::WA_TranslucentBackground);
  1. 通过处理鼠标按下事件处理实现窗口拖动。
代码语言:javascript
复制
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);
}

四. 获取更多

Qml透明窗口实现

Qt透明无边框窗口


本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-01-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Qt君 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、演示
  • 二、实现
  • 三、透明窗口与拖动
  • 四. 获取更多
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档