qt仪表盘

QT 仪表盘制作
千次阅读
2018-05-03 20:52:25
QT主要提供三种图形界面：Widget,Graphics,QML
- Widget：适用于大量数据交互
- Graphics：适用于场景中很多图元的
- QML：解释型，属于轻量级界面，不适合大量数据交互，偏向视觉
这里提供的界面设计思想基于Graphics框架，采用SVG进行设计
这里参考了一款飞行的开源软件https://sourceforge.net/projects/qfi/

思路：
1. 使用InKscape参考开源软件的仪表设计界面进行仪表零部件划设：背景、表盘、蒙版（基础使用方法参考：https://blog.csdn.net/uriel_chiang/article/details/80186267）
2. 使用QT中的类QGraphicsSvgItem加载设计出来的仪表零部件，设置其位置、大小（QT 工程文件 +svg模块）（使用方法参考：https://blog.csdn.net/uriel_chiang/article/details/80186546）
3. 使用QGraphicsScene放置所有Item，设置其层叠关系
4. 使用QGraphicsView观看（显示）部分QGraphicsScene
5. 动态移动、旋转表盘，动态生成QGraphicsTextItem文字显示数值
注意：
1. 背景移动和蒙版如果需要移动效果的话，建议将其拆分为n个更小的零部件
2. 背景移动和蒙版如果需要移动逐渐改变颜色效果，建议将一个零部件拆分为两个，一个颜色（不需要时隐藏），需要时，设定其倍数覆盖在另一个颜色之上
更多相关内容
QTmeter_qt仪表盘_QT仪表_QT简单仪表盘_qt虚拟仪表_QT仪表_
2021-09-30 13:18:31

基于Qt做的一个虚拟仪表盘的实例，可以作为参考

收起
QT仪表盘实例(项目实战)
2018-05-15 11:31:05

qt下仪表盘实例，源代码给大家参考学习使用可用于实际工程中。 qt下仪表盘实例，源代码给大家参考学习使用可用于实际工程中。 qt下仪表盘实例，源代码给大家参考学习使用可用于实际工程中。

收起
QT仪表盘源码
2017-03-17 23:07:28

QT仪表盘源码

收起
QT 仪表盘 Widget 源码
2017-03-01 20:49:52

QT汽车仪表盘控件源码。已测，正常运行，效率比较高。

收起
基于QT的仪表盘
2019-06-06 10:42:42

基于QT的仪表盘，具有动态延时变化的效果，跟游戏里面开车踩油门的过程一样的效果。

收起
Qt自定义汽车仪表盘控件
2019-10-28 14:36:26

qt绘制的汽车仪表盘，表盘还是比较漂亮的，使用Qt环形渐变进行表盘外围的颜色值置，简单Demo展示

收起
instrument_panel_qt仪表盘_QT仪表_movie2h2_QT_Qt工业_
2021-10-01 11:01:44

显示仪表盘，工业仪表，汽车仪表显示，qt开发

收起
qt 仪表盘程序
2014-04-02 14:45:12

用qt c++编写的仪表盘和指针旋转程序，指定指针中心和旋转范围以及旋转点就ok了

收起
Qt 自定义仪表盘.zip
2021-08-22 15:40:50

参照飞扬青云编写的自定义仪表盘代码

收起

自定义
Qt自定义控件实现简易仪表盘
2020-12-23 02:54:20

本文实例为大家分享了Qt自定义控件实现简易仪表盘的具体代码，供大家参考，具体内容如下 Qt自定义控件12：简易仪表盘（根据liudianwu大神的界面自己写的代码，建议去学习刘大神，会受益良多的）先看效果图：思路...

收起

Qt控件：仪表盘

千次阅读 2020-08-29 20:32:00

1. 预览图 2. 代码头文件 #ifndef GAUGEPANEL_H #define GAUGEPANEL_H #include <QWidget> #include <QPropertyAnimation>...QtMath>...#if (QT_VERSION < QT_VERSION_CHECK(5,7,0)) ...QtDesigner/Q

1. 预览图

在这里插入图片描述

2. 代码

头文件

#ifndef GAUGEPANEL_H
#define GAUGEPANEL_H

#include <QWidget>
#include <QPropertyAnimation>
#include <QtMath>
#include <QPainter>

#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif

class QDESIGNER_WIDGET_EXPORT GaugePanel : public QWidget
#else
class GaugePanel : public QWidget
#endif

