ESP32 LVGL8.1 ——img 图片 (img 20)

最新推荐文章于 2024-06-19 14:39:44 发布

请叫我啸鹏

最新推荐文章于 2024-06-19 14:39:44 发布

阅读量5.6k

点赞数 3

分类专栏： LVGL 成长笔记文章标签： gui 嵌入式经验分享

本文链接：https://blog.csdn.net/believe666/article/details/122194177

版权

LVGL 成长笔记专栏收录该内容

31 篇文章 184 订阅

订阅专栏

提示：本博客作为学习笔记，有错误的地方希望指正

一、img 简介

1.1概述 Overview

图像是在flash中(以数组形式)或外部以文件形式显示图像的基本对象。图像也可以显示符号(LV_SYMBOL_…)。
使用图像解码器接口，还可以支持自定义图像格式。

1.2部分和风格 Parts and Styles

LV_PART_MAIN一个背景矩形，它使用典型的背景样式属性和使用图像样式属性的图像本身。

1.3使用 Usage

1.3.1图片资源 Image source

为了提供最大的灵活性，图像的来源可以是:
•代码中的一个变量(一个带有像素的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)这样的符号。

1.3.2标签作为图片 Label as an image

图像和标签有时被用来传达同样的东西。例如，描述按钮的功能。因此，图像和标签是可以互换的，即图像可以使用LV_SYMBOL_DUMMY作为文本的前缀来显示文本。例如，lv_img_set_src(img,LV_SYMBOL_DUMMY“Some text”)。

1.3.3透明度 Transparency

内部(变量)和外部图像支持2种透明处理方法:
• Chrome keying -像素与LV_COLOR_CHROMA_KEY (lv_conf.h)颜色将是透明的。
• Alpha byte -一个alpha字节被添加到每个包含像素不透明度的像素中

1.3.4调色板和Alpha索引 Palette and Alpha index

除RGB (True color)颜色格式外，还支持以下格式:
• Indexed -图像有一个调色板。
• Alpha indexed - 只存储alpha值。
这些选项可以在图像转换器中选择。要了解更多关于颜色格式，请阅读图像部分。

1.3.5 重新着色 Recolor

一种颜色可以以给定的强度混合到图像的每个像素上。这是非常有用的显示不同的状态(勾选，非活动，按下，等)的图像，而不存储更多版本的相同的图像。该特性可以通过在LV_OPA_TRANSP(无重色，值:0)和LV_OPA_COVER(全重色，值:255)之间设置img_recolor_opa来启用。默认值是LV_OPA_TRANSP，因此禁用此特性。
要混合的颜色由img_recolor设置。

1.3.6自动尺寸 Auto-size

当图像对象的宽度或高度设置为LV_SIZE_CONTENT时，对象的大小将根据图像源在各自方向上的大小设置。

1.3.7马赛克 Mosaic

如果物体的大小在任何方向上都大于图像的大小，那么图像就会像马赛克一样重复。这是一个非常有用的功能，可以从一个非常窄的源创建一个大的图像。例如，你可以有一张带有特殊渐变的300 x 5的图像，并使用马赛克特性将其设置为墙纸。

1.3.8偏移 Offset

使用lv_img_set_offset_x(img, x_ofs)和lv_img_set_offset_y(img, y_ofs)，可以为显示的图像添加一些偏移量。如果目标尺寸小于图像源尺寸，这是有用的。使用偏移参数，可以通过动画x或y偏移来创建纹理图集或“运行图像”效果。

1.4转换 Transformations

使用lv_img_set_zoom(img, factor)将放大图像。将factor设置为256或LV_IMG_ZOOM_NONE以禁用缩放。较大的值会放大图像(如512倍大小)，较小的值会缩小图像(如128倍大小)。分数尺度也适用。例281，放大10%。256或LV_ZOOM_IMG_NONE无缩放，大于256放大，小于256缩放，128属于缩小一半，512放大两倍。
使用lv_img_set_angle(img, angle)旋转图像。角度有0.1度精度，所以45.8°设置为458。transform_zoom和transform_angle样式属性也用于确定最终的缩放和角度。
默认情况下，旋转的枢轴点是图像的中心。可以使用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()将返回原始的非缩放坐标。

