天天看點

Qt [GC9-18]:液晶儀表素材準備及轉速表和速度表實作 Qlabel繪制圖形

Qt [GC9-18]:液晶儀表素材準備及轉速表和速度表實作 Qlabel繪制圖形

由于我的希望是盡可能的複原儀表的動态,如果晚上找資源的話,那可定是會有很大的誤差,是以我決定自己手動用PS描一個出來,這裡就遇到一個極大的問題,網上資料中,所有GE儀表盤的圖檔有一堆一堆的,主要還是不一樣,這個可能會根據車型不同而分類吧,我選了其中一個來模仿,通過看視訊,看到,吉利GE這套車機的UI應該是花了大價錢的,不是友商可以比的,也許是我的技術不夠,我一個儀表的指針就耗費大約一天的時間來模仿。最後還是達不到那種想要的效果,這一刻好像要一個美工呀

Qt [GC9-18]:液晶儀表素材準備及轉速表和速度表實作 Qlabel繪制圖形

好歹辛苦兩天總算有點結果。在給儀表填數的時候,我發現我根本就找不到能與這套UI中的數字配置的字型,經過詢問大神,才得知吉利的英文字型都是定制的,中文自己采用蘭亭細黑,由于沒有字型,智能找相應的代替了,這裡用到了“Square721 BT”這個字型來代替。

轉數表和速度表目前的實作來看下效果(圖檔尺寸大,點開放大了,CSDN的壓縮有損我顔值)

Qt [GC9-18]:液晶儀表素材準備及轉速表和速度表實作 Qlabel繪制圖形

目前這個呢,隻是一個咱試試的展示,盡然計劃所三種模式,那就需要重新設計一下。目前這個儀表還隻隻有一個主界面,不過可以做一下基礎工作了,

比如,得讓我們的儀表可以移動呀,不然我的一個螢幕放不下。下面放上基礎代碼。是以這片就又要水一下了,哈哈哈

/*
     * 滑鼠按下事件
     */
    void mousePressEvent(QMouseEvent *event);
    /*
     * 滑鼠移動事件
     */
    void mouseMoveEvent(QMouseEvent *event);
    /*
     * 滑鼠松開事件
     */
    void mouseReleaseEvent(QMouseEvent *event);
    /*
     * 鍵盤事件
     */
    void keyReleaseEvent(QKeyEvent *event);      
/*
 * 滑鼠按下事件
 */
void MeterDisplay::mousePressEvent(QMouseEvent *event)
{
    point = event->globalPos();
}
/*
 * 滑鼠移動事件
 */
void MeterDisplay::mouseMoveEvent(QMouseEvent *event)
{
    int dx = event->globalX() - point.x();
    int dy = event->globalY() - point.y();
    point = event->globalPos();
    this->move(this->x()+dx,this->y()+dy);
}
/*
 * 滑鼠松開事件
 */
void MeterDisplay::mouseReleaseEvent(QMouseEvent *event)
{
    int dx = event->globalX() - point.x();
    int dy = event->globalY() - point.y();
    this->move(this->x()+dx,this->y()+dy);
}
/*
 * 鍵盤松開事件
 * ESC鍵和Q鍵關閉控制台程式
 */
void MeterDisplay::keyReleaseEvent(QKeyEvent *event)
{
    if(event->key() == Qt::Key_Escape || event->key() == Qt::Key_Q)
    {
        this->close();
    }
}      

剩下的就是這個兩個表了

這裡我們用到了Qt 繪制函數,這裡我将在Qlabe上繪制我們的指針。使用Qt自己在Qlabel上繪制圖形大緻流程如下

Qt [GC9-18]:液晶儀表素材準備及轉速表和速度表實作 Qlabel繪制圖形

第二部,編寫事件過濾器,這裡聲明我就不寫了,直接寫代碼實作部分,注意傳回值是bool。

/*
 * 事件過濾器
 */
bool MeterDisplay::eventFilter(QObject *watched, QEvent *event)
{
 
    if(watched == ui->label_rotateSpeed && event->type() == QEvent::Paint)
    {
        draw_RotatetSpeed(m_RotateSpeed);
    }
 
    if(watched == ui->label_carSpeed && event->type() == QEvent::Paint)
    {
        draw_CarSpeed(m_CarSpeed);
    }
    return QWidget::eventFilter(watched,event);
}      

第三部,實作我的繪制函數,這裡有兩個,就是事件過濾器中的那兩個函數 ,同樣,聲明我就不寫了,直接寫實作代碼

/*
 * 繪制車速
 */
void MeterDisplay::draw_CarSpeed(int carSpeed)
{
    QPainter painter(ui->label_carSpeed);
    painter.setRenderHint((QPainter::SmoothPixmapTransform));
    painter.setRenderHint(QPainter::HighQualityAntialiasing);
    painter.translate(310,310);
    painter.save();
    painter.rotate(-132+22*carSpeed/20);
    painter.drawPixmap(-281,-310,562,620,QPixmap(":/MeterDisplay/Resources/Images/MeterDisplay/pointer.png"));
    painter.restore();
    ui->label_carSpeedNumber->setText(QString::number(carSpeed,10));
}      

以上兩個函數其實實作方式是一模一樣的,就是作用的對象不同,和旋轉角度的算法不一樣而已。好了,今天又水一篇

Qt [GC9-18]:液晶儀表素材準備及轉速表和速度表實作 Qlabel繪制圖形

繼續閱讀