{
Q_OBJECT
Q_PROPERTY(double value READ getValue WRITE setValue)
Q_PROPERTY(int hShearValue READ getHShearValue WRITE setHShearValue)
Q_PROPERTY(int vShearValue READ getVShearValue WRITE setVShearValue)
Q_PROPERTY(double radiusInner READ getRadiusInner WRITE setRadiusInner)
Q_PROPERTY(double radiusOuter READ getRadiusOuter WRITE setRadiusOuter)
Q_PROPERTY(double radiusHalo READ getRadiusHalo WRITE setRadiusHalo)
Q_PROPERTY(QColor colorOuterFrame READ getColorOuterFrame WRITE setColorOuterFrame)
Q_PROPERTY(QColor colorInnerStart READ getColorInnerStart WRITE setColorInnerStart)
Q_PROPERTY(QColor colorInnerEnd READ getColorInnerEnd WRITE setColorInnerEnd)
Q_PROPERTY(QColor colorOuterStart READ getColorOuterStart WRITE setColorOuterStart)
Q_PROPERTY(QColor colorOuterEnd READ getColorOuterEnd WRITE setColorOuterEnd)
Q_PROPERTY(QColor colorHaloStart READ getColorHaloStart WRITE setColorHaloStart)
Q_PROPERTY(QColor colorHaloEnd READ getColorHaloEnd WRITE setColorHaloEnd)

public:
explicit GaugePanel(QWidget *parent = nullptr);
~GaugePanel();

protected:
void paintEvent(QPaintEvent *);

private:
void drawOuterGradient(QPainter *painter);
void drawInnerGradient(QPainter *painter);
void drawOuterHalo(QPainter *painter);
void drawScale(QPainter *painter);
void drawScaleNum(QPainter *painter);
void drawPointer(QPainter *painter);
void drawPointerSector(QPainter *painter);
void drawValue(QPainter *painter);
void drawUnit(QPainter *painter);

private:
double value;                   //目标值
int hShearValue, vShearValue;//H、V扭曲值
double radiusInner;             //渐变内圈内半径
double radiusOuter;             //渐变外圈内半径
double radiusHalo;              //光晕内半径
QColor colorOuterFrame;         //表盘外边框颜色
QColor colorInnerStart;         //渐变内圈起始颜色
QColor colorInnerEnd;           //渐变内圈结束颜色
QColor colorOuterStart;         //渐变外圈起始颜色
QColor colorOuterEnd;           //渐变外圈结束颜色
QColor colorHaloStart;          //光晕起始颜色
QColor colorHaloEnd;            //光晕结束颜色

QPropertyAnimation *hShearAnimation, *vShearAnimation;

public:
double getValue()               const;
int    getHShearValue()         const;
int    getVShearValue()         const;
double getRadiusInner()         const;
double getRadiusOuter()         const;
double getRadiusHalo()          const;
QColor getColorOuterFrame()     const;
QColor getColorInnerStart()     const;
QColor getColorInnerEnd()       const;
QColor getColorOuterStart()     const;
QColor getColorOuterEnd()       const;
QColor getColorHaloStart()      const;
QColor getColorHaloEnd()        const;

void setValue(int value);
void setValue(double value);
void setHShearValue(int value);
void setVShearValue(int value);

//表盘外边框颜色
void setColorOuterFrame(QColor color);

//内层渐变区半径
void setRadiusInner(int radius);
void setRadiusInner(double radius);

//外层渐变区半径
void setRadiusOuter(int radius);
void setRadiusOuter(double radius);

//外层光晕区半径
void setRadiusHalo(int radius);
void setRadiusHalo(double radius);

//内层渐变颜色
void setColorInnerStart(QColor color);
void setColorInnerEnd(QColor color);

//外层渐变颜色
void setColorOuterStart(QColor color);
void setColorOuterEnd(QColor color);

//光晕颜色
void setColorHaloStart(QColor color);
void setColorHaloEnd(QColor color);

void startShearAnimal(int duration, int hShearValue, int vShearValue);

public slots:
void updateValue(double value);

Q_SIGNALS:
    void valueChanged(qreal value);
};

#endif // GaugePanel_H

源文件

#include "gaugepanel.h"

GaugePanel::GaugePanel(QWidget *parent) : QWidget(parent)
{
    value = hShearValue = vShearValue = 0.0;
    radiusInner = 65.0;
    radiusOuter = 76.25;
    radiusHalo = 87.5;
    colorOuterFrame = QColor(50, 154, 255, 250);
    colorInnerStart = QColor(50, 154, 255, 180);
    colorInnerEnd = QColor(50, 154, 255, 70);
    colorOuterStart = QColor(50, 154, 255, 150);
    colorOuterEnd = QColor(50, 154, 255, 200);
    colorHaloStart = QColor(100, 180, 255, 80);
    colorHaloEnd = QColor(30, 80, 120, 20);

    hShearAnimation = new QPropertyAnimation(this, "hShearValue");
    vShearAnimation = new QPropertyAnimation(this, "vShearValue");
}

GaugePanel::~GaugePanel()
{
    hShearAnimation->stop();
    vShearAnimation->stop();
    delete hShearAnimation;
    delete vShearAnimation;
}

void GaugePanel::paintEvent(QPaintEvent *)
{
    int width = this->width();
    int height = this->height();
    int side = qMin(width, height);

    //绘制准备工作,启用反锯齿,平移坐标轴中心,等比例缩放
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
    painter.translate(width / 2, height / 2);
    painter.scale(side / 215.0, side / 215.0);

    painter.shear(double(hShearValue/100.0f), double(vShearValue/100.0f));

    //内层渐变
    drawInnerGradient(&painter);

    //外层渐变
    drawOuterGradient(&painter);

    //外层光晕
    drawOuterHalo(&painter);

    //刻度线
    drawScale(&painter);

    //刻度值
    drawScaleNum(&painter);

    //绘制指针
    drawPointer(&painter);

    //绘制指针扇形
    drawPointerSector(&painter);

    //绘制值
    drawValue(&painter);

    //绘制单位
    drawUnit(&painter);
}

void GaugePanel::drawOuterGradient(QPainter *painter)
{
    if(radiusHalo <= radiusOuter)
        return;

    painter->save();

    QRectF rectangle(0-radiusHalo, 0-radiusHalo, radiusHalo*2, radiusHalo*2);
    QPen framePen(colorOuterFrame);
    framePen.setWidthF(1.5f);
    painter->setPen(framePen);
    painter->drawEllipse(rectangle);

    painter->setPen(Qt::NoPen);

    QPainterPath smallCircle;
    QPainterPath bigCircle;

    float radius = radiusOuter;
    smallCircle.addEllipse(-radius, -radius, radius * 2, radius * 2);
    radius += (radiusHalo - radiusOuter);
    bigCircle.addEllipse(-radius, -radius, radius * 2, radius * 2);

    //大圆抛去小圆部分
    QPainterPath gradientPath = bigCircle - smallCircle;
    QRadialGradient gradient(0, 0, radius, 0, 0);
    //gradient.setSpread(QGradient::ReflectSpread);

    gradient.setColorAt(0.85, colorOuterStart);
    gradient.setColorAt(0.98, colorOuterEnd);
    painter->setBrush(gradient);
    painter->drawPath(gradientPath);

    painter->restore();
}

