图片是嵌入式界面的核心组成部分。本指南介绍 anyui-LIVE 在设计、代码生成和目标运行时三个阶段中如何处理、优化和使用图片。

概述

anyui-LIVE 把图片作为核心资源：导入项目的图片可供所有界面和组件复用，构建时会自动转换并嵌入固件。

图片处理流程分为三个阶段：

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

生成的图片代码如何产生，参见代码生成指南。

导入图片

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

  • PNG 是当前要求的图片格式，也适合同时需要透明通道和清晰边缘的 UI 素材。

导入后，图片即可在资源选择器中使用，能赋值给任意图片组件属性。

注意

请确认你导入和使用的每张图片都已获得相应授权，相关责任由你自行承担。

图片组件

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

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

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

优化

优化用于降低目标设备的 ROM 占用与内存开销。

格式转换

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

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

内存考虑

图片解码后会在显示期间占用 RAM。目标设备内存不足时，在 lv_conf.h 中增大 LV_MEM_SIZE：

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

相关指南

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