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