标题:Qt开源作品25-电池电量控件
作者:liudianwu
日期:2020-06-02 08:54
内容:
## 一、前言
现在这个时代，智能手机不要太流行，满大街都是，甚至连爷爷奶奶级别的人都会用智能手机，本次要写的控件就是智能手机中的电池电量表示控件，采用纯painter绘制，其实也可以采用贴图，我估计大部分手机上的都是采用贴图的形式，贴图有个好处就是程序员不用操心，drawimage即可，速度非常快。
至于本控件没有任何技术难点，就是自动计算当前设置的电量，根据宽度的比例划分100个等分，每个等分占用多少个像素，然后电量*该比例就是要绘制的电量的区域，可以设置报警电量，低于该变量整个电池电量区域红色显示。
**主要功能：**
1. 可设置开关按钮的样式 圆角矩形/内圆形/外圆形
2. 可设置选中和未选中时的背景颜色
3. 可设置选中和未选中时的滑块颜色
4. 可设置显示的文本
5. 可设置滑块离背景的间隔
6. 可设置圆角角度
7. 可设置是否显示动画过渡效果
## 二、代码思路
```c++
void Battery::paintEvent(QPaintEvent *)
{
//绘制准备工作,启用反锯齿
QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
//绘制边框
drawBorder(&painter);
//绘制背景
drawBg(&painter);
//绘制头部
drawHead(&painter);
}
void Battery::drawBorder(QPainter *painter)
{
painter->save();
double headWidth = width() / 10;
double batteryWidth = width() - headWidth;
//绘制电池边框
QPointF topLeft(5, 5);
QPointF bottomRight(batteryWidth, height() - 5);
batteryRect = QRectF(topLeft, bottomRight);
painter->setPen(QPen(borderColorStart, 5));
painter->setBrush(Qt::NoBrush);
painter->drawRoundedRect(batteryRect, borderRadius, borderRadius);
painter->restore();
}
void Battery::drawBg(QPainter *painter)
{
&nb ..
#1 [samhuilong 06-02 20:30]
我用typescript写的web版本电池控件的代码，来向原版致敬。
update(): void {
let context: CanvasRenderingContext2D = this.context;
let width: number = this.canvasWidth;
let height: number = this.canvasHeight;
context.clearRect(0, 0, width, height);
context.save();
//绘制边框
this.drawBorder(context);
//绘制背景
this.drawBg(context);
//绘制头部
this.drawHead(context);
context.restore();
}
protected drawBorder(context: CanvasRenderingContext2D): void {
context.save();
let width: number = this.canvasWidth;
let height: number = this.canvasHeight;
let headWidth: number = width / 10;
let batteryWidth: ..
#2 回 samhuilong 的帖子 [liudianwu 06-03 08:38]
samhuilong:我用typescript写的web版本电池控件的代码，来向原版致敬。
update(): void {
let context: CanvasRenderingContext2D = this.context;
.. (2020-06-02 20:30)
龙龙牛逼！