void GaugePanel::drawInnerGradient(QPainter *painter)
{
    if(radiusOuter <= radiusInner)
        return;

    painter->save();
    painter->setPen(Qt::NoPen);

    QPainterPath smallCircle;
    QPainterPath bigCircle;

    float radius = radiusInner;
    smallCircle.addEllipse(-radius, -radius, radius * 2, radius * 2);
    radius += (radiusOuter - radiusInner);
    bigCircle.addEllipse(-radius, -radius, radius * 2, radius * 2);

    //大圆抛去小圆部分
    QPainterPath gradientPath = bigCircle - smallCircle;
    QRadialGradient gradient(0, 0, radius, 0, 0);
    //gradient.setSpread(QGradient::ReflectSpread);

    gradient.setColorAt(0.7, colorInnerStart);
    gradient.setColorAt(1, colorInnerEnd);
    painter->setBrush(gradient);
    painter->drawPath(gradientPath);

    painter->restore();
}

void GaugePanel::drawOuterHalo(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);

    QPainterPath smallCircle;
    QPainterPath bigCircle;

    float radius = radiusHalo;
    smallCircle.addEllipse(-radius, -radius, radius * 2, radius * 2);
    radius += (100.0 - radiusHalo);
    bigCircle.addEllipse(-radius, -radius, radius * 2, radius * 2);

    //大圆抛去小圆部分
    QPainterPath gradientPath = bigCircle - smallCircle;
    QRadialGradient gradient(0, 0, 100, 0, 0);
    gradient.setSpread(QGradient::ReflectSpread);

    gradient.setColorAt(radiusHalo/100, colorHaloStart);
    gradient.setColorAt(1, colorHaloEnd);
    painter->setBrush(gradient);
    painter->drawPath(gradientPath);

    painter->restore();
}

void GaugePanel::drawScale(QPainter *painter)
{
    float radius = 85;
    painter->save();
    painter->setPen(QColor(255, 255, 255));

    painter->rotate(30);
    int steps = (30);
    double angleStep = (360.0 - 60) / steps;
    QPen pen = painter->pen();
    pen.setCapStyle(Qt::RoundCap);

    for (int i = 0; i <= steps; i++) {
        if (i % 3 == 0) {
            pen.setWidthF(1.5);
            painter->setPen(pen);
            QLineF line(0.0f, radius - 8.0f, 0.0f, radius);
            painter->drawLine(line);
        } else {
            pen.setWidthF(0.5);
            painter->setPen(pen);
            QLineF line(0.0f, radius - 3.0f, 0.0f, radius);
            painter->drawLine(line);
        }

        painter->rotate(angleStep);
    }

    painter->restore();
}

void GaugePanel::drawScaleNum(QPainter *painter)
{
    float radius = 95.0f;
    painter->save();
    painter->setPen(QColor(255, 255, 255));

    double startRad = (330 - 90) * (M_PI / 180);
    double deltaRad = (300) * (M_PI / 180) / 10;

    for (int i = 0; i <= 10; i++) {
        double sina = sin(startRad - i * deltaRad);
        double cosa = cos(startRad - i * deltaRad);
        double value = 1.0 * i * ((30) / 10);//刻度值范围

        QString strValue = QString("%1").arg((double)value, 0, 'f', 0);
        double textWidth = fontMetrics().width(strValue);
        double textHeight = fontMetrics().height();
        int x = radius * cosa - textWidth / 2;
        int y = -radius * sina + textHeight / 4;
        painter->drawText(x, y, strValue);
    }

    painter->restore();
}

void GaugePanel::drawPointer(QPainter *painter)
{
    painter->save();

    float radius = 83.0;
    painter->rotate(30+int(value*10));
    QPen pen = painter->pen();
    pen.setWidthF(1.0);
    pen.setColor(QColor(50, 154, 255, 200));
    painter->setPen(pen);
    QLineF line(0.0f, 0.0f, 0.0f, radius);
    painter->drawLine(line);

    painter->restore();
}

void GaugePanel::drawPointerSector(QPainter *painter)
{
    float radius = 87.5f;
    painter->save();
    painter->setPen(Qt::NoPen);

    QRectF rect(-radius, -radius, radius * 2, radius * 2);
    painter->setBrush(QColor(50, 154, 255, 50));
    painter->drawPie(rect, -120*16, -value*16*10);

    painter->restore();
}

void GaugePanel::drawValue(QPainter *painter)
{
    int radius = 100;
    painter->save();
    painter->setPen(QColor(255, 255, 255));
    painter->setFont(QFont("Arial", 22, 22, true));

    QRectF textRect(-radius, -radius, radius * 2, radius * 2);
    QString strValue = QString("%1").arg((double)value, 0, 'f', 0);
    painter->drawText(textRect, Qt::AlignCenter, strValue);

    painter->restore();
}

void GaugePanel::drawUnit(QPainter *painter)
{
    int radius = 100;
    painter->save();
    painter->setPen(QColor(255, 255, 255));
    painter->setFont(QFont("Arial", 9, -1, true));

    QRectF textRect(-radius, -radius+20, radius * 2, radius * 2);
    painter->drawText(textRect, Qt::AlignCenter, "km/h");

    painter->restore();
}

double GaugePanel::getValue() const
{
    return this->value;
}

int GaugePanel::getHShearValue() const
{
    return this->hShearValue;
}

int GaugePanel::getVShearValue() const
{
    return this->vShearValue;
}

double GaugePanel::getRadiusInner() const
{
    return radiusInner;
}

double GaugePanel::getRadiusOuter() const
{
    return radiusOuter;
}

double GaugePanel::getRadiusHalo() const
{
    return radiusHalo;
}

QColor GaugePanel::getColorOuterFrame() const
{
    return colorOuterFrame;
}

QColor GaugePanel::getColorInnerStart() const
{
    return colorInnerStart;
}

QColor GaugePanel::getColorInnerEnd() const
{
    return colorInnerEnd;
}

QColor GaugePanel::getColorOuterStart() const
{
    return colorOuterStart;
}

