异形进度条控件。通过多边形来定义进度条的形状。
代码地址:https://gitee.com/zlgopen/awtk-widget-progress-polygon
特性
- 通过多边形定义进度条的形状
- 支持通过图片来定义进度条的背景
- 支持通过图片来定义进度条的前景
使用图片填充比使用颜色填充消耗更多的内存和 CPU,所以在性能要求较高的场景下,尽量使用颜色填充。
用法
多边形的描述用一组 5 元组表示,每个 5 元组包含:
- value: 进度值 (0-1), 0 表示进度为 0,1 表示进度完成
- x1: 第一个点的 x 坐标。如果取值 [0,1] 之间,则实际的值为 x1 * width。
- y1: 第一个点的 y 坐标。如果取值 [0,1] 之间,则实际的值为 y1 * height。
- x2: 第二个点的 x 坐标。如果取值 [0,1] 之间,则实际的值为 x2 * width。
- y2: 第二个点的 y 坐标。如果取值 [0,1] 之间,则实际的值为 y2 * height。
它的表示进度为 value 时,进度条对应的上下或左右两个点的坐标。
元组的个数不限,对于直线,描述转折点即可,对于曲线形状,采样就要多一些,才能画出更平滑的曲线。
使用图片填充时,把图片不需要的部分做成透明色,则坐标描述不需要太精确,将图片有用部分包括在其中即可。
示例 1 - 传统矩形进度条
- 进度为0时,上下的坐标分别为 (0,0) 和 (0,1)
- 进度为1时,上下的坐标分别为 (1,0) 和 (1,1)
<progress_polygon polygon="(0, 0,0,0,1)(1, 1,0,1,1)"/>
示例 2 - 三角形进度条
- 进度为0时,上下的坐标分别为 (0,1) 和 (0,1)
- 进度为1时,上下的坐标分别为 (1,0) 和 (1,1)
<progress_polygon polygon="(0, 0,1,0,1)(1, 1,0,1,1)" />
准备
- 获取 awtk 并编译
git clone https://github.com/zlgopen/awtk.git
cd awtk; scons; cd -
运行
- 生成示例代码的资源
python scripts/update_res.py all
也可以使用 Designer 打开项目,之后点击 “打包” 按钮进行生成;
如果资源发生修改,则需要重新生成资源。
如果 PIL 没有安装,执行上述脚本可能会出现如下错误:
Traceback (most recent call last):
...
ModuleNotFoundError: No module named 'PIL'
请用 pip 安装:
pip install Pillow
- 编译
- 编译 PC 版本
scons
- 编译 LINUX FB 版本
scons LINUX_FB=true
完整编译选项请参考 编译选项
- 运行
./bin/demo
文档
完善自定义控件