「Qt Widget中文示例指南」如何模拟一个时钟？

Qt是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写所有平台无差别运行更提供了几乎所有开发过程中需要用到的工具。如今Qt已被运用于超过70个行业、数千家企业支持数百万设备及应用。模拟时钟示例展示了如何绘制自定义小部件的内容这个示例还演示了如何使用QPainter的转换和缩放特性来更轻松地绘制自定义小部件。模拟时钟示例的屏幕截图AnalogClock类定义AnalogClock类提供了一个带有时针和分针的时钟小部件每隔几秒钟自动更新一次我们继承了QWidget并重新实现了标准的paintEvent()函数来绘制钟面class AnalogClock : public QWidget { Q_OBJECT public: AnalogClock(QWidget *parent nullptr); protected: void paintEvent(QPaintEvent *event) override; };AnalogClock类实现AnalogClock::AnalogClock(QWidget *parent) : QWidget(parent) { QTimer *timer new QTimer(this); connect(timer, QTimer::timeout, this, QOverload::of(AnalogClock::update)); timer-start(1000); setWindowTitle(tr(Analog Clock)); resize(200, 200); }在构造小部件时我们设置一个1秒计时器来跟踪当前时间并将其连接到标准update()插槽以便在计时器发出timeout()信号时更新时钟面。最后我们调整小部件的大小使其显示在一个合理的大小。void AnalogClock::paintEvent(QPaintEvent *) { static const QPoint hourHand[3] { QPoint(7, 8), QPoint(-7, 8), QPoint(0, -40) }; static const QPoint minuteHand[3] { QPoint(7, 8), QPoint(-7, 8), QPoint(0, -70) }; QColor hourColor(127, 0, 127); QColor minuteColor(0, 127, 127, 191); int side qMin(width(), height());每当需要更新小部件的内容时就调用paintEvent()函数。这在小部件首次显示时发生在它被覆盖然后暴露时发生但在小部件的update()槽被调用时也会执行。由于我们将计时器的timeout()信号连接到这个槽因此它将至少每五秒被调用一次。在我们设置painter和绘制时钟之前首先定义两个QPoints和两个QColors列表它们将用于时针和分针。分针的颜色alpha值为191这意味着它75%是不透明的。我们还确定了小部件最短边的长度以便可以将钟面放入小部件中在开始绘图之前确定当前时间也很有用。QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing); painter.translate(width() / 2, height() / 2); painter.scale(side / 200.0, side / 200.0);自定义小部件的内容是用QPainter绘制的Painters可以用来在任何QPaintDevice上绘画但它们通常与小部件一起使用因此我们将小部件实例传递给painter的构造函数。我们用QPainter::Antialiasing调用QPainter::setRenderHint()来打开反锯齿这使得绘制对角线更加平滑。平移将原点移动到小部件的中心缩放操作确保以下绘图操作被缩放来适应小部件。我们使用一个比例因子让使用-100到100之间的x和y坐标这确保了它们位于小部件最短边的长度范围内。为了使代码更简单我们将绘制一个固定大小的钟面并对其进行定位和缩放使其位于小部件的中心。painter负责在绘制事件期间进行的所有转换并确保所有内容都被正确绘制让绘图器处理转换通常比仅仅为了绘制自定义小部件的内容而执行手动计算更容易。我们先画时针使用一个公式将坐标系逆时针旋转数度由当前的小时和分钟决定这意味着手将显示顺时针旋转所需的量。painter.setPen(Qt::NoPen); painter.setBrush(hourColor);我们将pen设置为Qt::NoPen因为不想要任何轮廓并且使用适合显示小时数的颜色固体画笔笔刷在填充多边形和其他几何形状时使用。painter.save(); painter.rotate(30.0 * ((time.hour() time.minute() / 60.0))); painter.drawConvexPolygon(hourHand, 3); painter.restore();我们保存并恢复旋转前后的变换矩阵因为想要放置分针而不必考虑之前的任何旋转。painter.setPen(hourColor); for (int i 0; i 12; i) { painter.drawLine(88, 0, 96, 0); painter.rotate(30.0); }我们在时钟的边缘画上标记代表每小时。绘制每个标记然后旋转坐标系统以便painter准备好下一个。painter.setPen(Qt::NoPen); painter.setBrush(minuteColor); painter.save(); painter.rotate(6.0 * (time.minute() time.second() / 60.0)); painter.drawConvexPolygon(minuteHand, 3); painter.restore();分针的旋转方式与时针相似。painter.setPen(minuteColor); for (int j 0; j 60; j) { if ((j % 5) ! 0) painter.drawLine(92, 0, 96, 0); painter.rotate(6.0); } }同样我们在时钟的边缘画上标记但这次是用来表示分钟。跳过5的倍数以避免在小时标记上画分钟标记。