Qt 自定义控件 表盘

概述:

        表盘类控件,大概流程都是一样的,参考qt 时钟 例子.特别鸣谢:飞扬青云大神.

函数总结:

QPainterPath        绘制路径
drawArc             绘制弧线
drawLine            刻度线其实是用段直线绘制出来然后旋转形成的
drawConvexPolygon   绘制多边形
drawText            绘制文字
setBrush            绘制的时候自动填充颜色.
translate           当前绘制的坐标移动到指定位置
save/restore        主要用在旋转后恢复,不然找不到东南西北,及其混乱了.

效果展示:

核心文件代码:

#ifndef CDASHBOARD_H
#define CDASHBOARD_H

#include <QWidget>
#include <QPainter>

class CdashBoard : public QWidget
{
    Q_OBJECT

public:

    QPainter      _painter;
    qreal         _pointerPos=0;          //指针位置
    void          setValue(int _value);   //设置显示值
    qreal         getRotate();


    CdashBoard(QWidget *parent = 0);
    virtual void paintEvent(QPaintEvent *);
    virtual QSize sizeHint() const;


};

#endif // CDASHBOARD_H

#include "cdashboard.h"

CdashBoard::CdashBoard(QWidget *parent) :
    QWidget(parent)
{
    resize(321,211);
}

//第一次拖出控件显示的大小
QSize CdashBoard::sizeHint() const
{
    return QWidget::size();
}

void CdashBoard::paintEvent(QPaintEvent *)
{
    //成员变量就要带 begin和 end . 可以用 new QPainter(this) 代替就不用 begin() 和 end()函数
    _painter.begin(this);

    //抗锯齿
    _painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //自动缩放
    _painter.scale(width() / 321.0, height() / 211.0);

    QPen     _pen;
    int      _arcLength=210;

    //中间黑色区域
    QPainterPath myPathBG;
    myPathBG.moveTo(160,160);
    myPathBG.arcTo(10,10,300,300, -15,_arcLength);
    myPathBG.closeSubpath();
    _pen.setWidth(1);
    QColor _colorBG(54,53,58);
    _pen.setColor(_colorBG);
    _painter.setPen(_pen);
    _painter.setBrush(QBrush(_colorBG));
    _painter.drawPath(myPathBG);

    //最外圈
    _pen.setColor(QColor(227,228,233));
    _pen.setWidth(8);
    _painter.setPen(_pen);
    _painter.drawArc(10,10,300,300,-14*16,16*(_arcLength-2));

    //右边红圈
    _pen.setColor(QColor(219,51,68));
    _pen.setWidth(14);
    _painter.setPen(_pen);
    _painter.drawArc(20,20,280,280,-12.5*16,16*70);

    //左边绿圈
    _pen.setColor(QColor(115,193,55));
    _painter.setPen(_pen);
    _painter.drawArc(20,20,280,280,16*62.5,16*(_arcLength-80));

    //白刻度线
    _painter.translate(160,160);
    _pen.setWidth(6);
    _pen.setColor(QColor(227,228,233));
    _painter.setPen(_pen);
    _painter.save();
    _painter.rotate(-16);
    for (int i=0;i<8;i++)
    {
        _painter.drawLine(-132,0,-152,0);
        _painter.rotate(30.3);
    }
    _painter.restore();

    //刻度值
     QFont _font("",10,QFont::Bold);
     _font.setStyleHint(QFont::Fantasy);
     _painter.setFont(_font);
     _painter.save();
     _painter.rotate(-14);
     for(int i=0;i<8;i++)
     {
        _painter.drawText(-123,0,QString::number(i*10));
        _painter.rotate(29.1);
     }
    _painter.restore();

    //表盘文字
    _pen.setColor(QColor(Qt::gray));
    _painter.setPen(_pen);
    _painter.drawText(-18,-66,"km/h");

    //黑刻度线
    _pen.setWidth(3);
    _pen.setColor(_colorBG);
    _painter.setPen(_pen);
    _painter.save();
    for (int i=0;i<7;i++)
    {
        _painter.drawLine(-133,0,-146,0);
        _painter.rotate(30);
    }
    _painter.restore();

    //指针
    QPolygon pts; pts.setPoints(4, -6, 0, 0, 13, 6, 0, 0, -100);
    QColor _color(3,182,200,180);
    _pen.setWidth(1);
    _pen.setColor(_color);
    _painter.setPen(_pen);
    _painter.setBrush(QBrush(_color));
    _painter.save();
    _painter.rotate(getRotate());
    _painter.drawConvexPolygon(pts);
    _painter.restore();

    _painter.end();
}

qreal CdashBoard::getRotate()
{
    //0-99 一百个数 代表实际 210 弧度. -104 因为绘制出来是90° 让指针回0点.
    return _pointerPos*2.1-104;
}

void CdashBoard::setValue(int _value)
{
    _pointerPos=_value;
    update();
}