最近在做桌面小工具的时候遇到一个很常见的小需求界面上需要一个时钟。标题叫“用QT绘制一个简单的时钟”听起来像是给新手练手的小Demo但实际动手之后我发现这个“简单”里面藏着一整套关于QPainter绘图、坐标变换、定时器刷新和组件封装的知识。如果你也正在琢磨怎么在Qt里画一个像样的表盘或者想搞明白自绘控件背后那些“为什么这样做”的机制那这篇笔记应该能帮你省不少事。我会从需求分析讲起把绘图机制、指针角度计算、刷新策略这些核心点拆开揉碎最后给出一个能直接抄作业的完整思路。文章里所有代码都基于C和Qt Widgets不需要额外依赖拿过来就能跑。1. 从一个界面小需求说起为什么我选了QWidget自绘方案1.1 需求拆解这一版“简单时钟”到底简单在哪很多初学者拿到“时钟”这个需求第一反应是找一个现成的控件库或者用QLabel显示一个数字时间就交差。但如果是模拟时钟——就是那种有表盘、有指针、会转圈的表——情况就完全不一样了。我把这次的需求拆成了四个明确的点显示当前系统时间包括时针、分针、秒针。外观要像传统表盘白色底面、黑色刻度、三根长度不同的指针。窗口尺寸变化时表盘能自适应缩放不能出现指针“跑偏”的情况。组件要能独立复用以后放到别的项目里改改颜色就能用。拆完之后“简单”的含义就很清楚了逻辑不复杂但要处理的东西很琐碎。角度计算、坐标系旋转、定时刷新、防闪烁、自适应尺寸每一块单独拎出来都不难合在一起就考验基本功。1.2 三种实现路径的对比QLabel、Qt Quick与QWidget自绘在动手写代码之前我先把项目里可能用到的三种方案列了一张表做了个对比这里也分享给你。实现方案适用场景优点缺点QLabel QTimer更新数字文本只需要数字时钟代码量最少无法展示表盘、指针等图形Qt Quick Canvas跨平台、触摸界面动画流畅QML表达力强需要额外引入QML环境项目复杂度高自定义QWidget QPainter桌面工具、内嵌到现有Widget界面轻量、直观、完全掌控绘制细节需要手动处理刷新、缩放、坐标系变换我最终选了QWidget自绘方案。原因很直接项目本身就是一套Widgets界面的桌面工具为了一个时钟引入Qt Quick属实没必要。而QPainter这套绘制接口在Qt里非常成熟绘制时钟恰好能把它的核心用法都过一遍。有个朋友当时问我“为啥不直接把网上现成的时钟Demo下载下来改改”我的回答是如果你只是想交个差那确实可以但如果你想弄明白“指针为什么能转”“窗口变大了为什么表盘还居中”那还是自己写一遍印象最深刻。事实证明他后来在另一个项目里遇到自绘控件的坐标问题就是因为啃过这次代码才没有卡住。2. 画图前必须搞懂的底层机制QPainter的坐标系与绘制时机2.1 paintEvent不是“你想画就能画”而是“系统叫你画才能画”很多第一次接触自绘控件的人会下意识地认为paintEvent和普通函数一样想调用就调用。这是理解自绘机制时最常见的坑。Qt里的绘制生命周期是这样的窗口部件在首次显示、尺寸变化、被其他窗口遮挡后重新暴露、或者你手动调用了update()之后Qt会在合适的时机触发paintEvent。你写的所有绘制代码都放在这个函数里相当于说“系统要重绘了请把你希望显示的内容交给画师”。我在第一版代码里犯过一个错误把时钟的整个绘制逻辑写在一个独立的drawClock()函数里然后试图在定时器里直接调用它。结果发现屏幕上一点动静都没有。后来才反应过来正确的做法是让定时器去触发update()再由Qt统一调度paintEvent。所以我的代码框架是这样的void ClockWidget::paintEvent(QPaintEvent *event) { QPainter painter(this); // 所有绘制代码都写在这里 }什么时候需要重绘我只要记住一个原则不要在paintEvent之外主动调绘制函数而是通过update()去请求重绘。这样Qt会自动做合并优化连续多次调用update()也只会触发一次实际的绘制操作。2.2 三种坐标体系的关系窗口坐标、逻辑坐标与设备像素这部分是画好时钟的关键我再用生活化的方式解释一下。想象你站在一块白板前画图你手里的笔就是QPainter白板的左上角是坐标原点(0,0)向右是x轴正方向向下是y轴正方向。时钟的表盘假设正中心在白板的(x, y)处半径是r。但屏幕上的像素和你的逻辑尺寸不一定一一对应。尤其是当窗口支持缩放、屏幕又有不同DPI的时候更要注意坐标系换算。Qt提供了三种体系窗口坐标Window Coordinates)逻辑空间的坐标。你用painter.drawLine时填的坐标默认就是Widget的局部坐标左上角为原点。设备坐标Device Coordinates实际像素点。窗口宽度、高度对应的像素单位。视口Viewport窗口坐标映射到设备坐标的桥梁。对时钟这种对称图形来说最简单的做法不是自己去算每个点的坐标而是先让坐标系平移把原点搬到表盘圆心。这样后续所有绘制都以圆心为基准painter.translate(width() / 2, height() / 2);平移之后表盘上某一点到圆心的距离直接对应坐标值画刻度、画指针都变得直观很多。这也是整个绘制代码里最核心的一步。2.3 painter的保存与恢复画钟表前先学会“存档”画时针的时候我可能想让坐标系旋转到某个角度画完时针继续画分针又需要把坐标系旋转到另一个角度。如果直接在原坐标系上反复操作到后来你根本不知道自己转到哪了。Qt提供了两个简单的接口来解决这个问题painter.save()和painter.restore()。我每次旋转之前先save()画完之后restore()坐标系就回到保存时的状态。简单来说save和restore就像游戏里的“存档”和“读档”。画完一个元素读一次档接着画下一个谁也不会干扰谁。这在绘制时钟这种包含多个旋转元素的场景里几乎是无价的。3. 一步一步画出表盘与指针刻度、数字和角度计算3.1 最重要的数学公式时针、分针、秒针的偏转角度怎么算时钟的绘制逻辑不难但角度计算是绕不开的基础。我的推导思路是这样的秒针一圈60秒每秒转动6度360 ÷ 60。分针一圈60分钟每分钟转动6度但秒针的走动会让分针在1分钟内缓慢前进一点所以更精确的写法是分针角度 分钟数 × 6 秒数 × 0.1。时针一圈12小时每小时转动30度360 ÷ 12同时分钟的走动会让时针在一小时内缓慢前进所以精确角度 (小时数 % 12) × 30 分钟数 × 0.5。我在代码里用的是QTime类QTime time QTime::currentTime(); int hour time.hour(); int minute time.minute(); int second time.second(); // 角度计算 double hourAngle (hour % 12) * 30.0 minute * 0.5; double minuteAngle minute * 6.0 second * 0.1; double secondAngle second * 6.0;这里有个容易忽略的细节屏幕上y轴方向是向下的但QPainter的rotate()方法以顺时针方向为正这恰好和时钟指针的旋转方向一致。也就是说你不需要去反转坐标系直接用算出来的角度旋转就行。这是Qt里一个很贴心的设计。3.2 表盘外观实现外圆、刻度线和时间数字为了画出60条刻度线我先用一种简单的方式画一个圆作为底盘然后循环60次计算每条刻度线的起点和终点。如果用纯三角函数的办法代码会有些绕但利用坐标系旋转就简单得多先平移到圆心再旋转到对应角度沿着新的y轴方向画短线。不过实际我建议一种更省事的方式先旋转后画线。每根刻度之间的夹角是6度循环60次每次旋转6度然后从距离圆心的里侧位置画到外侧位置painter.save(); painter.rotate(0); for (int i 0; i 60; i) { QLineF line(QPointF(0, radius - 8), QPointF(0, radius)); // 每5分钟画一根长刻度 if (i % 5 0) { line QLineF(QPointF(0, radius - 15), QPointF(0, radius)); painter.setPen(QPen(Qt::black, 2)); } else { painter.setPen(QPen(Qt::black, 1)); } painter.drawLine(line); painter.rotate(6); } painter.restore();你注意我用了QLineF而不是QPointF加上直线。QLineF表达的是“从哪个点画到哪个点”在代码可读性上比drawLine(x1, y1, x2, y2)好很多尤其是大量绘制时不容易看混坐标顺序。画数字的时候就需要把坐标系恢复到没有旋转的状态。否则数字会跟着旋转12、3、6、9这几个关键数字会变成头朝下的怪样子。我的做法是提前算出12个数字的坐标然后逐个用drawText绘制painter.setPen(QPen(Qt::black, 1)); painter.setFont(QFont(Arial, fontPointSize)); for (int i 1; i 12; i) { double angle i * 30.0 * M_PI / 180.0; double x (radius - 20) * std::sin(angle); double y -(radius - 20) * std::cos(angle); QRectF textRect(x - 20, y - 20, 40, 40); painter.drawText(textRect, Qt::AlignCenter, QString::number(i)); }注意这里我用了std::sin和std::cos但如果你觉得每次都要算三角函数很麻烦也可以继续用旋转的方式先把painter旋转到对应角度然后画文本最后再旋转回来。两种方法都能用我个人比较喜欢显式计算坐标因为这样数字始终水平。3.3 三根指针的画法从圆心到终点的QLineF指针的绘制其实是最简单的部分。核心思路平移到圆心旋转到对应角度然后画一条从圆心附近指向外部的线段。指针的末端不是从圆心开始的我会让指针尾部稍微越过圆心一点点让视觉上更自然。我给三根指针定了一组参数见下表指针长度相对半径宽度像素颜色时针0.5R5深灰色分针0.7R3深灰色秒针0.8R1红色绘制时针的代码结构大概是painter.save(); painter.rotate(hourAngle); QLineF hourLine(QPointF(0, 8), QPointF(0, -radius * 0.5)); painter.setPen(QPen(QColor(40, 40, 40), 5, Qt::SolidLine, Qt::RoundCap)); painter.drawLine(hourLine); painter.restore();后面绘制分针和秒针完全同理。画完三根指针后我还会在圆心填充一个小圆点。它既是个装饰也能让三根指针的交点看起来更干净。你可以直接用Painter画一个实心圆颜色选表盘配色的对比色比如深色表盘配白色圆点。这个小细节能让时钟质感提升不少。4. 让指针真正走起来QTimer刷新节奏与画面防闪烁4.1 QTimer的工作方式与刷新间隔选择静态表盘画好了离真正的时钟还差一步让指针走动。这一步的核心是用QTimer定时触发update()。很多教程会直接跟你说“用QTimersetInterval(1000)”但不会解释为什么是1000。其实很简单QTimer是Qt事件循环驱动的定时器每到达指定时间间隔就会发出一个timeout()信号。对时钟来说秒针每秒动一下因此间隔1秒1000毫秒肯定没问题——这也是最节省资源的选择。但这里有一个隐藏坑QTimer并不是绝对精确的定时器。它的触发依赖事件循环如果主线程里正在执行比较耗时的操作timeout信号就有可能会被延误。对时钟这种应用来说延误一次只差几十毫秒肉眼根本看不出来所以无伤大雅。但如果未来你要做倒计时或者计时器就要考虑用更底层的定时机制甚至用QElapsedTimer做漂移校正。我第一版用的定时器长这样timer new QTimer(this); connect(timer, QTimer::timeout, this, [this]() { QTime now QTime::currentTime(); update(); }); timer-start(1000);然后跑起来发现一个明显的现象每秒更新一次秒针走一格但窗口在缩放、拖动的时候画面会闪烁。所以我就去查了防闪烁的方案。4.2 实测中遇到的残影、闪烁和CPU占用问题先说闪烁。Qt里Widgets的绘制默认分两步先擦除背景再绘制内容。擦除背景用底色填充绘制内容时背景已经被清掉了中间如果绘制不及时就会露出底色产生视觉上的闪烁感。实测里我的解决办法主要是两个步骤的组合给Widget开启Qt::WA_OpaquePaintEvent属性告诉Qt“我的绘制会覆盖整个窗口不用先帮我擦背景”。不设置背景画刷尽量把背景绘制也放进paintEvent里一起处理。我当时在构造函数里加了一句setAttribute(Qt::WA_OpaquePaintEvent, true);但请注意一个前提使用这个属性需要保证自己的paintEvent确实把整个Widget的区域都覆盖了。时钟的表盘如果是圆角区域的背景留白可能不太适合直接用这个属性。所以我在paintEvent里第一步就把整个Widget用白色背景填充了一遍确保满足不透明的要求。至于CPU占用你可能想不到一个每秒只触发一次绘制的Widget理论上CPU占用应该极其低。但实测中发现如果把窗口拖得很大QPainter绘制大量刻度线加上Antialiasing抗锯齿计算CPU还是会有一瞬间的波动。解决办法很简单不要把绘制频率调到更高1秒一次足够同时在不需要显示的时候及时停掉timer。很多人喜欢写QML动画让指针“平滑地扫过”但那种做法成本很高。我做的是普通桌面工具秒针一格一格跳其实更有机械感。如果你需要平滑的效果可以把timer间隔调成100毫秒但那样每秒要重绘10次CPU占用会明显上升不太划算。4.3 关于刷新策略的一个小心得脏区域重绘Qt的update()支持传一个子矩形表示“只需要重绘这个区域”。这个特性放在时钟上其实可以做优化如果只有秒针在动理论上只需要重绘秒针所在的小扇区就够了。但我实测之后发现对时钟这种小而轻的绘制任务来说做脏矩形优化的收益很低——因为表盘上刻度线、数字、指针加起来也就几十条绘制指令全部重绘的时间在毫秒级以下而区域裁剪还会带来额外的坐标换算成本。所以我不建议你在这个项目里过度优化。真正需要关注的反而是另一个事情update()是异步的调用之后即使你把所有数据都准备好了实际绘制也可能发生在几毫秒之后。如果你在一个很紧凑的循环里多次调用update()Qt会智能地合并重绘请求不会导致性能爆炸。这也是为什么定时器回调里只管调update()不用画草稿图的原因。5. 从“能画出来”到“可以上线”抗锯齿、窗口缩放与组件化封装5.1 抗锯齿和其他让画面干净的细节打开抗锯齿开关其实就一行代码painter.setRenderHint(QPainter::Antialiasing, true);但这行代码在时钟项目里的意义很大。你可以试着不加它然后放大窗口观察表盘的圆边线和指针的边缘会发现明显的锯齿。在时钟这种以圆形、斜线为主的图形里抗锯齿效果立竿见影直接关系到整体质感。除了抗锯齿还有两个容易忽略的细节画笔的端点样式。绘制指针时如果Pen的CapStyle默认是SquareCap指针根部会显得很生硬设成RoundCap后指针端部就变成平滑的圆头看起来更像真表。文本的清晰度。drawText在绘制小字号文字时如果抗锯齿开了反而可能让字变糊。实测中我发现把文字绘制放在最后一次调用、并且单独设置一次字体效果最好。不要在文本绘制上也叠加不必要的变换尽量保持水平。5.2 窗口尺寸变化时怎么保证时钟不跑偏时钟组件嵌在布局里或者单独弹窗窗口大小都是用户说了算。所以绘制代码里绝对不能写死任何半径、圆心之类的常量。我的做法是在paintEvent里动态获取当前Widget的宽高然后取较短边作为基准半径。圆心放在正中央半径再乘以一个比例系数留出边距。这样无论窗口被拉得多窄多宽表盘都能始终居中并保持圆形。int side qMin(width(), height()); double radius side / 2.0 - 10.0; QPointF center(width() / 2.0, height() / 2.0);有些项目会用到painter.scale()配合固定基准尺寸来画我也试过但发现直接动态计算半径更简单不容易出现缩放比例不均匀导致的“椭圆盘”。无论哪种方式关键是不要在paintEvent里留下任何和当前尺寸无关的“魔法数字”。5.3 把时钟封装成可复用组件留出定制接口最后一步是把这段逻辑从Demo代码提升成可以复用的组件。我建了一个类叫ClockWidget继承自QWidget对外提供几个简单的定制接口设置背景色、表盘颜色、指针颜色、是否显示秒针等。这些接口的核心就是把颜色、宽度、是否绘制的标志存成成员变量然后在paintEvent里读取它们。从代码结构上看这个类的核心骨架大概是class ClockWidget : public QWidget { Q_OBJECT public: explicit ClockWidget(QWidget *parent nullptr); void setBackgroundColor(const QColor color); void setHourHandColor(const QColor color); void setMinuteHandColor(const QColor color); void setSecondHandColor(const QColor color); void setShowSecondHand(bool show); protected: void paintEvent(QPaintEvent *event) override; private: QColor m_backgroundColor; QColor m_hourHandColor; QColor m_minuteHandColor; QColor m_secondHandColor; bool m_showSecondHand; };封装的好处过了几天就体会到了。另一个工具模块也需要一个时钟但配色要求完全不同还要隐藏秒针。我直接new一个ClockWidget调两个set函数就搞定了没有复制粘贴第二遍代码。如果在开发中还遇到窗口闪烁或者形状裁切的问题建议检查几个关键属性的组合是否设置了WA_OpaquePaintEvent、是否在paintEvent里先清除画布、QPainter的save/restore是否配对。画布残留、背景闪烁、文字乱转九成以上都和这三件事有关。最后再分享一个做自绘控件的小技巧如果你在测试各种颜色搭配时不想次次重新编译可以把颜色值暴露成可通过外部文件加载的配置项或者给几个预设主题。这样调试起来会轻松很多未来如果有人问你“表盘颜色能改成深色吗”你只需要改一行配置而不是打开绘图代码逐个找绘制语句。时钟这个小功能写起来不多但把组件化、定制化这块准备好以后接其他自绘需求会快很多。