LVGL 图片|极客笔记

图片(lv_img)图像是从Flash（作为数组）或从外部作为文件显示的基本对象。图像也可以显示符号（ LV_SYMBOL_... ）。

使用图像解码器接口，也可以支持自定义图像格式。

零件和样式

图像只有一个称为 LV_IMG_PART_MAIN 的主要部分，该部分使用典型的背景样式属性绘制背景矩形和图像属性。填充值用于使背景实际变大。（它不会更改图像的实际大小，但仅在绘图期间应用大小修改）

用法

图片来源

为了提供最大的灵活性，图像的来源可以是：

代码中的变量（带有像素的C数组）。
外部存储的文件（例如SD卡上的文件）。
符号文字。

要设置图像的来源，调用 lv_img_set_src(img, src) 。

要从PNG，JPG或BMP图像生成像素阵列，请使用在线图像转换器工具，并使用其指针设置转换后的图像： lv_img_set_src(img1, &converted_img_var) ;要使变量在C文件中可见，需要使用 LV_IMG_DECLARE(converted_img_var) 进行声明。

要使用 外部文件 ，还需要使用在线转换器工具转换图像文件，但是现在应该选择二进制输出格式。还需要使用LVGL的文件系统模块，并为基本文件操作注册具有某些功能的驱动程序。进入文件系统以了解更多信息。要设置来自文件的图像，请使用 lv_img_set_src(img, "S:folder1/my_img.bin") 。

可以类似于 标签_ 设置符号。在这种情况下，图像将根据样式中指定的字体呈现为文本。它可以使用轻量级的单色“字母”代替实际图像。可以设置符号，例如 lv_img_set_src(img1, LV_SYMBOL_OK) 。

标签作为图片

图像和标签有时用于传达相同的内容。例如，描述按钮的作用。因此，图像和标签可以互换。为了处理这些图像，甚至可以使用 LV_SYMBOL_DUMMY 作为文本的前缀来显示文本。例如， lv_img_set_src(img, LV_SYMBOL_DUMMY "Some text") .

透明度

内部（可变）和外部图像支持2种透明度处理方法：

Chrome keying – 具有 LV_COLOR_TRANSP (lv_conf.h) 颜色的像素将是透明的。
Alpha byte – 一个alpha字节被添加到每个像素。

调色板和Alpha指数

除了本色（RGB）颜色格式外，还支持以下格式：

Indexed – 索引，图像具有调色板。
Alpha indexed – Alpha索引，仅存储Alpha值。

可以在字体转换器中选择这些选项。要了解有关颜色格式的更多信息，请阅读 图像(images) 部分。

重新着色

根据像素的亮度，可以在运行时将图像重新着色为任何颜色。在不存储同一图像的更多版本的情况下，显示图像的不同状态（选中，未激活，按下等）非常有用。可以通过在 LV_OPA_TRANSP （不重新着色，值：0）和 LV_OPA_COVER （完全重新着色，值：255）之间设置 img.intense 来启用该样式。默认值为 LV_OPA_TRANSP ，因此此功能被禁用。

自动调整尺寸

调用 lv_img_set_auto_size(image, true) 函数，将设置图像对象的大小自动设置为图像源的宽度和高度。如果启用了自动调整大小，则在设置新文件时，对象大小将自动更改。以后，可以手动修改大小。如果图像不是屏幕，默认情况下将启用自动调整大小。

镶嵌

使用 lv_img_set_offset_x(img, x_ofs) `` 和 ``lv_img_set_offset_y(img, y_ofs) ，可以向显示的图像添加一些偏移。如果对象尺寸小于图像源尺寸，则很有用。使用offset参数，可以通过对x或y偏移量进行动画处理来创建纹理图集或“运行中的图像”效果。

转换

使用 lv_img_set_zoom(img, factor) 图像将被缩放。将 factor 设置为 256 或 LV_IMG_ZOOM_NONE 以禁用缩放。较大的值将放大图像（例如512倍），较小的值将缩小图像（例如 128 倍）。分数刻度也适用。例如： 281 为10％放大。

要旋转图像，请使用 lv_img_set_angle(img, angle) 。角度精度为0.1度，因此对于45.8°设置458。

默认情况下，旋转的枢轴点是图像的中心。可以使用 lv_img_set_pivot(img, pivot_x, pivot_y) 进行更改。 0;0是左上角。

可以使用 lv_img_set_antialias(img, true/false) 调整转换的质量。启用抗锯齿功能后，转换的质量更高，但速度较慢。