1.5事件 Events

图像对象不发送任何特.殊事件。

1.6按键 Keys

对象类型不处理任何key。

二、IMG API

lv_obj_t * lv_img_create(lv_obj_t * parent);							//创建一个图像对象
void lv_img_set_src(lv_obj_t * obj, const void * src);					//设置图像数据显示在对象上
void lv_img_set_offset_x(lv_obj_t * obj, lv_coord_t x);					//设置图像源的偏移量，这样图像将从新的原点显示。
void lv_img_set_offset_y(lv_obj_t * obj, lv_coord_t y);					//设置图像源的偏移量。
void lv_img_set_angle(lv_obj_t * obj, int16_t angle);					//设置图像的旋转角度。
void lv_img_set_pivot(lv_obj_t * obj, lv_coord_t x, lv_coord_t y);		//设置图像的旋转中心。
void lv_img_set_zoom(lv_obj_t * obj, uint16_t zoom);					//设置图像的缩放系数。
void lv_img_set_antialias(lv_obj_t * obj, bool antialias);				//启用/禁用抗锯齿的转换(旋转，缩放)或不。
void lv_img_set_size_mode(lv_obj_t * obj, lv_img_size_mode_t mode);		//设置图像对象大小模式。
const void * lv_img_get_src(lv_obj_t * obj);							//获取图像的来源
lv_coord_t lv_img_get_offset_x(lv_obj_t * obj);							//获取图像对象的偏移量x属性。
lv_coord_t lv_img_get_offset_y(lv_obj_t * obj);							//获取图像对象的偏移量y属性。
uint16_t lv_img_get_angle(lv_obj_t * obj);								//获取图像的旋转角度。
void lv_img_get_pivot(lv_obj_t * obj, lv_point_t * pivot);				//获取图像的轴心(旋转中心)。
uint16_t lv_img_get_zoom(lv_obj_t * obj);								//获取图像的缩放因子。
bool lv_img_get_antialias(lv_obj_t * obj);								//获取转换(旋转，缩放)是否抗锯齿
lv_img_size_mode_t lv_img_get_size_mode(lv_obj_t * obj);				//获取图像的大小模式

三、示例

值得注意的是这里使用的所有图片都是通过数组的方式存放在flash中的，我们需要将图片转换为对应的C数组，可以使用LVGL官方自带的在线工具转换，LVGL图片在线转换工具
在这里插入图片描述

3.1实现图片的基本显示和内部的标签图片

/*************************************************
 *  函数名称 :  img_show_1
 *  参    数 ： 无
 *  函数功能 ： 图片显示
 *************************************************/
void img_show_1()
{
    LV_IMG_DECLARE(img_cogwheel_argb);              //包含图片路径
    lv_obj_t * img1 = lv_img_create(lv_scr_act());  //创建图片对象
    lv_img_set_src(img1, &img_cogwheel_argb);       //设置图像数据显示在对象上
    lv_obj_align(img1, LV_ALIGN_CENTER, 0, -20);    //居中显示
    lv_obj_set_size(img1, 200, 200);                //设置对象尺寸

    lv_obj_t * img2 = lv_img_create(lv_scr_act());  //创建图片对象
    lv_img_set_src(img2, LV_SYMBOL_OK "Accept");    //设置图像数据显示在对象上
    lv_obj_align_to(img2, img1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);//设置位置
}

在这里插入图片描述

3.2通过滑动条控制图片的重新着色以及透明度

static lv_obj_t * red_slider, * green_slider, * blue_slider, * intense_slider;
static lv_obj_t * img1;
static void slider_event_cb(lv_event_t *e)                  //滑动条回调函数
{
   LV_UNUSED(e);
   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_img_recolor_opa(img1,intense,0);        //设置重着色透明度
   lv_obj_set_style_img_recolor(img1,color,0);              //设置重着色
}
/*************************************************
 *  函数名称 :  create_slider
 *  参    数 ： color 需要创建对象背景颜色
 *  函数功能 ： 创建slider 
 *************************************************/
