QT 仪表控件的设计与实现

实物图

本设计实现对程序的鼠标拖动，点击右键实现关闭应用程序，并且含有扫描余晖

部分关键代码

void Widget::paintEvent(QPaintEvent *ev)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);// 抗锯齿

    float scale = qMin(width(),height());         // 获取窗口最小值

    //设置缩放比例和原点的先后顺序很重要
    painter.scale(scale/m_refSize,scale/m_refSize);//缩放坐标系，使其收缩自如
    painter.translate(m_refSize/2,m_refSize/2);    //定义坐标原点

    drawFrame(painter);
    drawDivding(painter);
    drawNumberIndicator(painter);
    drawIndicator(painter);
    drawNumberSpeed(painter);

    m_wgt_mileage->setGeometry((width() - m_wgt_mileage->width()) / 2 + 30,
                               height() - m_wgt_mileage->height() - 60,m_wgt_mileage->width(),
                               m_wgt_mileage->height());
}

//绘制边框
void Widget::drawFrame(QPainter &p)
{
    p.save();//保存当前的画家状态(将状态推入堆栈)。save()后面必须跟着相应的restore();函数的作用是:释放堆栈。
    p.setPen(Qt::NoPen);

    QLinearGradient lg1(-m_radius,-m_radius,m_radius,m_radius);//渐变区域
    lg1.setColorAt(0.1,QColor(127,128,214,255));
    lg1.setColorAt(1,QColor(255,22,72,255));

    p.setBrush(lg1);
    p.drawEllipse(-m_radius,-m_radius,m_refSize,m_refSize);   //矩形定义的椭圆，左上角为起始点

    p.setBrush(Qt::black);
    p.drawEllipse(QPoint(0,0),90,90);                         //半径rx和ry绘制位于中心的椭圆。
    p.restore();                                              //恢复当前的绘制器状态(从堆栈中弹出保存的状态)
}

//绘制刻度
void Widget::drawDivding(QPainter &p)
{
    p.save();
    p.rotate(m_startAngle); //顺时针旋转坐标系(150°)
    int step = (m_maxSpeed - m_minSpeed)/5;
    double AngleStep = (360.0 - (m_startAngle - m_endAngle))/step;
    QPen pen(Qt::white);
    for(int i = m_minSpeed; i <= m_maxSpeed; i += 5)
    {
        if(i >= 140)
        {
            pen.setColor(Qt::red);
        }
        if(i % 20 == 0)
        {
            pen.setWidth(2);
            p.setPen(pen);
            p.drawLine(75,0,88,0);
        }
        else if(i % 10 == 0)
        {
            pen.setWidth(1);
            p.setPen(pen);
            p.drawLine(80,0,88,0);
        }
        else if(i % 5 == 0)
        {
            pen.setWidth(0);
            p.setPen(pen);
            p.drawLine(80,0,83,0);
        }
        p.rotate(AngleStep);
    }
    p.restore();
}

//绘制指示数字
void Widget::drawNumberIndicator(QPainter &p)
{
    p.save();
    QFontMetricsF fm(this->font());//获取字体
    QPen pen(Qt::white);
    p.setPen(pen);
    double x,y;
    double angle,angleArc;
    double w,h;
    QString speed;
    for(int i = 0; i <= m_maxSpeed; i +=20)
    {
        angle    = m_startAngle + i * m_anglePerVel;
        angleArc = angle * 3.14 / 180; //角度转换为弧度,因为c语言强调sin(弧度)
        x        = 65 * cos(angleArc);
        y        = 65 * sin(angleArc);
        speed    = QString::number(i);
        w        = fm.width(speed);
        h        = fm.height();
        p.drawText(QPointF(x-w/2,y+h/4),speed);
    }

    p.restore();
}

//显示数字速度
void Widget::drawNumberSpeed(QPainter &p)
{
    p.save();
    p.setPen(Qt::white);
    QString speed = QString("%1Km/h").arg(m_curSpeed);
    QFontMetricsF fm(this->font());//获取字体
    qreal w = fm.size(Qt::TextSingleLine,speed).width();
    p.drawText(-w/2,-20,speed);
    p.restore();
}

//绘制速度指针
void Widget::drawIndicator(QPainter &p)
{
    p.save();
    //画指针
    double curAngle = m_startAngle + m_curSpeed *m_anglePerVel;
    p.rotate(curAngle); //顺时针旋转坐标系(150°)

    QRadialGradient haloGradient(0, 0, 60, 0, 0);  //辐射渐变
    haloGradient.setColorAt(0, QColor(216,107,115));
    haloGradient.setColorAt(1, QColor(216,6,25)); //灰
    p.setBrush(haloGradient);//刷子定义形状如何填满 填充后的颜色

    p.setPen(Qt::NoPen);

    static const QPointF points[4] = {
        QPointF(-10, 1),
        QPointF(70, 1),
        QPointF(70, -1),
        QPointF(-10,-1)
    };
    p.drawPolygon(points,4);
    p.restore();
    p.save();
    //画中心点
    QRadialGradient rg(0,0,10); //指定远点和半径
    rg.setColorAt(0.0,Qt::darkGray);
    rg.setColorAt(0.5,Qt::white);
    rg.setColorAt(1.0,Qt::darkGray);
    QBrush brush(rg);
    p.setBrush(brush);
    p.setPen(Qt::NoPen);
    p.drawEllipse(QPoint(0,0),3,3);
    p.restore();
}

源码链接