图片是每个嵌入式界面不可或缺的部分。本指南介绍 anyui-LIVE 如何在设计、代码生成以及目标运行时阶段处理、优化和使用图片。
概述
anyui-LIVE 将图片视为一等资源。导入项目的图片可被所有界面和组件复用,并在构建时自动转换并嵌入到生成的固件中。
图片管线包含四个阶段:
- 导入 - 从本地文件将图片添加到资源池。
- 引用 - 将图片赋值给组件属性。
- 优化 - 配置转换与压缩选项。
- 生成 - 在生成代码中输出转换后的资源。
请参阅工作区指南了解图片资源在磁盘上的位置,参阅代码生成指南了解生成的图片代码如何产生。
导入图片
通过资源管理界面导入图片。支持的格式包括 PNG、JPEG、BMP 和 GIF。
- 对于同时包含透明通道和清晰边缘的 UI 素材,推荐使用 PNG。
- 对于色彩范围较大的照片内容,推荐使用 JPEG。
- 动画精灵支持使用 GIF。
导入后,图片会出现在资源选择器中,可赋值给任意图片组件属性。
注意
你有责任确保导入并使用的每张图片都具备相应的权利与许可。
图片组件
放置到界面上的图片引用资源池中的资源。组件暴露以下关键属性:
| 属性 | 描述 |
|---|---|
| Resource(资源) | 要显示的图片资源。 |
| X / Y | 图片在界面中的位置。 |
| Width / Height(宽/高) | 显示尺寸。固定时,图片不会被缩放。 |
| Opacity(透明度) | 0(完全透明)到 255(完全不透明)。 |
| Rotation(旋转) | 旋转角度(度)。 |
| Blend mode(混合模式) | 与背景合成时使用的混合模式。 |
当组件尺寸与源图片像素一致时,图片将按原始尺寸显示而不缩放。参见编辑器指南了解如何在画布上编辑这些属性。
优化
优化可减少目标设备上的 ROM 占用与内存消耗。
格式转换
在生成阶段,anyui-LIVE 会将源图片转换为针对 LVGL 优化的二进制格式。在资源设置中配置输出格式:
- 二进制(LVGL 原生) - 最小且最快的选项,由 LVGL 图片解码器直接解码。
- C 数组 - 图片以 C 源数组形式输出并编译进固件。
压缩
压缩以少量解码时间为代价换取显著的 ROM 节省。仅在目标设备具有足够 CPU 余量时启用压缩。
内存考虑
解码后的图片在显示期间保存在 RAM 中。若目标设备内存不足,请在 lv_conf.h 中增大 LV_MEM_SIZE:
#define LV_MEM_SIZE (8 * 1024U * 1024U) /*[bytes]*/