QColor GaugePanel::getColorOuterEnd() const
{
    return colorOuterEnd;
}

QColor GaugePanel::getColorHaloStart() const
{
    return colorHaloStart;
}

QColor GaugePanel::getColorHaloEnd() const
{
    return colorHaloEnd;
}

void GaugePanel::setValue(int value)
{
    setValue(double(value));
}

void GaugePanel::setValue(double value) {
    updateValue(value);
}

void GaugePanel::setHShearValue(int value)
{
    if(value > 100 || value < -100)
        return;

    this->hShearValue = value;
    update();
}

void GaugePanel::setVShearValue(int value)
{
    if(value > 100 || value < -100)
        return;

    this->vShearValue = value;
    update();
}

void GaugePanel::setColorOuterFrame(QColor color)
{
    colorOuterFrame = color;
}

void GaugePanel::setRadiusInner(int radius)
{
    setRadiusInner(double(radius));
}

void GaugePanel::setRadiusInner(double radius)
{
    if(radius >= 0.0f && radius < 100.0f){
        radiusInner = radius;
        update();
    }
}

void GaugePanel::setRadiusOuter(int radius)
{
    setRadiusOuter(double(radius));
}

void GaugePanel::setRadiusOuter(double radius)
{
    if(radius > 0.0f && radius < 100.0f){
        radiusOuter = radius;
        update();
    }
}

void GaugePanel::setRadiusHalo(int radius)
{
    setRadiusHalo(double(radius));
}

void GaugePanel::setRadiusHalo(double radius)
{
    if(radius > 0.0f && radius < 100.0f){
        radiusHalo = radius;
        update();
    }
}

void GaugePanel::setColorInnerStart(QColor color)
{
    colorInnerStart = color;
}

void GaugePanel::setColorInnerEnd(QColor color)
{
    colorInnerEnd = color;
}

void GaugePanel::setColorOuterStart(QColor color)
{
    colorOuterStart = color;
}

void GaugePanel::setColorOuterEnd(QColor color)
{
    colorOuterEnd = color;
}

void GaugePanel::setColorHaloStart(QColor color)
{
    colorHaloStart = color;
}

void GaugePanel::setColorHaloEnd(QColor color)
{
    colorHaloEnd = color;
}

void GaugePanel::startShearAnimal(int duration, int hShearValue, int vShearValue)
{
    if(hShearValue == this->hShearValue && vShearValue == this->vShearValue){
        return;
    }

    if(hShearAnimation->state() != QPropertyAnimation::Stopped){
        hShearAnimation->stop();
    }

    if(vShearAnimation->state() != QPropertyAnimation::Stopped){
        vShearAnimation->stop();
    }

    hShearAnimation->setDuration(duration);
    hShearAnimation->setStartValue(this->hShearValue);
    hShearAnimation->setEndValue(hShearValue);
    hShearAnimation->start();

    vShearAnimation->setDuration(duration);
    vShearAnimation->setStartValue(this->vShearValue);
    vShearAnimation->setEndValue(vShearValue);
    vShearAnimation->start();
}

void GaugePanel::updateValue(double value)
{
    if(value > 30.0 || value < 0.0){
        return;
    }

    this->value = value;
    //update();
    this->update();
   // emit valueChanged(value);
}

3. 用法

创建类，然后在创建的头文件和源文件里面添加上述代码
在UI界面里面拖拽widget部件
将widget部件提升为自定义的类，在提升的类名称里面填入上面源代码里面的类名
调用函数如下，在设计师界面类里面调用这个函数即可

void GaugePanel::setValue(int value)
{
    setValue(double(value));
}

ui->gaugepanel->setValue(a);

收起

展开全文

控件 widget

Qt自定义控件实现多彩色仪表盘
2020-08-25 06:18:48

主要为大家详细介绍了Qt自定义控件实现多彩色仪表盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

收起

Qt控件：仪表盘2

千次阅读 2022-01-30 23:16:10

1. 预览图 2. 代码头文件 #ifndef MOTORMETER_H ...QtMath> #include <QDialog> #include <QPainter> #include <QPaintEvent> #include <QPainterPath> #include <

1. 预览图

2. 代码

头文件

#ifndef MOTORMETER_H
#define MOTORMETER_H

#include <QWidget>
#include <QDebug>
#include <QtMath>
#include <QDialog>
#include <QPainter>
#include <QPaintEvent>
#include <QPainterPath>
#include <QRadialGradient>

class motormeter : public QWidget
{
    Q_OBJECT
public:
    explicit motormeter(QWidget *parent = nullptr);
    ~motormeter();
protected:
    void paintEvent(QPaintEvent*);
private:
    int degRotate =-120;

private:
    void DrawPoint(QPainter&,int);
    void DrawDigital(QPainter&,int);
    void DrawCircle(QPainter&,int);
    void DrawSmallScale(QPainter&,int);
    void DrawBigScale(QPainter&,int);
    void DrawText(QPainter&,int);
    void DrawPointer(QPainter&,int);
    void drawIndicator(QPainter *painter);

public slots:
    void valueChanged(int);
};

#endif // MOTORMETER_H

源文件

#include "motormeter.h"

motormeter::motormeter(QWidget *parent) : QWidget(parent)
{
}

motormeter::~motormeter()
{

}

