图13.2.1.1 在线转换工具

       进入到该界面后，首先点击上图中“Browse”按钮，导入所需要的图片，导入完成后，点击图中Color format选项，根据需求选择颜色格式（不需要透明度通道就选择True color），然后点击图中Output format 选项，选择输出格式为“C array”，最后点击“Convert”按钮即可生成C语言数组相关的文件（文件路径自选）。

       第二步：将C语言数组文件添加到工程当中，然后调用LV_IMG_DECLARE(xxx)宏定义对图片源进行声明。

       第三步：调用lv_img_create函数创建图片部件。

       第四步：调用lv_img_set_src函数设置图片源。

       2. 外部图片源文件

       第一步：生成外部源文件（.bin）。如果用户需要将PNG、JPG和BMP格式的图片转换成bin文件，同样也可以使用官方的在线转换工具进行格式转换，与C语言数组转换不同的是：在Output format 选项中，输出格式需要选择Binary RGB565。转换完成后，我们即可得到图片相关的bin文件。

       第二步：使能LVGL的文件系统。

       第三步：拷贝bin文件到指定的存储器目录中。

       第三步：调用lv_img_create函数创建图片部件。

       第四步：调用lv_img_set_src函数设置图片源。注意：该函数中需要指定文件路径。

       3. 图标字体

       LVGL内置的图标字体可以作为图片部件的图片源，用户只需要调用lv_img_set_src函数进行设置即可，示例源码如下：

lv_img_set_src(img, LV_SYMBOL_DUMMY);

       13.2.2 图片重新着色

       图片重新着色是指将一种特定的颜色与图片的每个像素进行混合，这可以用于显示图片的不同状态，例如选中、未激活、按下等。

       用户需要让图片重新着色，就必须要调用以下两个函数：lv_obj_set_style_img_recolor_opa（重着色透明度）和lv_obj_set_style_img_recolor（颜色设置）。注意：重着色透明度的范围是0-255，在默认的情况下，该透明度为0（完全透明），因此，如果不改变该透明度，将看不到颜色混合效果。

       13.2.3 图片自动大小

       如果把图片部件的宽度或高度设置为LV_SIZE_CONTENT，那它的大小将会根据图片源的大小而自动变化。

       13.2.4 图片偏移

       图片偏移是指对图片部件的内部所显示的图片进行偏移，值得注意的是，如果图片偏移出了图片部件的范围，则超出的部分会显示在与偏移方向相反的一侧，如图13.2.4所示：

图13.2.4 图片偏移

       设置图片偏移可调用以下函数：

lv_img_set_offset_x(img, x_ofs);  /* 图片往X轴偏移 */
lv_img_set_offset_y(img, y_ofs);  /* 图片往Y轴偏移 */

       13.2.5 图片缩放

       在LVGL中，用户可调用lv_img_set_zoom函数设置图片的缩放，该函数具有两个形参，第一个形参为图片部件，而第二个形参为缩放的比例。注意：如果缩放的比例设置为256或LV_IMG_ZOOM_NONE，则表示禁用缩放；如果缩放的比例设置为128，则表示缩放到原来的1/2；如果缩放的比例设置为512，则表示放大2倍，示意图如下所示：

图13.2.5.1 图片缩放比例

       13.2.6 图片旋转

       图片旋转是指图片以某一点为中心，旋转一定的角度。在默认的情况下，旋转的中心点通常就是图片的中心。

       用户需要旋转图片，可调用lv_img_set_angle函数进行设置，该函数的第二个形参代表旋转的角度值，值得注意的是，角度值/10 = 实际的旋转角度，因此，如果用户想把图片顺时针旋转45°，则需要将角度值设置为450。图片旋转的示意图如下：

图13.2.6.1 旋转45°

       在上图中，图片是围绕其中心点进行旋转的，如果用户需要改变旋转的中心点，可以调用lv_img_set_pivot(img, pivot_x, pivot_y)函数，该函数的第二和第三个形参代表旋转中心点的x和y轴坐标。

        13.3 图片部件的API函数

       LVGL官方提供了一些与图片部件相关API，如下表所示：

表13.3.1 图片部件相关的API函数

       接下来，我们介绍LVGL图片部件常用的API函数：

       1. lv_img_create函数

       创建图片部件，其函数原型如下所示：

