Qt自定义控件之仪表盘1--简单的贴图仪表盘

0、前言

  学程序首先要输出hell world，学电子要先来个流水灯。学Qt，那就必须先来个自定义控件，如有人问我从哪一个下手，我推荐仪表盘，可简可繁，从低配到高配齐全，可入门也可进阶。

1、仪表盘解析

以常见的、传统的仪表盘为例，分解仪表盘的元素，主要有边框、刻度、数字、指针（或数字值、代替指针或两者都有）。边框就是背景图，能够动态的绘出也能够用一个图片贴图，指针能够绘出也能够用图片旋转来实现。其余的有刻度、数字、以及随着数值变化而引发的特效。

2、贴图的仪表盘

贴图仪表盘比较简单。实现方式：先找好2张图，一张背景图，带有刻度数字指示的。一张指针图。程序运行的时候旋转指针就能够实现仪表盘动起来的效果。虽然方式很简陋，但在某些场合具备奇特的效果，好比嵌入式场合，大名鼎鼎的迪文工业屏，都是用着这种方式，使用者基本不须要任何编程，只导入两张漂亮的美工图，而后动态控制指针的旋转角度，就能够实现漂亮的仪表盘。

第一步，找资源：

第二步，添加资源文件到qt：

第三步：写dial类，使用painter重绘表盘和指针

#ifndef DIAL_H
#define DIAL_H

#include <QWidget>

class Dial : public QWidget
{
    Q_OBJECT
public:
    explicit Dial(QWidget *parent = nullptr);

private:
    int value;
    void paintEvent(QPaintEvent *event);

signals:

public slots:
    void valueChanged(int value);
};

#endif // DIAL_H

#include "dial.h"
#include<QPainter>
#include<QDebug>

Dial::Dial(QWidget *parent) : QWidget(parent)
{

}

void Dial::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    QPainter painter(this);
    painter.save();
    painter.setRenderHint(QPainter::SmoothPixmapTransform, true); //平滑像素图

    painter.translate(this->width()/2, this->height()/2); // 原点定位
    QPixmap img = QPixmap(":/image/background.png");
    painter.drawPixmap(-img.width()/2, -img.height()/2, img); // 背景图

    QPixmap needle;
    needle.load(":/image/needle.png");
    painter.rotate(value-135);
    painter.drawPixmap(-needle.width()/2, -needle.height(), needle); // 绘制指针，默认图片针尖在上坐标(0,0)，因此移动使针尾坐标为0

    painter.rotate(-(value-135)); // 恢复旋转，绘制蒙版层
    QPixmap overlay = QPixmap(":/image/overlay.png");
    painter.drawPixmap(-img.width()/2 + 25, -img.height()/2 + 25, overlay);

    painter.restore();
}

void Dial::valueChanged(int value)
{
    this->value = 2.7*value;
    update();
}

第四步：调用dial类，把写好的类当作一个控件来使用便可，链接dial的槽函数便可控制表盘。

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    this->setStyleSheet("QWidget { background-color:rgb(84, 84, 84); }");
    QVBoxLayout *layout = new QVBoxLayout(this);

    slider = new QSlider(Qt::Orientation::Horizontal,this);
    dial = new Dial(this);

    layout->addWidget(dial);
    layout->addWidget(slider);

    connect(slider, &QSlider::valueChanged, dial, &Dial::valueChanged);
}

三、实现效果

 

动效图：

四、参考资料

qt 原厂demo ，本文只是使用了其资源文件，省得本身找图片。

欢迎界面搜索dial，自带UI Compontents：Dial Control Example。

 

---

 

 尊重技术文章，转载请注明！

Qt自定义控件之仪表盘1--简单的贴图仪表盘

http://www.javashuo.com/article/p-xqmejdbr-ke.html