void motormeter::paintEvent(QPaintEvent*)
{

    QPainter painter(this);
    int width=this->width();
    int height=this->height();
    int radius=((width>height)?height:width)/2;
    //移动画笔到中下方
    painter.translate(width/2,height*0.6);
    //启用反锯齿
    painter.setRenderHint(QPainter::Antialiasing, true);
    painter.setPen(Qt::NoPen);
    //设置画刷颜色
    painter.setBrush(QColor(138,43,226));
    DrawPoint(painter,radius);
    DrawDigital(painter,radius-10);
    DrawCircle(painter,radius-35);
    DrawSmallScale(painter,radius-60);
    DrawBigScale(painter,radius-75);
    DrawText(painter,radius/2);
    DrawPointer(painter,radius-100);

}
//绘制外圈点
void motormeter::DrawPoint(QPainter& painter,int radius)
{
    //组装点的路径图
    QPainterPath pointPath;
    pointPath.moveTo(-2,-2);
    pointPath.lineTo(2,-2);
    pointPath.lineTo(2,2);
    pointPath.lineTo(0,4);
    pointPath.lineTo(-2,2);
    //绘制13个小点
    for(int i=0;i<13;++i){
        QPointF point(0,0);
        painter.save();
        painter.setBrush(QColor(255,127,80));
        //计算并移动绘图对象中心点
        point.setX(radius*qCos(((210-i*20)*M_PI)/180));
        point.setY(radius*qSin(((210-i*20)*M_PI)/180));
        //计算并移动绘图对象的中心点
        painter.translate(point.x(),-point.y());
        //计算并选择绘图对象坐标
        painter.rotate(-120+i*20);
        //绘制路径
        painter.drawPath(pointPath);
        painter.restore();
    }
}
//绘制外圈数字，原理和绘制圆圈点一样
void motormeter::DrawDigital(QPainter& painter,int radius)
{
    //设置画笔，画笔默认NOPEN
    painter.setPen(QColor(218,112,214));
    QFont font;
    font.setFamily("Cambria");
    font.setPointSize(15);
    painter.setFont(font);
    for(int i=0;i<13;++i){
        QPointF point(0,0);
        painter.save();
        point.setX(radius*qCos(((210-i*20)*M_PI)/180));
        point.setY(radius*qSin(((210-i*20)*M_PI)/180));
        painter.translate(point.x(),-point.y());
        painter.rotate(-120+i*20);
        painter.drawText(-15, -5, 40, 30,Qt::AlignCenter,QString::number(i*20));
        painter.restore();
    }
    //还原画笔
    painter.setPen(Qt::NoPen);
}
//绘制外圈
void motormeter::DrawCircle(QPainter& painter,int radius)
{
    //保存绘图对象
    painter.save();
    //计算大小圆路径
    QPainterPath outRing;
    QPainterPath inRing;
    outRing.moveTo(0,0);
    inRing.moveTo(0,0);
    outRing.arcTo(-radius,-radius, 2*radius,2*radius,-31,242);
    inRing.addEllipse(-radius+20,-radius+20,2*(radius-20),2*(radius-20));
    outRing.closeSubpath();
    //设置渐变色k
    QRadialGradient radialGradient(0,0,radius,0,0);
    radialGradient.setColorAt(0.93,QColor(138,43,226));
    radialGradient.setColorAt(1,QColor(0,0,0));
    //设置画刷
    painter.setBrush(radialGradient);
    //大圆减小圆
    painter.drawPath(outRing.subtracted(inRing));
    //painter.drawPath(outRing);
    //painter.drawPath(inRing);
    painter.restore();
}
//绘制刻度
void motormeter::DrawSmallScale(QPainter& painter,int radius)
{
    //组装点的路径图
    QPainterPath pointPath;
    pointPath.moveTo(-2,-2);
    pointPath.lineTo(-1,-4);
    pointPath.lineTo(1,-4);
    pointPath.lineTo(2,-2);
    pointPath.lineTo(1,8);
    pointPath.lineTo(-1,8);
    //绘制121个小点
    for(int i=0;i<121;++i){
        QPointF point(0,0);
        painter.save();
        point.setX(radius*qCos(((210-i*2)*M_PI)/180));
        point.setY(radius*qSin(((210-i*2)*M_PI)/180));
        painter.translate(point.x(),-point.y());
        painter.rotate(-120+i*2);
        if(i>=90) painter.setBrush(QColor(250,0,0));
        painter.drawPath(pointPath);
        painter.restore();
    }
}
//绘制刻度
void motormeter::DrawBigScale(QPainter& painter,int radius)
{
    //组装点的路径图
    QPainterPath pointPath1;
    pointPath1.moveTo(-2,-2);
    pointPath1.lineTo(-1,-4);
    pointPath1.lineTo(1,-4);
    pointPath1.lineTo(2,-2);
    pointPath1.lineTo(1,8);
    pointPath1.lineTo(-1,8);
    QPainterPath pointPath2;
    pointPath2.moveTo(-2,-2);
    pointPath2.lineTo(-1,-4);
    pointPath2.lineTo(1,-4);
    pointPath2.lineTo(2,-2);
    pointPath2.lineTo(1,15);
    pointPath2.lineTo(-1,15);
    //绘制25个刻度
    for(int i=0;i<25;++i){
        QPointF point(0,0);
        painter.save();
        point.setX(radius*qCos(((210-i*10)*M_PI)/180));
        point.setY(radius*qSin(((210-i*10)*M_PI)/180));
        painter.translate(point.x(),-point.y());
        painter.rotate(-120+i*10);
        if(i>=18) painter.setBrush(QColor(250,0,0));
        if(i%2){
            painter.drawPath(pointPath1);
        }
        else{
            painter.drawPath(pointPath2);
        }
        painter.restore();
    }
}
//绘制中心文字km/h
void motormeter::DrawText(QPainter& painter,int radius)
{
    painter.save();
    painter.setPen(QColor(153,51,250));
    QFont font;
    font.setFamily("Cambria");
    font.setPointSize(16);
    painter.setFont(font);
    painter.drawText(-25, -radius, 60, 30,Qt::AlignCenter,QString("km/h"));
    painter.restore();
}
//绘制指针
void motormeter::DrawPointer(QPainter& painter,int radius)
{
    //组装点的路径图
    QPainterPath pointPath;
    pointPath.moveTo(10,0);
    pointPath.lineTo(1,-radius);
    pointPath.lineTo(-1,-radius);
    pointPath.lineTo(-10,0);
    pointPath.arcTo(-10,0,20,20,180,180);
    QPainterPath inRing;
    inRing.addEllipse(-5,-5,10,10);
    painter.save();
    QRadialGradient radialGradient(0,0,radius,0,0);
    radialGradient.setColorAt(0,QColor(0,199,140,150));
    radialGradient.setColorAt(1,QColor(255,153,18,150));
    //计算并选择绘图对象坐标
    painter.rotate(degRotate);
    painter.setBrush(radialGradient);
    painter.drawPath(pointPath.subtracted(inRing));
    painter.restore();
}
void motormeter::valueChanged(int value)
{
    this->degRotate = value;
    update();
}

