概述:
錶盤類控件,大概流程都是一樣的,參考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();
}