用QT写一个车速表

主要包含以下绘制步骤：

1、绘制画布：

/** 绘制画布
*/
void Widget::initCanvas(QPainter &painter)
{//消除锯齿painter.setRenderHint(QPainter::Antialiasing,true);//设置底色painter.setBrush(QColor(0,0,0));painter.drawRect(rect());//平移坐标系原点位置QPoint center(rect().width()/2, rect().height()*0.6);painter.translate(center);
}

2.画中心小圆

/** 画小圆
*/
void Widget::drawMiddleCircle(QPainter &painter, int radius)
{//设置画笔颜色和宽度painter.setPen(QPen(QColor(255,255,255),3));//原点坐标（0，0）绘制半径为radius的圆painter.drawEllipse(QPoint(0,0), radius, radius);
}

3.画仪表盘刻度线

/** 画刻度
*/
void Widget::drawScaleLine(QPainter &painter, int radius)
{//总计60个小刻度，每一个小刻度的角度值angle = 240*1.0 / 60;//保存当前坐标painter.save();painter.setPen(QPen(Qt::white, 5));//设置起始刻度位置painter.rotate(startAngle);for(int i=0; i <=60; i++){if( i>=40 ){//第40个刻度后，绘制画笔修改成红色painter.setPen(QPen(Qt::red, 5));}if(i%5 == 0){//绘制长刻度painter.drawLine(radius-20, 0, radius-3, 0);}else{//绘制短刻度painter.drawLine(radius-8, 0, radius-3, 0);}//绘制完一个刻度旋转一次坐标painter.rotate(angle);}//恢复坐标painter.restore();painter.setPen(QPen(Qt::white, 5));
}

4、绘制刻度值

/** 画刻度值
*/
void Widget::drawScaleValue(QPainter &painter, int radius)
{//设置字体类型和大小QFont textFont("Arial",15);//设置粗体textFont.setBold(true);painter.setFont(textFont);int text_r = radius - 49;for(int i=0; i<=60; i++){if(i%5 == 0){if(i>=40){painter.setPen(QPen(Qt::red, 5));}//保存当前坐标系painter.save();int delX = qCos((210-angle*i)*M_PI/180) * text_r;int delY = qSin(qDegreesToRadians(210-angle*i)) * text_r;//平移坐标系painter.translate(QPoint(delX,-delY));//旋转坐标系painter.rotate(-120+angle*i);//写上刻度值，文字居中painter.drawText(-25,-25,50,30,Qt::AlignCenter,QString::number(i*4));//恢复坐标系painter.restore();}}painter.setPen(QPen(Qt::white, 5));
}

5、绘制仪表指针

/** 画指针
*/
void Widget::drawPoint(QPainter &painter, int radius)
{//保存当前坐标painter.save();//设置画刷颜色painter.setBrush(Qt::white);//设置画笔为无线条painter.setPen(Qt::NoPen);static const QPointF points[4] = {QPointF(0, 0.0),QPointF(radius*2.0/3, -1.1),QPointF(radius*2.0/3, 1.1),QPointF(0, 15.0)};//坐标选旋转painter.rotate(startAngle + angle * currentValue);//绘制多边形painter.drawPolygon(points, 4);//恢复坐标painter.restore();
}

6、绘制指针扫过的扇形

/** 画扇形
*/
void Widget::drawSpeedSector(QPainter &painter, int radius)
{//定义矩形区域QRect rentangle(-radius, -radius, radius*2, radius*2);//设置画笔无线条painter.setPen(Qt::NoPen);//设置画刷颜色painter.setBrush(QColor(255,0,0,80));//绘制扇形painter.drawPie(rentangle, (360-startAngle)*16, -angle*currentValue*16);
}

7、绘制渐变的内圆

/** 画渐变内圆
*/
void Widget::drawInnerEllipse(QPainter &painter, int radius)
{QRadialGradient radial(0,0,radius);//中心颜色radial.setColorAt(0.0,QColor(255,0,0,200));//外围颜色radial.setColorAt(1.0,QColor(0,0,0,100));//设置画刷渐变色painter.setBrush(radial);//画圆形painter.drawEllipse(QPoint(0,0), radius, radius);
}

Qt实现汽车仪表盘

在UI界面显示中，仪表盘的应用相对比较广泛，经常用于显示速度值，电压电流值等等，最终实现效果如下动态图片（文末提供给源工程下载）：

主要包含以下绘制步骤：

1. 绘制画布

   

   /** 绘制画布
   */
   void Widget::initCanvas(QPainter &painter)
   {//消除锯齿painter.setRenderHint(QPainter::Antialiasing,true);//设置底色painter.setBrush(QColor(0,0,0));painter.drawRect(rect());//平移坐标系原点位置QPoint center(rect().width()/2, rect().height()*0.6);painter.translate(center);
   }

   

   实现效果：

   

2. 画中心小圆

   

   /** 画小圆
   */
   void Widget::drawMiddleCircle(QPainter &painter, int radius)
   {//设置画笔颜色和宽度painter.setPen(QPen(QColor(255,255,255),3));//原点坐标（0，0）绘制半径为radius的圆painter.drawEllipse(QPoint(0,0), radius, radius);
   }

   

   实现效果：

   

