1. 機能紹介
今回の記事で実装する機能は以下の通りです。
Qt を使用してダッシュボードを描画し、現在の温度を表示し、スケールを描画し、数値を描画し、温度ポインターを描画します。ダッシュボードは全体を通して QPainter を使用して描画されますが、QPainter は Qt フレームワークの非常に重要なクラスであり、描画機能の実現と切り離すことはできません。Qt を使用して高品質の描画や UI デザインを行いたい場合は、QPainter の使い方をマスターする必要があります。
QPainter の概要:
QPainterはQtでグラフィックを描画するためのクラスで、幾何学図形や文字、絵などを描くことができる様々な描画機能を提供します。QPainter によって描画されたグラフィックは、QWidget とそのサブクラスのPaintEvent() イベントで使用でき、また QPixmap などの他のオブジェクトでも描画できます。
QPainter の一般的な使用プロセスは次のとおりです。
1. 创建一个QPainter对象，需要传入一个绘制设备，例如QWidget或QPixmap。
2. 用QPainter的各种绘制函数来绘制几何图形、文本、图片等等。
3. 在绘制完成后，将画笔和画刷等状态还原到初始状态。
4. 在必要时释放QPainter对象。
温度ダッシュボードの最終的な効果 - デジタル スケール:
数値スケール効果なし:
2. コード設計プロセス
[1] QWidget クラスを継承したカスタム コントロール my_DrawDashboard を定義します。
class my_DrawDashboard : public QWidget
{
Q_OBJECT
public:
explicit my_DrawDashboard(QWidget *parent = nullptr);
~my_DrawDashboard();
protected:
void paintEvent(QPaintEvent *event) override;
private:
int m_temperature;
signals:
void temperatureChanged(int temperature);
public slots:
void setTemperature(int temperature);
};
[2] my_DrawDashboardのコンストラクター内で温度やその他の属性値を初期化する
MyWidget::MyWidget(QWidget *parent)
: QWidget(parent)
{
m_temperature = 0;
setMinimumSize(200, 200);
setMaximumSize(200, 200);
}
[3] my_DrawDashboardにpaintEvent()関数を実装してダッシュボードを描画する
void my_DrawDashboard::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event)
// 定义画布和画笔
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
int w = width();
int h = height();
int radius = qMin(w, h) / 2;
QPoint center(w / 2, h / 2);
QFont font("Arial", radius * 0.1, QFont::Bold);
painter.setFont(font);
// 绘制背景圆
painter.setPen(Qt::NoPen);
painter.setBrush(QColor("#EEEEEE"));
painter.drawEllipse(center, radius, radius);
// 绘制刻度
painter.setPen(QPen(Qt::black, radius * 0.02));
for (int i = 0; i <= 10; ++i) {
int angle = i * 30;
painter.drawLine(center + QPoint(radius * cos(angle * M_PI / 180.0), radius * sin(angle * M_PI / 180.0)),
center + QPoint((radius - radius * 0.15) * cos(angle * M_PI / 180.0),
(radius - radius * 0.15) * sin(angle * M_PI / 180.0)));
}
// 绘制温度指针
painter.setPen(QPen(Qt::red, radius * 0.05));
painter.setBrush(Qt::red);
painter.save();
int angle = -135 + m_temperature * 27 / 5;
painter.rotate(angle);
QPointF pointer[3] = { center + QPoint(radius * 0.05, 0),
center + QPoint(-radius * 0.05, 0),
center + QPoint(0, -radius * 0.9) };
painter.drawConvexPolygon(pointer, 3);
painter.restore();
// 绘制当前温度值
painter.setPen(Qt::black);
painter.drawText(QRectF(center.x() - radius * 0.5, center.y() + radius * 0.2, radius, radius), Qt::AlignCenter,
QString("%1℃").arg(m_temperature));
}
[4] my_DrawDashboard に setTemperature() 関数を提供して、現在の温度を更新し、temperatureChanged シグナルをトリガーします。
void my_DrawDashboard::setTemperature(int temperature)
{
if (m_temperature == temperature)
return;
m_temperature = temperature;
update();
emit temperatureChanged(m_temperature);
}
[5] QTimer を使用して温度変化をシミュレートし、ダッシュボードの表示をリアルタイムで更新します
// 在主窗口中创建my_DrawDashboard控件
my_DrawDashboard *widget = new my_DrawDashboard(this);
// 创建QTimer对象并绑定温度变化槽函数
QTimer *timer = new QTimer(this);
connect(timer, &QTimer::timeout, this, [&widget](){
int temperature = qrand() % 31 - 10;
widget->setTemperature(temperature);
});
// 启动定时器
timer->start(1000);
上記のコードでは、my_DrawDashboard コントロールがメイン ウィンドウに作成され、QTimer オブジェクトを使用して温度変化をシミュレートします。1 秒ごとにランダムな温度値を生成し、my_DrawDashboard の setTemperature() 関数を呼び出して現在の温度を更新し、ダッシュボードの表示をリアルタイムで更新します。
3. プロジェクトを完了する
【1】my_DrawDashboard.cpp
#include "my_drawdashboard.h"
my_DrawDashboard::my_DrawDashboard(QWidget *parent)
: QWidget(parent)
{
m_temperature = 0;
//setMinimumSize(100, 100);
// setMaximumSize(100, 100);
}
void my_DrawDashboard::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event)
// 定义画布和画笔
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
int w = width();
int h = height();
int radius = qMin(w, h) / 2;
QPoint center(w / 2, h / 2);
QFont font("Arial", radius * 0.1, QFont::Bold);
painter.setFont(font);
// 绘制背景圆
painter.setPen(Qt::NoPen);
painter.setBrush(QColor("#EEEEEE"));
painter.drawEllipse(center, radius, radius);
// 绘制刻度
painter.setPen(QPen(Qt::black, radius * 0.02));
for (int i = 0; i <= 10; ++i) {
int angle = i * 30;
painter.drawLine(center + QPoint(radius * cos(angle * M_PI / 180.0), radius * sin(angle * M_PI / 180.0)),
center + QPoint((radius - radius * 0.15) * cos(angle * M_PI / 180.0),
(radius - radius * 0.15) * sin(angle * M_PI / 180.0)));
}
// 绘制温度指针
painter.setPen(QPen(Qt::red, radius * 0.05));
painter.setBrush(Qt::red);
painter.save();
int angle = -135 + m_temperature * 27 / 5;
//painter.rotate(60);
QPointF pointer[3] = { center + QPoint(radius * 0.05, 0),
center + QPoint(-radius * 0.05, 0),
center + QPoint(0, -radius * 0.9) };
painter.drawConvexPolygon(pointer, 3);
painter.restore();
// 绘制当前温度值
painter.setPen(Qt::black);
painter.drawText(QRectF(center.x() - radius * 0.5, center.y() + radius * 0.2, radius, radius), Qt::AlignCenter,
QString("%1℃").arg(m_temperature));
}
void my_DrawDashboard::setTemperature(int temperature)
{
if (m_temperature == temperature)
return;
m_temperature = temperature;
update();
emit temperatureChanged(m_temperature);
}
【2】my_DrawDashboard.h
#ifndef MY_DRAWDASHBOARD_H
#define MY_DRAWDASHBOARD_H
#include <QWidget>
#include <QPainter>
#include <qmath.h>
class my_DrawDashboard : public QWidget
{
Q_OBJECT
public:
explicit my_DrawDashboard(QWidget *parent = nullptr);
//~my_DrawDashboard();
protected:
void paintEvent(QPaintEvent *event) override;
private:
int m_temperature=20;
signals:
void temperatureChanged(int temperature);
public slots:
void setTemperature(int temperature);
};
#endif // MY_DRAWDASHBOARD_H
【3】UIインターフェースのデザイン
メイン ウィンドウで QWidget コントロールをドラッグし、my_DrawDashboard入力するようにプロモートします。