static lv_obj_t * create_slider(lv_color_t color)
{
   lv_obj_t * slider = lv_slider_create(lv_scr_act());      //创建滑动条
   lv_slider_set_range(slider,0,255);                       //设置值
   lv_obj_set_size(slider,10,200);                          //设置尺寸
   lv_obj_set_style_bg_color(slider,color,LV_PART_KNOB);    //设置样式背景颜色,滑动圆头的颜色
   lv_obj_set_style_bg_color(slider,lv_color_darken(color,LV_OPA_40),LV_PART_INDICATOR);//设置样式背景颜色 
   lv_obj_add_event_cb(slider,slider_event_cb,LV_EVENT_VALUE_CHANGED,NULL);   //添加事件回调函数
   return slider;
}
/*************************************************
 *  函数名称 :  img_show_2
 *  参    数 ： 无
 *  函数功能 ： 滑动条改变图片的颜色
 *************************************************/
void img_show_2()
{
   red_slider     = create_slider(lv_palette_main(LV_PALETTE_RED));  //创建slider
   green_slider   = create_slider(lv_palette_main(LV_PALETTE_GREEN));//创建slider
   blue_slider    = create_slider(lv_palette_main(LV_PALETTE_BLUE)); //创建slider
   intense_slider = create_slider(lv_palette_main(LV_PALETTE_GREY)); //创建slider

   lv_slider_set_value(red_slider,LV_OPA_20,LV_ANIM_OFF);            //设置滑动值 
   lv_slider_set_value(green_slider,LV_OPA_20,LV_ANIM_OFF);          //设置滑动值  
   lv_slider_set_value(blue_slider,LV_OPA_20,LV_ANIM_OFF);           //设置滑动值 
   lv_slider_set_value(intense_slider,LV_OPA_20,LV_ANIM_OFF);        //设置滑动值 

   lv_obj_align(red_slider,LV_ALIGN_LEFT_MID,20,0);                        //设置位置
   lv_obj_align_to(green_slider,red_slider,LV_ALIGN_OUT_RIGHT_MID,25,0);   //设置位置
   lv_obj_align_to(blue_slider,green_slider,LV_ALIGN_OUT_RIGHT_MID,25,0);  //设置位置
   lv_obj_align_to(intense_slider,blue_slider,LV_ALIGN_OUT_RIGHT_MID,25,0);//设置位置

   LV_IMG_DECLARE(img_cogwheel_argb);                                //包含路径
   img1 = lv_img_create(lv_scr_act());                               //创建图片对象
   lv_img_set_src(img1,&img_cogwheel_argb);                          //设置图片资源
   lv_obj_align_to(img1,intense_slider,LV_ALIGN_OUT_RIGHT_MID,2,0);  //设置位置

   lv_event_send(intense_slider,LV_EVENT_VALUE_CHANGED,NULL);        //设置发送事件
}

在这里插入图片描述

3.3通过动画实现图片的缩放及其旋转

/*************************************************
 *  函数名称 :  angle_set
 *  参    数 ： 无
 *  函数功能 ： 角度回调显示
 *************************************************/
static void angle_set(void * img,int32_t v)
{
   lv_img_set_angle(img,v);
}
/*************************************************
 *  函数名称 :  zoom_se
 *  参    数 ： 无
 *  函数功能 ： 缩放回调显示
 *************************************************/
static void zoom_set(void * img,int32_t v)
{
   lv_img_set_zoom(img,v);
}
/*************************************************
 *  函数名称 :  img_show_3
 *  参    数 ： 无
 *  函数功能 ： 图片显示
 *************************************************/