3. 用法

创建类，然后在创建的头文件和源文件里面添加上述代码
在UI界面里面拖拽widget部件
将widget部件提升为自定义的类，在提升的类名称里面填入上面源代码里面的类名
调用函数如下，在设计师界面类里面调用这个函数即可

void motormeter::valueChanged(int value)
{
    this->degRotate = value;
    update();
}

//设置背景墙
QPalette bgpal= palette();
bgpal.setColor(QPalette::Background,QColor(0,0,0));
setPalette (bgpal);
ui->motormeter->valueChanged(a);

收起

展开全文

开发语言 c++

QT仪表盘
千次阅读 2018-08-17 08:42:15
使用Qt简单谢了一个飞机的一小部分仪表，还没有写完，目前只写了一个界面，不过思想应该是一样的。效果图如下其中主要由转速表，和下面的部分数字显示构成转速表代码 .h文件 ifndef CONTROL_ENGINE_H ...
使用Qt简单谢了一个飞机的一小部分仪表，还没有写完，目前只写了一个界面，不过思想应该是一样的。

效果图如下

其中主要由转速表，和下面的部分数字显示构成

转速表代码

.h文件

ifndef CONTROL_ENGINE_H

define CONTROL_ENGINE_H

include

include

include

define PI 3.1415926

define GREEN 0,255,0

define YELLOW 211,137,50

define WHITE 255,255,255

namespace Ui {
class Control_Engine;
}

class Control_Engine : public QWidget
{
Q_OBJECT

public:
explicit Control_Engine(QWidget *parent,int temp);
~Control_Engine();
void set_Engine(int temp);
private:
bool eventFilter(QObject *temp1, QEvent *temp2);
void draw_Engine();
void draw_Percent();
private:
Ui::Control_Engine *ui;
int num_Engine;
int num_Percent;
};

endif // CONTROL_ENGINE_H

cpp文件

include “control_engine.h”

include “ui_control_engine.h”

include

Control_Engine::Control_Engine(QWidget *parent,int temp) :
QWidget(parent),
ui(new Ui::Control_Engine)
{
ui->setupUi(this);
ui->label_draw->installEventFilter(this);
ui->label_percent->installEventFilter(this);
num_Engine = 0;
num_Percent = 0;
```
if(temp == 0)
{
    ui->label_draw->move(50,0);
    ui->label->move(40,20);
    ui->label_percent->move(0,17);
}
else if(temp == 1)
{
    ui->label_draw->move(0,0);
    ui->label->move(110,20);
    ui->label_percent->move(70,17);
}
```
}

Control_Engine::~Control_Engine()
{
delete ui;
}

void Control_Engine::set_Engine(int temp)
{
num_Engine = temp;
num_Percent = temp/2;
update();
}

bool Control_Engine::eventFilter(QObject *temp1, QEvent *temp2)
{
if((temp1 == ui->label_draw)&&temp2->type() == QEvent::Paint)
{
draw_Engine();
}
if((temp1 == ui->label_percent)&&temp2->type() == QEvent::Paint)
{
draw_Percent();
}
}

void Control_Engine::draw_Engine()
{
```
if(num_Engine<=200)
{
    QPainter painter1(ui->label_draw);
    painter1.setRenderHint(QPainter::Antialiasing,true);
    painter1.setPen(QPen(QColor(GREEN),3,Qt::SolidLine,Qt::FlatCap));
    painter1.drawArc(13,3,54,54,180*16,270*16);
    painter1.drawLine(3,30,14,30);
    QPainter painter2(ui->label_draw);
    painter2.setRenderHint(QPainter::Antialiasing,true);
    painter2.setPen(QPen(QColor(GREEN),3,Qt::SolidLine,Qt::FlatCap));
    painter2.drawLine(40,30,(40+27*qSin(num_Engine*PI/180.0)),(30-27*qCos(num_Engine*PI/180.0)));
}
else
{
    QPainter painter1(ui->label_draw);
    painter1.setRenderHint(QPainter::Antialiasing,true);
    painter1.setPen(QPen(QColor(YELLOW),3,Qt::SolidLine,Qt::FlatCap));
    painter1.drawArc(13,3,54,54,180*16,270*16);
    painter1.drawLine(3,30,14,30);
    QPainter painter2(ui->label_draw);
    painter2.setRenderHint(QPainter::Antialiasing,true);
    painter2.setPen(QPen(QColor(YELLOW),3,Qt::SolidLine,Qt::FlatCap));
    painter2.drawLine(40,30,(40+27*qSin(num_Engine*PI/180.0)),(30-27*qCos(num_Engine*PI/180.0)));
}
```
}

void Control_Engine::draw_Percent()
{
if(num_Percent<=100)
{
QPainter painter1(ui->label_percent);
painter1.setPen(QPen(QColor(WHITE),1.5));
QRect rect1(1,3,36,20);
painter1.drawRect(rect1);
QPainter painter2(ui->label_percent);
painter2.setPen(QPen(QColor(GREEN),1.5));
QString str = QString::number(num_Percent,10);
QFont font(“宋体”,12,QFont::Bold);
painter2.setFont(font);
painter2.drawText(rect1,Qt::AlignCenter,str);
}
else
{
QPainter painter1(ui->label_percent);
painter1.setPen(QPen(QColor(WHITE),1.5));
QRect rect1(1,3,36,20);
painter1.drawRect(rect1);
QPainter painter2(ui->label_percent);
painter2.setPen(QPen(QColor(YELLOW),1.5));
QString str = QString::number(num_Percent,10);
QFont font(“宋体”,12,QFont::Bold);
painter2.setFont(font);
painter2.drawText(rect1,Qt::AlignCenter,str);
}

}
百分比代码

