Qt开发案例：模拟时钟窗口示例|附源码

模拟时钟窗口示例显示了如何绘制自定义窗口的内容。

Qt组件推荐：

• QtitanRibbon| 下载试用: 遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件，致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
• QtitanChart | 下载试用 :是一个C ++库，代表一组控件，这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。并且支持所有主要的桌面。
• QtitanNavigation | 下载试用 :模拟Microsoft Dynamics CRM-2016/Office 365导航界面和一组控件改善Qt.C ++应用程序用户体验的QtitanNavigation组件。

模拟时钟窗口示例

模拟时钟窗口示例显示了如何绘制自定义窗口的内容。

时钟窗口示例

此示例演示了如何使用QPainter的变换和缩放功能使绘图更容易。

AnalogClockWindow类定义

AnalogClockWindow类提供了一个带有时针和分针的时钟，每隔几秒钟就会自动更新一次。我们利用光栅窗口示例中的RasterWindow，重新实现渲染函数来绘制钟面。

class AnalogClockWindow : public RasterWindow{public:    AnalogClockWindow();protected:    void timerEvent(QTimerEvent *) override;    void render(QPainter *p) override;private:    int m_timerId;};

AnalogClock类的实现

AnalogClockWindow::AnalogClockWindow(){    setTitle("Analog Clock");    resize(200, 200);    m_timerId = startTimer(1000);}

我们在窗口上设置标题，并将其大小调整为合理的大小。然后，我们启动一个计时器，该计时器将用于每秒重绘时钟。

void AnalogClockWindow::timerEvent(QTimerEvent *event){    if (event->timerId() == m_timerId)        renderLater();}

由于调用startTimer，因此每秒都会调用timerEvent函数。利用基类中的便利，我们计划要重新绘制的窗口。

由于在这种情况下我们只有一个活动计时器，因此严格不要求检查计时器的ID，但这样做是一种很好的做法。

void AnalogClockWindow::render(QPainter *p){    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);

在我们设置画家并绘制时钟之前，我们首先定义两个QPoints列表和两个QColors，它们将用于时针和分针。分针的颜色有一个191的阿尔法分量，意味着它有75%的不透明性。

  p->setRenderHint(QPainter::Antialiasing);

我们使用QPainter :: Antialiasing调用QPainter :: setRenderHint（）以打开抗锯齿。这使得对角线的绘制更加平滑。

 p->translate(width() / 2, height() / 2);    int side = qMin(width(), height());    p->scale(side / 200.0, side / 200.0);

平移将原点移动到窗口的中心，而缩放操作则确保下面的绘图操作被缩放到适合窗口内。我们使用一个缩放因子，让我们使用-100和100之间的x和y坐标，并确保这些坐标位于窗口最短边的长度内。

为了使我们的代码更简单，我们将绘制一个固定大小的钟面，将其定位和缩放，使其位于窗口的中心。

我们还确定了窗口最短边的长度，这样我们就可以把钟面放在窗口内。

画家负责处理渲染过程中的所有转换，并确保一切都能正确绘制。让画家处理变换通常比进行手工计算更容易。

我们首先使用公式绘制时针，该公式将坐标系逆时针旋转由当前小时和分钟确定的度数。这意味着将显示指针顺时针旋转所需的量。

  p->setPen(Qt::NoPen);    p->setBrush(hourColor);

我们将笔设置为Qt :: NoPen是因为我们不需要任何轮廓，并且我们使用具有适合显示小时数的颜色的实心笔刷。填充多边形和其他几何形状时使用画笔。

QTime time = QTime::currentTime();    p->save();    p->rotate(30.0 * ((time.hour() + time.minute() / 60.0)));    p->drawConvexPolygon(hourHand, 3);    p->restore();

我们要保存和恢复旋转前后的变换矩阵，因为我们希望放置分针而不必考虑任何先前的旋转。

    p->setPen(hourColor);    for (int i = 0; i < 12; ++i) {        p->drawLine(88, 0, 96, 0);        p->rotate(30.0);    }

我们每小时在时钟的边缘绘制一个标记。我们绘制每个标记，然后旋转坐标系，以便画家准备下一个标记。

p->setPen(Qt::NoPen);    p->setBrush(minuteColor);    p->save();    p->rotate(6.0 * (time.minute() + time.second() / 60.0));    p->drawConvexPolygon(minuteHand, 3);    p->restore();

分针的旋转方式与时针的旋转方式相似。

 p->setPen(minuteColor);    for (int j = 0; j < 60; ++j) {        if ((j % 5) != 0)            p->drawLine(92, 0, 96, 0);        p->rotate(6.0);    }

同样，我们在时钟的边缘绘制标记，但这一次表示分钟。我们跳过5的倍数，以避免在小时标记上方绘制分钟标记。

====================================================

想要了解或购买Qt正版授权的朋友，欢迎咨询官方客服

Qt技术交流群现已开通，QQ搜索群 “765444821”或者扫描下方二维码即可加入

标签：