LVGL--图片部件(lv_img)

图片部件(lv_img)

图片部件可以用于图片显示,功能界面优化,背景优化等。

在这里插入图片描述

图片部件的相关API

	//知识点1:创建图片部件
    lv_obj_t *img = lv_img_create(lv_scr_act());                                //创建图片部件
    
    //知识点2:设置图片源
    LV_IMG_DECLARE(img_test);                                                   //声明图片来源,可以是c数组&&bin图片
    lv_img_set_src(img,&img_test);                                              //设置图片源
    lv_obj_center(img);                                                         //设置在画面中心
    
	//知识点3:设置图片偏移
	lv_img_set_offset_x(img,0);                                                 //设置图片x偏移
    lv_img_set_offset_y(img,0);                                                 //设置图片y偏移
	
	//知识点4:图片重新着色
    lv_obj_set_style_img_recolor(img,lv_color_hex(0xffe1d2),LV_PART_MAIN);      //图片你重新着色,但是这个功能比较鸡肋
    lv_obj_set_style_img_recolor_opa(img,150,LV_PART_MAIN);
    
    //知识点5:设置图片缩放,旋转
    lv_img_set_zoom(img,128);                                                   //缩小2倍
    lv_img_set_angle(img,90);                                                    //顺时针方向旋转90°
    
    //知识点6:设置中心点
    lv_obj_update_layout(img);                                                  //更新图片布局信息,在设置中心点之前防止出错
    lv_img_set_pivot(img,0,0);                                                  //设置中心点

图片缩放和设置中心点的图解说明
在这里插入图片描述

效果如下

在这里插入图片描述

### LVGL 8.2 版本中的 `lv_meter` 组件使用指南 #### 创建仪表盘对象 为了创建一个基本的仪表组件,可以调用函数 `lv_meter_create(parent)` 来实例化一个新的仪表控件。此函数接收父级容器作为参数并返回新创建的对象指针。 ```c // 创建一个位于屏幕中心的仪表表盘 lv_obj_t * meter = lv_meter_create(lv_scr_act()); lv_obj_center(meter); ``` #### 添加刻度线和标签 通过设置属性来定义显示风格,比如添加刻度标记以及相应的数值标注: - 刻度范围可以通过 `lv_meter_set_scale()` 函数指定最小值、最大值以及其他样式选项。 - 对于更精细控制,还可以单独调整每条刻度线的位置与外观特性。 ```c static const lv_point_t custom_ticks[] = { {0, -10}, /* Tick length */ }; /* Set up the scale of the meter with customized ticks and labels */ lv_meter_set_scale(meter, .angle_range = 270, .line_width = 2, .tick_div_line_count = 9, .ticks = custom_ticks, .label_gap = 15); // Space between tick lines and numbers ``` #### 插入指示器 (Indicators) 向仪表内加入不同类型的指标用于展示数据变化情况,常见的有指针型 (`needle`) 或者填充区域形式(`arc`) 的指示器。这些都可以借助 API 如下所示完成初始化工作: ```c /* Add a needle indicator to show value on the meter */ lv_obj_t * indic_needle = lv_meter_indicator_add( meter, .type = LV_METER_INDIC_NEEDLE_IMG, .img_src = &needle_img, // Image resource for needle appearance .start_angle_offset = -y axis) .end_angle_offset = 135 // End angle offset from start position ); /* Optionally add an arc style indicator as well */ lv_obj_t * indic_arc = lv_meter_indicator_add( meter, .type = LV_METER_INDIC_ARC_GRADIENT, .color_start = lv_color_hex(0xFF0000), .color_end = lv_color_hex(0x00FF00), .width = 10 ); ``` #### 设置当前读数 最后一步就是更新各个指示器所指向的具体位置,这通常涉及到将实际测量得到的数据映射到合适的角度区间上,并通知 UI 进行刷新重绘操作。 ```c void update_meter_value(float val) { int scaled_val = (int)(val / MAX_VALUE * SCALE_RANGE); lv_meter_set_indicator_value(indic_needle, scaled_val); lv_meter_set_indicator_value(indic_arc, scaled_val); } ``` 以上便是针对 LVGL 8.2 中 `lv_meter` 控件的基础介绍及其典型应用场景下的编程实践[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值