.h.

ifndef CONTROL_PERCENT_H

define CONTROL_PERCENT_H

include

include

define GREEN 0,255,0

define WHITE 255,255,255

namespace Ui {
class Control_Percent;
}

class Control_Percent : public QWidget
{
Q_OBJECT

public:
explicit Control_Percent(QWidget *parent = 0);
~Control_Percent();
void set_Percent(int temp);
private:
void draw_Percent();
bool eventFilter(QObject *temp1, QEvent *temp2);
private:
Ui::Control_Percent *ui;
int num_Percent;
};

endif // CONTROL_PERCENT_H

cpp

include “control_percent.h”

include “ui_control_percent.h”

Control_Percent::Control_Percent(QWidget *parent) :
QWidget(parent),
ui(new Ui::Control_Percent)
{
ui->setupUi(this);
num_Percent = 0;
ui->label_percent->installEventFilter(this);
}

Control_Percent::~Control_Percent()
{
delete ui;
}

void Control_Percent::set_Percent(int temp)
{
num_Percent = temp;
}

void Control_Percent::draw_Percent()
{
QPainter painter1(ui->label_percent);
painter1.setPen(QPen(QColor(WHITE),1.5));
QRect rect1(1,3,36,20);
painter1.drawRect(rect1);
QPainter painter2(ui->label_percent);
painter2.setPen(QPen(QColor(GREEN),1.5));
QString str = QString::number(num_Percent,10);
QFont font(“宋体”,12,QFont::Bold);
painter2.setFont(font);
painter2.drawText(rect1,Qt::AlignCenter,str);
}

bool Control_Percent::eventFilter(QObject *temp1, QEvent *temp2)
{
if((temp1 == ui->label_percent)&&temp2->type() == QEvent::Paint)
{
draw_Percent();
}
}

剩下的其它小部分代码

界面初始化部分代码

