版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liuzhezhe111/article/details/82055442
之前分享过一篇文章:
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地址:
显示的时钟已经封装好的代码,如果不想要实例中的样式则可以、自己直接绘图把程序中的换掉什么样的字体都可以实现了。只要您可以会出来就可以贴上去。