QT自定义控件--电池
原创
©著作权归作者所有:来自51CTO博客作者贝勒里恩的原创作品,请联系作者获取转载授权,否则将追究法律责任
文章目录
一、效果展示
二、绘制过程
2.1、控件分析
电池控件主要由电池框体和电量组成,电池会根据电量的高低改变电量的表示颜色,由此可以将任务分为三部分:绘制电池框体、绘制电量、实现电量增减表示
2.2、原理详解
电量表示是在电池框体绘制了一个填充了颜色的圆角矩形框体。如果把电量分为100份,可以设置一个power变量,取值为0-100,然后电量表示的圆角矩形框体在绘制时,宽度参考power变量就可以实现电量的多少与power挂钩。
在绘制框体时,宽度可以这样确定,( width()/100 ) * power
2.3、绘制框体
void Bettery_Painter::draw_frame(QPainter *painter)
{
painter->save();
QPen pen;
pen.setWidth(4);
pen.setBrush(buttery_frame);
painter->setPen(pen);
painter->setBrush(buttery_background);
painter->drawRoundedRect(space,space,width()-space*2,height()-space*2,5,5);
painter->setPen(Qt::NoPen);
painter->setBrush(buttery_head);
painter->drawRoundedRect(width()-space,height()/2-height()/5,space,height()/3,5,5);
painter->restore();
}
2.4、绘制电量
void Bettery_Painter::draw_power(QPainter *painter)
{
painter->save();
painter->setPen(Qt::NoPen);
if(power>0 && power<=20)
{
painter->setBrush(low_power);
}
else if(power>20 && power<=80)
{
painter->setBrush(mid_power);
}
else
{
painter->setBrush(high_power);
}
painter->drawRoundedRect(space,space,(width()-space*2)/100 * power,height()-space*2,5,5);
painter->restore();
}
2.3、其余代码
void Bettery_Painter::paintEvent(QPaintEvent *)
{
QPainter painter(this);
draw_frame(&painter);
draw_power(&painter);
}
void Bettery_Painter::set_power(int power)
{
this->power = power;
update();
}