void MainWidget::set_Form_down(int temp)
{
switch (temp) {
case 0:
{
if(ui->widget_Form_Down->isHidden())
{
ui->widget_Form_Down->show();
}
else
{
ui->label_Form_Down_Plane->setStyleSheet(“border-image:url(:/Form_Down/Source/Form_Down/F22.png)”);
if(engine_left == NULL)
{
engine_left = new Control_Engine(ui->widget_Form_Down,LEFT);
engine_left->setGeometry(17,20,120,80);
}
if(engine_right == NULL)
{
engine_right = new Control_Engine(ui->widget_Form_Down,RIGHT);
engine_right->setGeometry(180,20,120,80);
}
```
        //            QPalette palette;
        //            palette.setColor(QPalette::WindowText,Qt::red);
        //            ui->label_ENG->setPalette(palette);
        //            QFont font;
        //            font.setPointSize(12);
        //            ui->label_ENG->setFont(font);
        //            ui->label_ENG->setText("TEST");
        //            ui->label_ENG->setAlignment(Qt::AlignCenter);
        if(percent1 == NULL)
        {
            percent1 = new Control_Percent(ui->widget_Form_Down);
            percent1->setGeometry(30,170,50,26);
            percent1->set_Percent(50);                      //test
        }
        if(percent2 == NULL)
        {
            percent2 = new Control_Percent(ui->widget_Form_Down);
            percent2->setGeometry(245,170,50,26);
            percent2->set_Percent(50);                      //test
        }
        if(percent3 == NULL)
        {
            percent3 = new Control_Percent(ui->widget_Form_Down);
            percent3->setGeometry(30,240,50,26);
            percent3->set_Percent(50);                      //test
        }
        if(percent4 == NULL)
        {
            percent4 = new Control_Percent(ui->widget_Form_Down);
            percent4->setGeometry(245,240,50,26);
            percent4->set_Percent(50);                      //test
        }
    }



    break;
}
case 1:
    ui->widget_Form_Down->hide();
    break;
default:
    break;
}
```
}
绘制其它部分代码
void MainWidget::draw_Gun()
{
QPainter painter1(ui->label_GUN);
painter1.setPen(QPen(QColor(WHITE),1.5));
QRect rect1(1,3,76,22);
painter1.drawRect(rect1);
QPainter painter2(ui->label_GUN);
painter2.setPen(QPen(QColor(GREEN),1.5));
QString str = “GUN “+QString::number(num_GUN,10);
QFont font(“宋体”,12,QFont::Bold);
painter2.setFont(font);
painter2.drawText(rect1,Qt::AlignCenter,str);
}

void MainWidget::draw_Information()
{
QPainter painter1(ui->label_Information);
painter1.setPen(QPen(QColor(WHITE),1.5));
QRect rect1(1,3,118,45);
QRect rect2(1,3,118,24);
QRect rect3(1,24,118,24);
painter1.drawRect(rect1);
QPainter painter2(ui->label_Information);
painter2.setPen(QPen(QColor(WHITE),1.5));
QString str = “BAY DOORS”;
QFont font(“宋体”,12,QFont::Bold);
painter2.setFont(font);
painter2.drawText(rect2,Qt::AlignCenter,str);
```
QPainter painter3(ui->label_Information);
if(BAY_DOORS == "CLOSED")
{
    painter3.setPen(QPen(QColor(GREEN),1.5));
}
else
{
    painter3.setPen(QPen(QColor(RED),1.5));
}
QFont font1("宋体",12,QFont::Bold);
painter3.setFont(font1);
painter3.drawText(rect3,Qt::AlignCenter,BAY_DOORS);
```
}

void MainWidget::draw_Bay()
{
QPainter painter(ui->label_BAY);
QRect rect1(0,0,30,16);
```
if(BAY_DOORS == "CLOSED")
{
    painter.setPen(QPen(QColor(GREEN),1.5));
}
else
{
    painter.setPen(QPen(QColor(RED),1.5));
}
QString str = "BAY";
QFont font("宋体",12,QFont::Bold);
painter.setFont(font);
painter.drawText(rect1,Qt::AlignCenter,str);
```
}
收起
展开全文
Qt绘制的多彩仪表盘
2019-10-28 14:45:46

Qt绘制的多彩仪表盘简单Demo，指针所指向的面积划过的区域设置填充渐变，相对比较漂亮，Qt5下载直接编译运行，源码可见

收起
Qt：仪表盘控件
2020-08-22 15:02:05

基于QWidget实现的仪表盘控件。效果如图，代码自取，请放心食用（建议使用Qt中提升控件方法使用）。源码 fr_dash_board.h #ifndef FR_DASH_BOARD_H #define FR_DASH_BOARD_H #include <qwidget.h> class ...

收起
Qt编写的速度仪表盘
热门讨论 2017-02-20 17:36:47

使用Qt4编写的动态仪表，注释详细，有详细的文章指导讲解-我的博客《QT实战开发》

收起
Qt自定义控件--仪表盘源码
2018-08-17 11:29:59

源码使用Qt4.8.6和Qt5.7.1编译均没有问题。源码解释请参考博客：https://blog.csdn.net/baidu_33850454/article/details/81773323

收起
汽车仪表盘Qt demo
2017-10-16 11:28:00

基于Qt5.6.2的汽车仪表盘demo，QML语法。功能界面有随机时速表和转速表，左转向灯

收起
Qt：汽车仪表盘控件
千次阅读 2020-08-24 22:47:02

基于QWidget实现的汽车仪表盘，包括发动机转速表，迈速表，油表，发动机水箱温度计，并且分别提供了接口。

收起
Qt：绘制仪表盘
2020-11-21 09:52:18

Qt：绘制仪表盘

收起
Qt自定义仪表盘Demo01
2019-10-28 14:52:32

Qt自己绘制简单仪表盘控件Demo01 Demo01展示: Demo01源码下载地址：添加链接描述

收起

QPainter
Qt 3D 汽车仪表盘
千次阅读 2020-03-26 17:43:43

使用Qt3D开发汽车仪表盘 blender建模仪表盘模型和汽车模型，导入Qt中，qt中qml编程实现模型的动画效果。相对OpenGL，Qt3D的实现更简单，模型的颜色在blender中预先设置好，导入Qt中，调节好灯光，就可以显示炫酷的...

收起

单片机 c语言
基于QT的带背景的仪表盘
2019-06-06 10:41:10

基于QT的仪表盘，带有背景图片显示的仪表盘设计。

收起
[开源]Qt圆弧仪表盘
千次阅读 2019-07-12 10:43:34

看了大神分享的仪表盘（Qt编写自定义控件-圆弧仪表盘），代码不开源。哈哈，看着不错，就照着画画。开源，开源，开源啦，唉，喊不动了，还是码字吧... 先上效果对比图(录制的gif效果不好，无奈选了jpg截图) ...

收起

自定义控件
Qt中添加仪表盘控件
2020-12-10 17:13:27

我这里加了表示温湿度的仪表盘控件，准备了指针图片、温度盘图片和湿度盘图片在这里需要注意的是仪表盘和指针背景要透明二、调用的主要程序下面是可以直接调用的头文件和程序下面是.h文件 #ifndef ...

收起
Qt自绘汽车仪表盘-1
千次阅读 2020-09-05 15:24:52

再说Qt坐标系，Qt坐标系是向右为x轴，右为正，左为负，向下为y轴，下为正，上为负。所以这样表盘的相对Qt坐标系的起始角度为-120°，终点角度为120°。五、详细绘制过程 ①准备工作，先设置对话框窗口大小，设置...

收起

python windows 运维

QT主要提供三种图形界面：Widget,Graphics,QML

思路：

注意：

QTmeter_qt仪表盘_QT仪表_QT简单仪表盘_qt虚拟仪表_QT仪表_

QT仪表盘实例(项目实战)

QT仪表盘源码

QT 仪表盘 Widget 源码

基于QT的仪表盘

Qt自定义汽车仪表盘控件

instrument_panel_qt仪表盘_QT仪表_movie2h2_QT_Qt工业_

qt 仪表盘程序

Qt 自定义仪表盘.zip

Qt自定义控件实现简易仪表盘

Qt控件：仪表盘

1. 预览图

2. 代码

3. 用法

Qt自定义控件实现多彩色仪表盘

Qt控件：仪表盘2

1. 预览图

2. 代码

3. 用法

ifndef CONTROL_ENGINE_H

define CONTROL_ENGINE_H

include

include

include

define PI 3.1415926

define GREEN 0,255,0

define YELLOW 211,137,50

define WHITE 255,255,255

endif // CONTROL_ENGINE_H

include “control_engine.h”

include “ui_control_engine.h”

include

ifndef CONTROL_PERCENT_H

define CONTROL_PERCENT_H

include

include

define GREEN 0,255,0

define WHITE 255,255,255

endif // CONTROL_PERCENT_H

include “control_percent.h”

include “ui_control_percent.h”

Qt绘制的多彩仪表盘

Qt：仪表盘控件

Qt编写的速度仪表盘

Qt自定义控件--仪表盘源码

汽车仪表盘Qt demo

Qt：汽车仪表盘控件

Qt：绘制仪表盘

Qt自定义仪表盘Demo01

Qt 3D 汽车仪表盘

基于QT的带背景的仪表盘

[开源]Qt圆弧仪表盘

Qt中添加仪表盘控件

Qt自绘汽车仪表盘-1

qt仪表盘