Qt 自定義控件 錶盤

概述:

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章