Image（图像）的用法

在 LVGL v8.2.0 中，Image（图像）控件用于显示图片，支持多种图像源：文件系统中的图片、C 语言数组（即嵌入式图像）、LVGL 内置的符号图标等。图像控件可以缩放、旋转、设置颜色变换等。

以下是 Image 的详细用法。

1. 基本创建与设置

c 复制代码

/* 创建图像控件，父对象为当前活动屏幕 */
lv_obj_t * img = lv_img_create(lv_scr_act());

/* 设置位置（可选） */
lv_obj_set_pos(img, 50, 50);

2. 设置图像源

图像源通过 lv_img_set_src 设置，支持三种类型：

2.1 从文件系统加载（需要开启文件系统支持）

c 复制代码

lv_img_set_src(img, "S:/images/logo.png");

文件路径依赖于你的文件系统挂载点。LVGL 本身不包含文件系统，需要移植 lv_fs 接口。

2.2 从 C 数组加载（嵌入式图像）

使用图像转换工具（如 LVGL 官方在线工具或 lv_img_conv.py）将图片转换为 C 数组，然后包含到代码中。

c 复制代码

/* 假设转换后的数组名为 my_image_map，声明如下： */
LV_IMG_DECLARE(my_image);

/* 设置图像源为 C 数组指针 */
lv_img_set_src(img, &my_image);

2.3 使用内置符号（字体图标）

LVGL 提供了一些内置的符号（需要启用字体和符号支持），可以像文本一样使用。

c 复制代码

lv_img_set_src(img, LV_SYMBOL_OK);     // 显示勾号图标
lv_img_set_src(img, LV_SYMBOL_CLOSE);  // 显示关闭图标

注意：符号本质上也是字体，所以需要确保当前主题的字体包含这些符号。

3. 调整图像大小与缩放

默认情况下，图像控件会以原始尺寸显示图像。你可以手动设置控件的大小，图像会自动适应（通过 lv_img_set_zoom 缩放或设置偏移）。

3.1 设置图像缩放（全局缩放）

c 复制代码

/* 缩放比例，256 表示原始大小，128 表示一半，512 表示两倍 */
lv_img_set_zoom(img, 256);   // 原始大小
lv_img_set_zoom(img, 128);   // 50%
lv_img_set_zoom(img, 512);   // 200%

3.2 固定控件大小并裁剪或居中

c 复制代码

/* 设置控件固定大小，超出部分将被裁剪 */
lv_obj_set_size(img, 100, 100);
/* 可以设置图像偏移来调整显示区域（当图像大于控件时） */
lv_img_set_offset_x(img, 10);
lv_img_set_offset_y(img, 10);

如果希望图像在控件内居中或拉伸，可以结合布局和样式。

4. 旋转与颜色变换

LVGL 支持图像的旋转（需要图像格式支持，如 LV_IMG_CF_TRUE_COLOR 或 LV_IMG_CF_RAW）。

c 复制代码

/* 旋转角度（0~3600，10 = 1度） */
lv_img_set_angle(img, 900);   // 旋转 90 度

/* 设置旋转中心点（相对于图像左上角的偏移，默认是图像中心） */
lv_img_set_pivot(img, 0, 0);  // 以左上角为中心旋转

颜色变换可以改变图像的色调，例如设置为红色调：

c 复制代码

/* 设置颜色变换（需要 LVGL 编译时启用 LV_USE_IMG_TRANSFORM） */
lv_img_set_recolor(img, lv_color_hex(0xFF0000));
lv_img_set_recolor_opa(img, LV_OPA_50);   // 强度 50%

5. 样式定制

图像控件支持背景、边框、圆角等样式，通常用于给图像添加装饰。

c 复制代码

/* 给图像添加圆角边框 */
lv_obj_set_style_border_width(img, 2, 0);
lv_obj_set_style_border_color(img, lv_color_hex(0x888888), 0);
lv_obj_set_style_radius(img, 8, 0);

6. 事件处理

图像控件可以添加事件，例如点击图像执行某个动作。

c 复制代码

static void img_event_cb(lv_event_t * e)
{
    LV_LOG_USER("Image clicked");
}

lv_obj_add_event_cb(img, img_event_cb, LV_EVENT_CLICKED, NULL);

7. 完整示例：显示一张图片并支持缩放旋转

c 复制代码

#include "lvgl.h"

/* 假设已经声明了一个 C 数组图像 my_image */
LV_IMG_DECLARE(my_image);

static void slider_event_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    lv_obj_t * img = lv_event_get_user_data(e);
    int16_t zoom = lv_slider_get_value(slider);
    /* 缩放范围 128~512，映射为 zoom 值 */
    lv_img_set_zoom(img, zoom);
}

void lv_example_image(void)
{
    /* 创建图像控件 */
    lv_obj_t * img = lv_img_create(lv_scr_act());
    lv_img_set_src(img, &my_image);
    lv_obj_center(img);
    lv_img_set_zoom(img, 256);

    /* 创建一个滑动条控制缩放 */
    lv_obj_t * slider = lv_slider_create(lv_scr_act());
    lv_slider_set_range(slider, 128, 512);
    lv_slider_set_value(slider, 256, LV_ANIM_OFF);
    lv_obj_align(slider, LV_ALIGN_BOTTOM_MID, 0, -20);
    lv_obj_set_size(slider, 200, 10);

    /* 添加滑动条事件，携带图像对象作为用户数据 */
    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, img);
}

8. 注意事项

图像解码器 ：LVGL 支持 PNG、JPG 等格式的解码器，但需要在 lv_conf.h 中启用对应宏（LV_USE_PNG、LV_USE_SJPG 等），并实现相应的解码器或链接外部库。
内存管理 ：大尺寸图像可能占用较多内存，可以使用 lv_img_cache 来缓存解码后的图像数据。
图像源生命周期：如果使用 C 数组图像，数组必须保持有效（通常放在全局或静态区域）。如果使用动态加载的图像，需要确保内存不被提前释放。
缩放质量：LVGL 的缩放是近邻算法，对于大比例缩放可能产生锯齿。可以使用更高精度的图像或预先缩放。

总结

使用 lv_img_create 创建图像控件。
通过 lv_img_set_src 设置图像源（文件、C 数组、符号）。
用 lv_img_set_zoom 缩放，lv_img_set_angle 旋转。
可以添加事件响应点击等交互。
通过样式定制边框、背景等外观。

掌握这些，你就可以在 LVGL 界面中灵活地展示图片了。如果需要显示 GIF 动画，LVGL 还提供了 lv_gif 控件（需要额外启用）。