lv_obj_t * lv_img_create(lv_obj_t *parent);

       该函数的形参描述如表13.3.2所示：

表13.3.2 lv_img_create函数形参描述

       返回值：指向图片部件的指针。

       2. lv_img_set_src函数

       设置图片源，其函数原型如下所示：

void lv_img_set_src(lv_obj_t *obj, const void *src_img);

       该函数的形参描述如表13.3.3所示：

表13.3.3 lv_img_set_src函数形参描述

       返回值：无。

       3. lv_img_set_offset_x函数

       设置图片的x轴偏移量。其函数原型如下所示：

void lv_img_set_offset_x(lv_obj_t *obj, lv_coord_t x);

       该函数的形参描述如表13.3.4所示：

表13.3.4 lv_img_set_offset_x函数形参描述

       返回值：无。

       4. lv_img_set_offset_y函数

       设置图片的y轴偏移量。其函数原型如下所示：

void lv_img_set_offset_y(lv_obj_t *obj, lv_coord_t y);

       该函数的形参描述如表13.3.5所示：

表13.3.5 lv_img_set_offset_y函数形参描述

       返回值：无。

       5. lv_img_set_pivot函数

       设置图片的旋转中心。图片将围绕此点旋转，其函数原型如下所示：

void lv_img_set_pivot(lv_obj_t *obj, lv_coord_t ivot_x, lv_coord_t ivot_y);

       该函数的形参描述如表13.3.6所示：

表13.3.6 lv_img_set_pivot函数形参描述

       返回值：无。

       6. lv_img_set_angle函数

       设置图片的旋转角度。其函数原型如下所示：

void lv_img_set_angle(lv_obj_t *obj, int16_t angle);

       该函数的形参描述如表13.3.7所示：

表13.3.7 lv_img_set_angle函数形参描述

       返回值：无。

       7. lv_img_set_zoom函数

       设置图片缩放，其函数原型如下所示：

void lv_img_set_zoom(lv_obj_t *obj, uint16_t zoom);

       该函数的形参描述如表13.3.8所示：

表13.3.8 lv_img_set_zoom函数形参描述

       返回值：无。

       8. lv_img_set_antialias函数

       启用/禁用转换的抗锯齿功能，其函数原型如下所示：

void lv_img_set_antialias(lv_obj_t *obj, bool antialias);

       该函数的形参描述如表13.3.9所示：

表13.3.9 lv_img_set_antialias函数形参描述

       返回值：无。

        13.4 图片部件的实验

       13.4.1 硬件设计

       1. 例程功能

       本实验主要测试图片部件API函数的使用，实验现象：开机后，屏幕上显示一张图片（齿轮）。与此同时，LED0闪烁，提示系统正在运行。

       该实验的完整源码，请参考《LVGL例程10 lv_img(图片)》例程，路径：A盘→4，程序源码 →3，扩展例程 →3，LVGL例程。

       13.4.2 软件设计

       13.4.2.1 程序流程图

       本实验的程序流程图，如下图13.4.2.1.1所示：

图13.4.2.1.1 图片部件实验流程图

       13.4.2.2 程序解析

       关于LVGL的用户代码，我们都是在lv_mainstart.c文件中编写的，本实验的源码如下所示：

/**************************** 第一部分 开始 ****************************/
/**
 * @brief  LVGL演示
 * @param  无
 * @return 无
 */
void lv_mainstart(void)
{
    lv_example_img();
}
/**************************** 第一部分 结束 ****************************/
 
/**************************** 第二部分 开始 ****************************/
/**
 * @brief  图片部件实例
 * @param  无
 * @return 无
 */
static void lv_example_img(void)
{
    lv_obj_t *img = lv_img_create(lv_scr_act());        /* 创建图片部件 */
    lv_img_set_src(img, &img_gear);                     /* 设置图片源 */
    lv_obj_align(img, LV_ALIGN_CENTER, 0, 0);           /* 设置图片位置 */
}
/**************************** 第二部分 结束 ****************************/

       上述源码可分为以下三个部分：

       ① lv_mainstart接口函数。在该函数中，我们调用了图片相关的示例函数；

       ②我们创建图片部件，设置图片源。

       13.4.3 下载验证

       把工程编译并下载到我们的开发板中， 运行效果如图13.4.3.1所示：

图13.4.3.1 图片部件实验