Qt 用貼圖的方式實現QLcdNumber顯示的電子時鐘

之前分享過一篇文章：

QLCDNumber 顯示樣式（例如：電子手錶有背景繪圖）有興趣的話可以查看一下。

https://blog.csdn.net/liuzhezhe111/article/details/82050828

今天分享的是一個貼圖的方式實現的：

實現思路：用一張圖片如下圖：

                  

把這張連續的圖片一次解析出來、然後起一個定時器進行計數試下下面的效果。這個圖片可以直接替換爲自己想要的自定義樣式什麼字樣都可以。因爲本人美工能力有限，繪圖不太好看。

效果：

實現以及相關重點知識：

1.解析圖片信息：

void LcdNumber::SetPixmap(const QPixmap &pix)
{
    m_vecPixmap.clear();
    m_imgWith = pix.width()/PIXMAP_NUMBER;
    m_imgHeight = pix.height();
    if(m_showModel == ShowModel::colon)
        this->setMinimumSize(m_imgWith*3,m_imgHeight);
    else
        this->setMinimumSize(m_imgWith*2,m_imgHeight);
    for(int i = 0; i< PIXMAP_NUMBER ; i++)
    {
        qDebug() << "i" << i << ":" << i*m_imgWith << "W:" << m_imgWith << m_imgHeight;
        m_vecPixmap.append(pix.copy(QRect(i*m_imgWith,0,m_imgWith,m_imgHeight)));
    }
    SetValue(0);
}

 2.繪圖核心代碼：

void LcdNumber::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);

    if(m_showModel == ShowModel::point)
    {
        painter.drawPixmap(0,0,m_imgWith,m_imgHeight,m_LeftPixmap);
        painter.drawPixmap(m_imgWith,0,m_imgWith,m_imgHeight,m_RightPixmap);
    }
    else if(m_showModel == ShowModel::colon)
    {
        painter.drawPixmap(0,0,m_imgWith,m_imgHeight,m_vecPixmap.at(10));
        painter.drawPixmap(m_imgWith,0,m_imgWith,m_imgHeight,m_LeftPixmap);
        painter.drawPixmap(m_imgWith*2,0,m_imgWith,m_imgHeight,m_RightPixmap);
    }
    else
    {
        painter.drawPixmap(0,0,m_imgWith,m_imgHeight,m_LeftPixmap);
        painter.drawPixmap(m_imgWith,0,m_imgWith,m_imgHeight,m_RightPixmap);
    }

    QWidget::paintEvent(event);
}

 

3.定時器計算核心代碼：

void LcdNumber::SetValue(int number)
{
    if(number<10)
    {
        m_LeftPixmap = m_vecPixmap[0];
        m_RightPixmap = m_vecPixmap[number];
    }
    else if(number < 100)
    {
        int s  = number/10;
        int yu = number%10;

        m_LeftPixmap = m_vecPixmap[s];
        m_RightPixmap = m_vecPixmap[yu];
    }
    update();
}

代碼：

Demo地址：

顯示的時鐘已經封裝好的代碼，如果不想要實例中的樣式則可以、自己直接繪圖把程序中的換掉什麼樣的字體都可以實現了。只要您可以會出來就可以貼上去。

https://download.csdn.net/download/liuzhezhe111/10626849