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

界面开发小八哥

于 2023-11-08 09:53:57 发布

阅读量298

点赞数 3

文章标签： qt 开发语言 C++ UI开发嵌入式界面开发

本文链接：https://blog.csdn.net/AABBbaby/article/details/134281959

版权

Qt 是目前最先进、最完整的跨平台C++开发工具。它不仅完全实现了一次编写，所有平台无差别运行，更提供了几乎所有开发过程中需要用到的工具。如今，Qt已被运用于超过70个行业、数千家企业，支持数百万设备及应用。

点击获取Qt Widget组件下载(Q技术交流：166830288）

模拟时钟示例展示了如何绘制自定义小部件的内容，这个示例还演示了如何使用QPainter的转换和缩放特性来更轻松地绘制自定义小部件。

Qt Widget中文示例指南图集

模拟时钟示例的屏幕截图

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负责在绘制事件期间进行的所有转换，并确保所有内容都被正确绘制，让绘图器处理转换通常比仅仅为了绘制自定义小部件的内容而执行手动计算更容易。

Qt Widget中文示例指南图集

我们先画时针，使用一个公式，将坐标系逆时针旋转数度，由当前的小时和分钟决定，这意味着手将显示顺时针旋转所需的量。

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的倍数，以避免在小时标记上画分钟标记。

Qt Widget组件推荐

QtitanRibbon - Ribbon UI组件：是一款遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件，QtitanRibbon致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
QtitanChart - Qt类图表组件：是一个C ++库，代表一组控件，这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。
QtitanDataGrid - Qt网格组件：提供了一套完整的标准 QTableView 函数和传统组件无法实现的独特功能。使您能够将不同来源的各类数据加载到一个快速、灵活且功能强大的可编辑网格中，支持排序、分组、报告、创建带状列、拖放按钮和许多其他方便的功能。
QtitanDocking：允许您像 Visual Studio 一样为您的伟大应用程序配备可停靠面板和可停靠工具栏。黑色、白色、蓝色调色板完全支持 Visual Studio 2019 主题！