使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第二十六讲)
这一期讲解一下图片控件的基本使用，日常生活工作中常见的图片格式主要有jpg、png、gif、psd、tif、bmp等格式。
JPEG/JPG:这种格式是最常用的，采用有损压缩，适合存储照片，能够在较小的存储空间内保留较好的色彩信息，但过度压缩会降低图片质量。
PNG:这种格式支持透明背景，采用无损压缩，适合需要透明度的图像。
GIF:这种格式支持动画，适合制作简单的动画效果，但是颜色数量有限，适合小型图像的简单动画。
BMP:这种格式是未压缩的，文件较大，适合需要高质量图像场合，但是不适合网络传输。
TFF:这种格式通常用于印刷和专业摄影，支持无损压缩，能保存高质量图像，但是文件较大。
Lvgl中支持可用的格式分别是PNG、JPG、BMP三种格式，我将使用PNG格式来进行演示。
首先将准备好的图片放到本地文件夹中，然后将Gui_Guider中的图片空间拖拽到屏幕点击控件，找到本地文件夹中的图片加载。
以下是加入图片后的属性框：
关于将图片转化为C语言代码，这里提供两个方法：
第一种如官方代码中所述：
第二种使用Gui_Guider平台输出代码工程：
在生成的工程中打开Generated文件夹再打开images文件夹，在该文件夹中的文件就是你转化图片的c语言代码，我们只需要改变代码的文件包含路径即可使用。另外还需要在头文件中声明你使用的图片，具体如下图所示：
以下是一些图片的初始化代码：
//Write codes screen_1_img_1
//创建图片控件
ui->screen_1_img_1 = lv_img_create(ui->screen_1);
//设置图片为可点击
lv_obj_add_flag(ui->screen_1_img_1, LV_OBJ_FLAG_CLICKABLE);
//设置图片源
lv_img_set_src(ui->screen_1_img_1, &_su_alpha_100x100);
//设置图片的旋转中心和旋转角度
lv_img_set_pivot(ui->screen_1_img_1, 50,50);
lv_img_set_angle(ui->screen_1_img_1, 0);
//设置图片的位置以及大小
lv_obj_set_pos(ui->screen_1_img_1, 163, 169);
lv_obj_set_size(ui->screen_1_img_1, 100, 100);
//Write style for screen_1_img_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//设置图片的颜色重绘透明度为0
lv_obj_set_style_img_recolor_opa(ui->screen_1_img_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置图片的透明度为255
lv_obj_set_style_img_opa(ui->screen_1_img_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置图片圆角半径为0
lv_obj_set_style_radius(ui->screen_1_img_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置图片裁剪角落为 true，表示裁剪掉图片的角落，通常用来确保图片的显示范围不超过设定的区域。
lv_obj_set_style_clip_corner(ui->screen_1_img_1, true, LV_PART_MAIN|LV_STATE_DEFAULT);
下一期讲解其他控件的基础使用。
本文章由威三学社出品
对课程感兴趣可以私信联系