图片(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 设置为 256LV_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)

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

按键

对象类型不处理任何键。

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

范例

图片来自于数组

http://photos.100ask.net/lvgl/04_widgets/14_img/01_lv_ex_img_01.png

展示的图片来自于变量

上述效果的示例代码:

 1    #include "../../../lv_examples.h"
 2    #if LV_USE_IMG
 3
 4    /* Find the image here: https://github.com/lvgl/lv_examples/tree/master/assets */
 5    LV_IMG_DECLARE(img_cogwheel_argb);
 6
 7    void lv_ex_img_1(void)
 8    {
 9            lv_obj_t * img1 = lv_img_create(lv_scr_act(), NULL);
10            lv_img_set_src(img1, &img_cogwheel_argb);
11            lv_obj_align(img1, NULL, LV_ALIGN_CENTER, 0, -20);
12
13            lv_obj_t * img2 = lv_img_create(lv_scr_act(), NULL);
14            lv_img_set_src(img2, LV_SYMBOL_OK "Accept");
15            lv_obj_align(img2, img1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
16    }
17
18    #endif

给图像重新着色

http://photos.100ask.net/lvgl/04_widgets/14_img/02_lv_ex_img_02.png

给图像重新着色

上述效果的示例代码:

 1    #include "../../../lv_examples.h"
 2    #if LV_USE_IMG
 3
 4    #define SLIDER_WIDTH 20
 5
 6    static void create_sliders(void);
 7    static void slider_event_cb(lv_obj_t * slider, lv_event_t event);
 8
 9    static lv_obj_t * red_slider, * green_slider, * blue_slider, * intense_slider;
10    static lv_obj_t * img1;
11    LV_IMG_DECLARE(img_cogwheel_argb);
12
13    void lv_ex_img_2(void)
14    {
15            /*Create 4 sliders to adjust RGB color and re-color intensity*/
16            create_sliders();
17
18            /* Now create the actual image */
19            img1 = lv_img_create(lv_scr_act(), NULL);
20            lv_img_set_src(img1, &img_cogwheel_argb);
21            lv_obj_align(img1, NULL, LV_ALIGN_IN_RIGHT_MID, -20, 0);
22    }
23
24    static void slider_event_cb(lv_obj_t * slider, lv_event_t event)
25    {
26            if(event == LV_EVENT_VALUE_CHANGED) {
27                    /* Recolor the image based on the sliders' values */
28                    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));
29                    lv_opa_t intense = lv_slider_get_value(intense_slider);
30                    lv_obj_set_style_local_image_recolor_opa(img1, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, intense);
31                    lv_obj_set_style_local_image_recolor(img1, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, color);
32            }
33    }
34
35    static void create_sliders(void)
36    {
37            /* Create a set of RGB sliders */
38            /* Use the red one as a base for all the settings */
39            red_slider = lv_slider_create(lv_scr_act(), NULL);
40            lv_slider_set_range(red_slider, 0, 255);
41            lv_obj_set_size(red_slider, SLIDER_WIDTH, 200); /* Be sure it's a vertical slider */
42            lv_obj_set_style_local_bg_color(red_slider, LV_SLIDER_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_RED);
43            lv_obj_set_event_cb(red_slider, slider_event_cb);
44
45            /* Copy it for the other three sliders */
46            green_slider = lv_slider_create(lv_scr_act(), red_slider);
47            lv_obj_set_style_local_bg_color(green_slider, LV_SLIDER_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_LIME);
48
49            blue_slider = lv_slider_create(lv_scr_act(), red_slider);
50            lv_obj_set_style_local_bg_color(blue_slider, LV_SLIDER_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_BLUE);
51
52            intense_slider = lv_slider_create(lv_scr_act(), red_slider);
53            lv_obj_set_style_local_bg_color(intense_slider, LV_SLIDER_PART_INDIC, LV_STATE_DEFAULT, LV_COLOR_GRAY);
54            lv_slider_set_value(intense_slider, 255, LV_ANIM_OFF);
55
56            lv_obj_align(red_slider, NULL, LV_ALIGN_IN_LEFT_MID, 20, 0);
57            lv_obj_align(green_slider, red_slider, LV_ALIGN_OUT_RIGHT_MID, 20, 0);
58            lv_obj_align(blue_slider, green_slider, LV_ALIGN_OUT_RIGHT_MID, 20, 0);
59            lv_obj_align(intense_slider, blue_slider, LV_ALIGN_OUT_RIGHT_MID, 20, 0);
60    }
61
62    #endif

相关API

TODO