Qt [GC9-18]：液晶仪表素材准备及转速表和速度表实现 Qlabel绘制图形

基于Qt的汽车仪表模拟

由于我的希望是尽可能的复原仪表的动态，如果晚上找资源的话，那可定是会有很大的误差，所以我决定自己手动用PS描一个出来，这里就遇到一个极大的问题，网上资料中，所有GE仪表盘的图片有一堆一堆的，主要还是不一样，这个可能会根据车型不同而分类吧，我选了其中一个来模仿，通过看视频，看到，吉利GE这套车机的UI应该是花了大价钱的，不是友商可以比的，也许是我的技术不够，我一个仪表的指针就耗费大约一天的时间来模仿。最后还是达不到那种想要的效果，这一刻好像要一个美工呀

 

好歹辛苦两天总算有点结果。在给仪表填数的时候，我发现我根本就找不到能与这套UI中的数字配置的字体，经过询问大神，才得知吉利的英文字体都是定制的，中文自己采用兰亭细黑，由于没有字体，智能找相应的代替了，这里用到了“Square721 BT”这个字体来代替。

转数表和速度表目前的实现来看下效果(图片尺寸大，点开放大了，CSDN的压缩有损我颜值)

 

 

目前这个呢，只是一个咱试试的展示，尽然计划所三种模式，那就需要重新设计一下。目前这个仪表还只只有一个主界面，不过可以做一下基础工作了，

比如，得让我们的仪表可以移动呀，不然我的一个屏幕放不下。下面放上基础代码。所以这片就又要水一下了，哈哈哈

 

/*
     * 鼠标按下事件
     */
    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上绘制图形大致流程如下

 

代码如下，首先给我的Qlabel注册事件

 

ui->label_rotateSpeed->installEventFilter(this);
ui->label_carSpeed->installEventFilter(this);

第二部，编写事件过滤器，这里声明我就不写了，直接写代码实现部分，注意返回值是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));
}

以上两个函数其实实现方式是一模一样的，就是作用的对象不同，和旋转角度的算法不一样而已。好了，今天又水一篇

2019/07/25 17:09