概述:
表盘类控件,大概流程都是一样的,参考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();
}