QT 绘制简单的表盘

一、效果图

二、用到的一些类和方法

使用QPainter绘图 、画笔QPen、涂色QBrush、渐变颜色QRadialGradient，用到的一些函数有：
1、画圆：drawEllipse
2、扇形：drawPie
3、画线：drawLine
4、画文本：drawText
5、设置抗锯齿：setRenderHint(QPainter::Antialiasing,true);
6、设置画笔：setPen
7、设置填充颜色：setBrush
8、绘制多边形：drawPolygon
使用到的计算公式：计算圆上一点的坐标
cir_cente_x、cir_cente_y：圆心坐标
r：半径
i：度数
x = cir_cente_x + r * cos(i * 3.14 /180);
y = cir_cente_y + r * sin(i * 3.14 /180);

三、主要代码

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include<QPainter>
#include <QDebug>

#include <QString>
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    cir_cente_x = 200;
    cir_cente_y = 200;
    big_cir = 140;
    middle_cir = 130;
    smart_cir = 120;
    angle1 = 100.0;
    angle2 = 170.0;
    angle3 = 135.0;

    connect(ui->horizontalSlider,SIGNAL(sliderMoved(int)),this,SLOT(Value()));

}
//滑动指针动态变化
void MainWindow::Value()
{
    angle1 = 100.0 + ui->horizontalSlider->value();
    angle2 = 170.0 + ui->horizontalSlider->value();
    angle3 = 135.0 + ui->horizontalSlider->value();
    //刷新绘图事件
    update();
}
//绘图事件函数
void MainWindow::paintEvent(QPaintEvent *)
{
    DrawClor();
    DreawCircle();
    DreawDial();
    DrawPointe();
    ValueShow();
}
//绘制刻度背景颜色
void MainWindow::DrawClor()
{
    //刻度填色
    float a = 135*16;
    float a1 = 45*16;
    float a2 = -45*16;
    float alen = 90*16;

    QPainter painter(this);
    //三种颜色（也可以设置位渐变颜色）
    QBrush brush(Qt::green);
    QBrush brush1(Qt::blue);
    QBrush brush2(Qt::red);
    painter.setBrush(brush);
    painter.setRenderHint(QPainter::Antialiasing,true);
    painter.drawPie(60,60,280,280,a,alen);
    painter.setBrush(brush1);
    painter.drawPie(60,60,280,280,a1,alen);
    painter.setBrush(brush2);
    painter.drawPie(60,60,280,280,a2,alen);

}
//画圆
void MainWindow::DreawCircle()
{

    QPainter painter(this);
    QBrush brush(Qt::black);
    QPoint point(cir_cente_x,cir_cente_y);
    //设置抗锯齿
    painter.setRenderHint(QPainter::Antialiasing,true);
    painter.drawEllipse(point,big_cir,big_cir);
    painter.setBrush(brush);
    painter.drawEllipse(point,smart_cir,smart_cir);   
}
//绘制刻度线
void MainWindow::DreawDial()
{
    int dial_x1,dial_y1,dial_x2,dial_y2;
    int i = 0;
    for( i = 135;i <=405;i += 9)
    {
        //计算圆上一点的坐标，用于绘制刻度线
            dial_x1 = cir_cente_x + big_cir * cos(i * 3.14 /180);
            dial_y1 = cir_cente_y + big_cir * sin(i * 3.14 /180);
        //绘制长线
        if(i % 5 == 0)
        {

            dial_x2 = cir_cente_x + smart_cir * cos(i * 3.14 /180);
            dial_y2 = cir_cente_y + smart_cir * sin(i * 3.14 /180);
            DrawNum(dial_x2,dial_y2,i);
        }
        //绘制短线
        else
        {
            dial_x2 = cir_cente_x + middle_cir * cos(i * 3.14 / 180);
            dial_y2 = cir_cente_y + middle_cir * sin(i * 3.14 / 180);
        }
        QPainter painter(this);
        QPen pen(Qt::black);
        painter.setPen(pen);
        painter.setRenderHint(QPainter::Antialiasing,true);
        QPoint p1(dial_x2,dial_y2);
        QPoint p2(dial_x1,dial_y1);

        painter.drawLine(p1,p2);
    }
}
//绘制刻度值
void MainWindow::DrawNum(int x1, int y1,int i)
{
    QPainter painter(this);
    QPen pen(Qt::yellow);
    painter.setPen(pen);
    //绘制刻度值，QPoint中的值根据需要进行修改，使数值在一个合适的位置
    if(i == 135)
        painter.drawText(QPoint(x1,y1),"0");
    else if(i == 180)
        painter.drawText(QPoint(x1+4,y1+4),"20");
    else if(i == 225)
        painter.drawText(QPoint(x1+6,y1+10),"40");
    else if(i == 270)
        painter.drawText(QPoint(x1-4,y1+14),"60");
    else if(i == 315)
        painter.drawText(QPoint(x1-16,y1+12),"80");
    else if(i == 360)
        painter.drawText(QPoint(x1-26,y1+4),"100");
    else if(i == 405)
        painter.drawText(QPoint(x1-28,y1),"120");

}
//绘制指针
void MainWindow::DrawPointe()
{   
    //计算多边形的坐标
    x =  cir_cente_x + 15 * cos(angle1 * 3.14 / 180);
    y =  cir_cente_y + 15 * sin(angle1 * 3.14 / 180);
    x1 = cir_cente_x + 90 * cos(angle3 * 3.14 / 180);
    y1 = cir_cente_y + 90 * sin(angle3 * 3.14 / 180);
    x2 = cir_cente_x + 15 * cos(angle2 * 3.14 / 180);
    y2 = cir_cente_y + 15 * sin(angle2 * 3.14 / 180);
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    QPen pen(Qt::gray);
    painter.setPen(pen);
    QRadialGradient haloGradient(cir_cente_x, cir_cente_y, 60, cir_cente_x, cir_cente_y);  //辐射渐变
    haloGradient.setColorAt(0, Qt::white);
    haloGradient.setColorAt(0.6, Qt::gray);
    haloGradient.setColorAt(1, Qt::darkGray);
    painter.setBrush(haloGradient);
    QPoint point(cir_cente_x,cir_cente_y);

    static  QPointF points[3] = {
          QPointF(x, y),
          QPointF(x1,y1),
          QPointF(x2, y2),
      };
    //进行x,y坐标的设置，否则不能动态转动指针（没有想到其他方法）
      points[0].setX(x);
      points[1].setX(x1);
      points[2].setX(x2);
      points[0].setY(y);
      points[0].setY(y);
      points[1].setY(y1);
      points[2].setY(y2);
      painter.drawPolygon(points,3); //绘制多边形
      painter.drawEllipse(point,15,15);


}
//数值显示
void MainWindow::ValueShow()
{
    QString str;
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    QPen pen(Qt::green);
    painter.setPen(pen);
    //计算数字比例
    int num = ui->horizontalSlider->value()/2.25;

    str = QString::number(num);
    painter.drawText(180,280,str);
    painter.drawText(210,280,"km/h");

}

头文件

class MainWindow : public QMainWindow
{
    Q_OBJECT
private:
    //圆心位置
    int cir_cente_x;
    int cir_cente_y;
    //半径
    int big_cir;
    int middle_cir;
    int smart_cir;
    //指针的坐标
    float x;
    float y;
    float x1;
    float y1;
    float x2;
    float y2;
    //旋转角度 用来绘制多边形
    float angle1;
    float angle2;
    float angle3;

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    //绘图事件
   void paintEvent(QPaintEvent *);
   //画圆
   void DreawCircle();
   //画刻度
   void DreawDial();
   //涂色
   void DrawClor();
   //写刻度值
   void DrawNum(int , int , int );
   //画指针
   void DrawPointe();
   //数字显示
   void ValueShow();
private:
    Ui::MainWindow *ui;
private slots:
    void Value();
};