图片是每个嵌入式界面不可或缺的部分。本指南介绍 anyui-LIVE 如何在设计、代码生成以及目标运行时阶段处理、优化和使用图片。

概述

anyui-LIVE 将图片视为一等资源。导入项目的图片可被所有界面和组件复用，并在构建时自动转换并嵌入到生成的固件中。

图片管线包含四个阶段：

  1. 导入 - 从本地文件将图片添加到资源池。
  2. 引用 - 将图片赋值给组件属性。
  3. 生成 - 在生成代码中输出转换后的资源。

参阅代码生成指南了解生成的图片代码如何产生。

导入图片

在资源视图中导入图片。当前支持 PNG 格式。

  • 对于同时包含透明通道和清晰边缘的 UI 素材，推荐使用 PNG。

导入后，图片会出现在资源选择器中，可赋值给任意图片组件属性。

注意

你有责任确保导入并使用的每张图片都具备相应的权利与许可。

图片组件

放置到界面上的图片引用资源池中的资源。组件暴露以下关键属性：

属性描述
Resource（资源）要显示的图片资源。
X / Y图片在界面中的位置。
Width / Height（宽/高）显示尺寸。固定时，图片不会被缩放。
Opacity（透明度）0（完全透明）到 255（完全不透明）。
Rotation（旋转）旋转角度（度）。
Blend mode（混合模式）与背景合成时使用的混合模式。

当组件尺寸与源图片像素一致时，图片将按原始尺寸显示而不缩放。参见编辑器指南了解如何在画布上编辑这些属性。

格式转换

在生成阶段，anyui-LIVE 会将源图片转换为针对 LVGL 优化的 C 源数组形式输出。在资源设置中配置输出格式：

  • C 数组 - 图片以 C 源数组形式输出并编译进固件。

内存考虑

解码后的图片在显示期间保存在 RAM 中。若目标设备内存不足，请在 lv_conf.h 中增大 LV_MEM_SIZE：

#define LV_MEM_SIZE    (8 * 1024U * 1024U)          /*[bytes]*/

相关指南

  • 资源管理 - 导入图片组件使用的图片。
  • 字体库 - 与图片资源一同管理排版。
  • 概览 - 在画布上分配与编辑图片属性。
  • 预览 - 在生成前预览图片渲染效果。
  • 代码生成 - 图片资源如何成为生成代码。