void img_show_3()
{
   LV_IMG_DECLARE(img_cogwheel_argb);                    //包含图片路径
   lv_obj_t * img = lv_img_create(lv_scr_act());         //创建图片对象
   lv_img_set_src(img,&img_cogwheel_argb);               //设置图片资源
   lv_obj_align(img,LV_ALIGN_CENTER,50,50);              //位置设置
   lv_img_set_pivot(img,0,0);                            //设置图像的旋转中心。

   lv_anim_t a;                                          //创建动画对象
   lv_anim_init(&a);                                     //初始化动画
   lv_anim_set_var(&a,img);                              //关联动画和图片
   lv_anim_set_exec_cb(&a,angle_set);                    //设置回调显示
   lv_anim_set_values(&a,0,3600);                        //设置值
   lv_anim_set_time(&a,1500);                            //设置显示时间
   lv_anim_set_repeat_count(&a,LV_ANIM_REPEAT_INFINITE); //设置重复次数
   lv_anim_start(&a);                                    //开始动画

   lv_anim_set_exec_cb(&a,zoom_set);                     //设置回调显示
   lv_anim_set_values(&a,128,256);                       //设置值
   // lv_anim_set_time(&a,3000);
   lv_anim_set_playback_time(&a,3000);                   //设置回放时间
   lv_anim_start(&a);                                    //开始动画
}

请添加图片描述

3.4实现图片的动画显示

/*************************************************
 *  函数名称 :  ofs_y_anim
 *  参    数 ： 无
 *  函数功能 ： y轴偏移动画
 *************************************************/
static void ofs_y_anim(void * img,int32_t v)
{
   lv_img_set_offset_y(img,v);
}
/*************************************************
 *  函数名称 :  img_show_4
 *  参    数 ： 无
 *  函数功能 ： 图片显示
 *************************************************/
void img_show_4()
{
   LV_IMG_DECLARE(img_skew_strip);                       //包含路径

   static lv_style_t style;                              //创建样式
   lv_style_init(&style);                                //初始化样式
   lv_style_set_bg_color(&style,lv_palette_main(LV_PALETTE_YELLOW));//设置背景颜色
   lv_style_set_bg_opa(&style,LV_OPA_COVER);             //设置透明度
   lv_style_set_img_recolor_opa(&style,LV_OPA_COVER);    //设置重新着色透明度
   lv_style_set_img_recolor(&style,lv_color_black());    //设置图片重着色

   lv_obj_t * img = lv_img_create(lv_scr_act());         //创建图像对象
   lv_obj_add_style(img,&style,0);                       //添加样式
   lv_img_set_src(img,&img_skew_strip);                  //设置加载图片资源
   lv_obj_set_size(img,150,100);                         //设置尺寸
   lv_obj_center(img);                                   //居中显示

   lv_anim_t a;                                          //创建动画对象
   lv_anim_init(&a);                                     //初始化动画
   lv_anim_set_var(&a,img);                              //绑定动画使用的图片
   lv_anim_set_exec_cb(&a,ofs_y_anim);                   //设置回调显示
   lv_anim_set_values(&a,0,100);                         //设置动画位置值
   lv_anim_set_time(&a,1500);                            //设置开始的时间
   lv_anim_set_playback_time(&a,800);                    //设置回回放时间
   lv_anim_set_repeat_count(&a,LV_ANIM_REPEAT_INFINITE); //设置重复次数
   lv_anim_start(&a);                                    //开始动画
}

请添加图片描述

请叫我啸鹏

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
ESP32 LVGL8.1 ——img 图片 (img 20)

提示：本博客作为学习笔记，有错误的地方希望指正文章目录一、btn 简介1.1概述 Overview1.2部分和风格 Parts and Styles1.3使用 Usage1.3.1图片资源 Image source1.3.2标签作为图片 Label as an image1.3.3透明度 Transparency1.3.4调色板和Alpha索引 Palette and Alpha index1.3.5 重新着色 Recolor1.3.6自动尺寸 Auto-size1.3.7马赛克 Mosaic1.3.8偏
复制链接

扫一扫