3. 画仪表盘刻度线

   

   /** 画刻度
   */
   void Widget::drawScaleLine(QPainter &painter, int radius)
   {//总计60个小刻度，每一个小刻度的角度值angle = 240*1.0 / 60;//保存当前坐标painter.save();painter.setPen(QPen(Qt::white, 5));//设置起始刻度位置painter.rotate(startAngle);for(int i=0; i <=60; i++){if( i>=40 ){//第40个刻度后，绘制画笔修改成红色painter.setPen(QPen(Qt::red, 5));}if(i%5 == 0){//绘制长刻度painter.drawLine(radius-20, 0, radius-3, 0);}else{//绘制短刻度painter.drawLine(radius-8, 0, radius-3, 0);}//绘制完一个刻度旋转一次坐标painter.rotate(angle);}//恢复坐标painter.restore();painter.setPen(QPen(Qt::white, 5));
   }

   

   实现效果：

   

4. 绘制刻度值

   

   /** 画刻度值
   */
   void Widget::drawScaleValue(QPainter &painter, int radius)
   {//设置字体类型和大小QFont textFont("Arial",15);//设置粗体textFont.setBold(true);painter.setFont(textFont);int text_r = radius - 49;for(int i=0; i<=60; i++){if(i%5 == 0){if(i>=40){painter.setPen(QPen(Qt::red, 5));}//保存当前坐标系painter.save();int delX = qCos((210-angle*i)*M_PI/180) * text_r;int delY = qSin(qDegreesToRadians(210-angle*i)) * text_r;//平移坐标系painter.translate(QPoint(delX,-delY));//旋转坐标系painter.rotate(-120+angle*i);//写上刻度值，文字居中painter.drawText(-25,-25,50,30,Qt::AlignCenter,QString::number(i*4));//恢复坐标系painter.restore();}}painter.setPen(QPen(Qt::white, 5));
   }

   

   实现效果：

   

5. 绘制仪表指针

   

   /** 画指针
   */
   void Widget::drawPoint(QPainter &painter, int radius)
   {//保存当前坐标painter.save();//设置画刷颜色painter.setBrush(Qt::white);//设置画笔为无线条painter.setPen(Qt::NoPen);static const QPointF points[4] = {QPointF(0, 0.0),QPointF(radius*2.0/3, -1.1),QPointF(radius*2.0/3, 1.1),QPointF(0, 15.0)};//坐标选旋转painter.rotate(startAngle + angle * currentValue);//绘制多边形painter.drawPolygon(points, 4);//恢复坐标painter.restore();
   }

   

   实现效果：

   

6. 绘制指针扫过的扇形

   

   /** 画扇形
   */
   void Widget::drawSpeedSector(QPainter &painter, int radius)
   {//定义矩形区域QRect rentangle(-radius, -radius, radius*2, radius*2);//设置画笔无线条painter.setPen(Qt::NoPen);//设置画刷颜色painter.setBrush(QColor(255,0,0,80));//绘制扇形painter.drawPie(rentangle, (360-startAngle)*16, -angle*currentValue*16);
   }

   

   实现效果：

   

7. 绘制渐变的内圆

   

   /** 画渐变内圆
   */
   void Widget::drawInnerEllipse(QPainter &painter, int radius)
   {QRadialGradient radial(0,0,radius);//中心颜色radial.setColorAt(0.0,QColor(255,0,0,200));//外围颜色radial.setColorAt(1.0,QColor(0,0,0,100));//设置画刷渐变色painter.setBrush(radial);//画圆形painter.drawEllipse(QPoint(0,0), radius, radius);
   }

   

   实现效果：

   

8. 绘制黑色内圈（用于显示速度值和单位的背景圆）

   /** 画黑色内圈
   */
   void Widget::drawInnerEllipseBlack(QPainter &painter, int radius)
   {//设置画刷painter.setBrush(Qt::black);//绘制圆形painter.drawEllipse(QPoint(0,0), radius, radius);
   }

9. 绘制当前数值

   /** 绘制当前数值
   */
   void Widget::drawCurrentSpeed(QPainter &painter)
   {painter.setPen(Qt::white);//绘制数值QFont font("Arial", 28);font.setBold(true);painter.setFont(font);painter.drawText(QRect(-60,-60,120,70),Qt::AlignCenter,QString::number(currentValue*4));//绘制单位QFont font_u("Arial", 13);painter.setFont(font_u);painter.drawText(QRect(-60,-60,120,160),Qt::AlignCenter,"km/h");
   }

10. 绘制发光外壳

    /** 画外壳，发光外圈
    */
    void Widget::drawEllipseOutSkirts(QPainter &painter, int radius)
    {//设置扇形绘制区域QRect outAngle(-radius, -radius, 2*radius, 2*radius);painter.setPen(Qt::NoPen);//设置渐变色QRadialGradient radia(0,0,radius);radia.setColorAt(1,QColor(255,0,0,200));radia.setColorAt(0.97,QColor(255,0,0,120));radia.setColorAt(0.9,QColor(0,0,0,0));radia.setColorAt(0,QColor(0,0,0,0));painter.setBrush(radia);//绘制圆形painter.drawPie(outAngle,(360-150)*16,-angle*61*16);
    }

11. 绘制Logo图标

12. /** 画LOGO
    */
    void Widget::drawLogo(QPainter &painter, int radius)
    {//定义Logo绘制区域QRect rectLogo(-65,radius*0.38,130,50);painter.drawPixmap(rectLogo,QPixmap("./logo2.png"));
    }

13.