ESP32 LVGL8.1

2024-04-10 07:46| 来源: 网络整理| 查看: 265

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

文章目录一、设置图片样式简介1.1图片透明度 img_opa1.2图片重着色 mg_recolor1.3图片重着色透明度 img_recolor_opa 二、Style img API三、示例

一、设置图片样式简介

本次主要讲述lvgl的样式阴影，Image style 主要是针对图片对象的一些样式的参数设置，主要有重新着，重新着透明度的设置，和我们前面讲到的背景图片稍微有些区别

1.1图片透明度 img_opa

设置图像的不透明度。值0，LV_OPA_0或LV_OPA_TRANSP表示完全透明，256，LV_OPA_100或 LV_OPA_COVER表示完全覆盖，其他值或LV_OPA_10、LV_OPA_20等表示半透明。

1.2图片重着色 mg_recolor

将颜色设置为混合到图像。

1.3图片重着色透明度 img_recolor_opa

设置颜色混合的强度。值0，LV_OPA_0或LV_OPA_TRANSP表示完全透明，256，LV_OPA_100或 LV_OPA_COVER表示完全覆盖，其他值或LV_OPA_10、LV_OPA_20等表示半透明。

二、Style img API

用于设置图片样式的API可以在lv_style_gen.h文件中找到，主要有以下几个API

void lv_style_set_img_opa(lv_style_t * style, lv_opa_t value); //设置图片样式透明度 void lv_style_set_img_recolor(lv_style_t * style, lv_color_t value); //设置图片样式重新着 void lv_style_set_img_recolor_filtered(lv_style_t * style, lv_color_t value); //设置图片样式过滤重新着 void lv_style_set_img_recolor_opa(lv_style_t * style, lv_opa_t value); //设置图片样式重新着透明度三、示例

对于一个对象有多个样式的属性，这里使用到背景、边框的属性，结合前面的属性可以实现叠加显示的效果。值得注意的是这里引用了样式的变换，样式的变换主要有以下一个API

void lv_style_set_transform_width(lv_style_t * style, lv_coord_t value); //样式宽度变换拉高 void lv_style_set_transform_height(lv_style_t * style, lv_coord_t value); //样式高度变换拉长 void lv_style_set_translate_x(lv_style_t * style, lv_coord_t value); //样式x轴位置变换 void lv_style_set_translate_y(lv_style_t * style, lv_coord_t value); //样式y轴位置变换 void lv_style_set_transform_zoom(lv_style_t * style, lv_coord_t value); //样式缩放变换直接给的是像素大小 void lv_style_set_transform_angle(lv_style_t * style, lv_coord_t value); //样式角度变换

图片样式示例，其中LV_IMG_DECLARE(img_cogwheel_argb); 加载图片声明以 .c文件的图片，可以使用官方的图片转码成.c文件

/************************************************* * 函数名称 : lv_Image_style 图片样式设置 * 参数：无 * 函数功能：图片样式设置 *************************************************/ void lv_Image_style() { static lv_style_t style; //创建样式 lv_style_init(&style); //初始化样式 lv_style_set_radius(&style,5); //设置样式的圆角 lv_style_set_bg_opa(&style,LV_OPA_COVER); //设置样式背景透明度 lv_style_set_bg_color(&style,lv_palette_lighten(LV_PALETTE_GREY,3)); //设置样式的背景颜色 lv_style_set_border_width(&style,2); //设置样式边框宽度 lv_style_set_border_color(&style,lv_palette_main(LV_PALETTE_BLUE)); //设置样式边框颜色 lv_style_set_img_recolor(&style,lv_palette_main(LV_PALETTE_BLUE)); //设置图片样式重新着着 lv_style_set_img_recolor_opa(&style,LV_OPA_50); //设置图片样式透明度 lv_style_set_transform_angle(&style,300); //设置图片样式角度 lv_obj_t * obj = lv_img_create(lv_scr_act());//创建img对象 lv_obj_add_style(obj,&style,0); //将样式添加到图片对象中 LV_IMG_DECLARE(img_cogwheel_argb); //加载图片声明 .c文件的图片 lv_img_set_src(obj,&img_cogwheel_argb); //设置图片信息显示在对象上 lv_obj_center(obj); //图片样式加载在中央 }

在这里插入图片描述

【本文地址】

公司简介

联系我们