因为用ARGB8888并且开启以下宏定义导致显示UI层乱码或者无法显示UI层的问题。(根据官方的文档不行不知道是不是PNG到FB直接转换的问题)所以我采取了另外一种方法来实现OSD显示。

以下是官方的解决办法:

In summary, to enable transparent screens and displays for OSD menu-like UIs:

  • Enable LV_COLOR_SCREEN_TRANSP in lv_conf.h

  • Be sure to use LV_COLOR_DEPTH 32

  • Set the screen’s opacity to LV_OPA_TRANSP e.g. with lv_obj_set_style_local_bg_opa(lv_scr_act(), LV_OBJMASK_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_TRANSP)

  • Set the display opacity to LV_OPA_TRANSP with lv_disp_set_bg_opa(NULL, LV_OPA_TRANSP);


我才用了另外一种方法,但是图片颜色有少许失真,但是控件颜色却不会。

我们不用调整lv_conf.h里面的官方要求的宏。只要在主函数里面写代码即可。首先先设置lv_scr_act()的风格:

lv_style_t style_scr_act;    
lv_style_init(&style_scr_act);
lv_style_set_bg_opa(&style_scr_act, LV_OPA_TRANSP);
lv_obj_add_style(lv_scr_act(), &style_scr_act, 0);
lv_obj_report_style_change(&style_scr_act);

然后手动设置屏幕的显示:

 /* 这里设置屏幕是透明的 */
lv_disp_get_default()->driver->screen_transp = 1;
/* 这里设置屏幕背景是透明的 */
lv_disp_set_bg_opa(lv_disp_get_default(), LV_OPA_TRANSP);
/* 这里清空屏幕,不清空的话,可能不会生效 */
lv_memset_00(lv_disp_get_default()->driver->draw_buf->buf_act,lv_disp_get_default()->driver->draw_buf->size* sizeof(lv_color32_t));

因为我们现在是要显示底层的视频,在表面做UI界面。所以我们要使用LVGL的多图层,LVGL有三个图层lv_layer_sys()>lv_layer_top()>lv_scr_act()。如果我们要把控件创作在其他图层,别忘了开启该图层的点击属性。

lv_obj_add_flag(lv_layer_top(), LV_OBJ_FLAG_CLICKABLE);
lv_obj_add_flag(lv_layer_sys(), LV_OBJ_FLAG_CLICKABLE);
lv_obj_add_flag(lv_scr_act(), LV_OBJ_FLAG_CLICKABLE);

顶层与系统层(Top and sys layers)

LVGL 使用名为“layer_top”和“layer_sys”的两个特殊层。两者在显示器的所有屏幕上都是可见的和通用的。 但是,它们不会在多个物理显示器之间共享。

layer_top 始终位于默认屏幕(lv_scr_act())的上一层,而 layer_sys 位于 layer_top 的上一层。

用户可以使用 layer_top 来创建一些可见的内容。 例如,一个菜单栏、一个弹出窗口等。如果启用了click 属性,那么layer_top 将吸收所有用户点击并充当模态。

lv_obj_add_flag(lv_layer_top(),LV_OBJ_FLAG_CLICKABLE);

layer_sys 在 LVGL 中也用于类似的目的。 例如,它将鼠标光标放在所有图层上方以确保它始终可见。


如果我们已经执行了以上的代码,能看见视频层了。控件和请尽量卸载layer_top和layer_sys层。楼主这里一开始创建标签在layer_top层级。但是一直看不见标签文字的影子。把控件设定成其他颜色就好了,不清楚是不是有它会默认和被同化颜色。或者在采取在该控件的底下在建一个画布再把画布的边框颜色和背景设置为透明风格还有边框内距设置为0,和屏幕融为一体,再在上面放置控件就能正常显示了。楼主试过这两种手段都是可行的。

下面给出部分风格设置代码:

lv_style_t background_to_btn;
lv_style_init(&background_to_btn);
set_pad(background_to_btn);
lv_style_set_border_opa(&background_to_btn, LV_OPA_TRANSP);               
lv_style_set_border_width(&background_to_btn, 0);                
lv_obj_report_style_change(&background_to_btn);
lv_style_set_bg_opa(&background_to_btn, 0);
    
obj = lv_obj_create(lv_layer_top()); 
lv_obj_add_style(obj, &background_to_btn, 0);
lv_obj_clear_flag(obj, LV_OBJ_FLAG_SCROLLABLE);
lv_obj_set_scrollbar_mode(obj, LV_SCROLLBAR_MODE_OFF);


附录:介绍(Introduction) — LVGL_Chinese_Documents 文档 (lvgl-chinese-doc.readthedocs.io)

LVGL官方文档

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