anyuianyui
anyui
anyui-LIVE
反馈问题
  • English
  • 简体中文
anyui
anyui-LIVE
反馈问题
  • English
  • 简体中文
  • 介绍

    • 介绍
  • 快速开始

    • 快速开始
  • 工作区

    • 工作区
  • 编辑器

    • 概览
    • 工具栏
    • 导航器
    • 检查器
    • 状态栏
    • 设置
    • 画布
    • 预览
  • 主题

    • 图片
    • 字体
    • 布局
    • 动态 LVGL 版本
    • 覆盖屏幕尺寸
    • 代码生成
    • 移植

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

概述

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

图片管线包含四个阶段:

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

请参阅工作区指南了解图片资源在磁盘上的位置,参阅代码生成指南了解生成的图片代码如何产生。

导入图片

通过资源管理界面导入图片。支持的格式包括 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]*/

相关指南

  • 字体 - 与图片资源一同管理排版。
  • 工作区 - 图片资源的存放位置。
  • 概览 - 在画布上分配与编辑图片属性。
  • 预览 - 在生成前预览图片渲染效果。
  • 代码生成 - 图片资源如何成为生成代码。
Next
字体