转换需要整个图像可用。因此，可以转换索引图像（ LV_IMG_CF_INDEXED_... ），仅alpha图像（ LV_IMG_CF_ALPHA_... ）或文件中的图像。换句话说，转换仅适用于存储为C数组的真彩色图像，或者自定义图像解码器返回整个图像。

注意，图像对象的真实坐标在变换期间不会改变。即 lv_obj_get_width/height/x/y() 将返回原始的非缩放坐标。

旋转

图像可以旋转

事件

默认情况下，禁用图像对象的单击，仅发送与非输入设备相关的常规事件。如果要捕获图像对象的所有一般事件，则应使用以下命令启用其单击： lv_obj_set_click(img, true)

了解有关事件的更多内容。

按键

对象类型不处理任何键。

了解有关按键的更多内容。

范例

图片来自于数组

LVGL图片

展示的图片来自于变量

上述效果的示例代码：

#include "../../../lv_examples.h"
#if LV_USE_IMG

/* Find the image here: https://github.com/lvgl/lv_examples/tree/master/assets */
LV_IMG_DECLARE(img_cogwheel_argb);

void lv_ex_img_1(void)
{
    lv_obj_t * img1 = lv_img_create(lv_scr_act(), NULL);
    lv_img_set_src(img1, &img_cogwheel_argb);
    lv_obj_align(img1, NULL, LV_ALIGN_CENTER, 0, -20);

    lv_obj_t * img2 = lv_img_create(lv_scr_act(), NULL);
    lv_img_set_src(img2, LV_SYMBOL_OK "Accept");
    lv_obj_align(img2, img1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
}

#endif

给图像重新着色

LVGL图片

给图像重新着色

上述效果的示例代码：

#include "../../../lv_examples.h"
#if LV_USE_IMG

#define SLIDER_WIDTH 20

static void create_sliders(void);
static void slider_event_cb(lv_obj_t * slider, lv_event_t event);

static lv_obj_t * red_slider, * green_slider, * blue_slider, * intense_slider;
static lv_obj_t * img1;
LV_IMG_DECLARE(img_cogwheel_argb);

void lv_ex_img_2(void)
{
    /*Create 4 sliders to adjust RGB color and re-color intensity*/
    create_sliders();

    /* Now create the actual image */
    img1 = lv_img_create(lv_scr_act(), NULL);
    lv_img_set_src(img1, &img_cogwheel_argb);
    lv_obj_align(img1, NULL, LV_ALIGN_IN_RIGHT_MID, -20, 0);
}

static void slider_event_cb(lv_obj_t * slider, lv_event_t event)
{
    if(event == LV_EVENT_VALUE_CHANGED) {
        /* Recolor the image based on the sliders' values */
        lv_color_t color  = lv_color_make(lv_slider_get_value(red_slider), lv_slider_get_value(green_slider), lv_slider_get_value(blue_slider));
        lv_opa_t intense = lv_slider_get_value(intense_slider);
        lv_obj_set_style_local_image_recolor_opa(img1, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, intense);
        lv_obj_set_style_local_image_recolor(img1, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, color);
    }
}

static void create_sliders(void)
{
    /* Create a set of RGB sliders */
    /* Use the red one as a base for all the settings */
    red_slider = lv_slider_create(lv_scr_act(), NULL);
    lv_slider_set_range(red_slider, 0, 255);
    lv_obj_set_size(red_slider, SLIDER_WIDTH, 200); /* Be sure it's a vertical slider */
    lv_obj_set_style_local_bg_color(red_slider, LV_SLIDER_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_RED);
    lv_obj_set_event_cb(red_slider, slider_event_cb);

    /* Copy it for the other three sliders */
    green_slider = lv_slider_create(lv_scr_act(), red_slider);
    lv_obj_set_style_local_bg_color(green_slider, LV_SLIDER_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_LIME);

    blue_slider = lv_slider_create(lv_scr_act(), red_slider);
    lv_obj_set_style_local_bg_color(blue_slider, LV_SLIDER_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_BLUE);

    intense_slider = lv_slider_create(lv_scr_act(), red_slider);
    lv_obj_set_style_local_bg_color(intense_slider, LV_SLIDER_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_GRAY);
    lv_slider_set_value(intense_slider, 255, LV_ANIM_OFF);

    lv_obj_align(red_slider, NULL, LV_ALIGN_IN_LEFT_MID, 20, 0);
    lv_obj_align(green_slider, red_slider, LV_ALIGN_OUT_RIGHT_MID, 20, 0);
    lv_obj_align(blue_slider, green_slider, LV_ALIGN_OUT_RIGHT_MID, 20, 0);
    lv_obj_align(intense_slider, blue_slider, LV_ALIGN_OUT_RIGHT_MID, 20, 0);
}

#endif