LVGL V8下png图片缩放显示

这几天在研究LVGL V8下显示png图片和缩放问题

1、软件硬件环境

硬件环境：宸芯科技的SS202X系列芯片（这里使用的是SS202D）

软件环境：Linux（移植的嵌入式系统）  LVGL_V8

编译器：arm-linux-gnueabihf-gcc

2、相关依赖库

相关依赖的库主要包含lv_lib_png和lodepng

下载链接：lv_lib_png

3、相关代码

这里主要是演示从文件加载png图片，并缩放显示，主要是使用lv_img_set_zoom这个接口实现缩放显示，以下是关键代码

// img对象设置png图片自适应显示
static void lv_obj_img_png_set_zoom(lv_obj_t * obj_img, const char *src, uint32_t obj_width, uint32_t obj_height)
{
    if (obj_img == NULL || src == NULL || src[0] == '\0')
    {
        printf("[%s:%d] param errror\n", __FUNCTION__, __LINE__);
        return;
    }

    if (obj_width == 0 || obj_height == 0)
    {
        printf("[%s:%d] param errror\n", __FUNCTION__, __LINE__);
        return;
    }

    uint32_t img_width = 0, img_height = 0, zoom_factor = 0;
    // 获取img对象的信息
    lv_img_header_t header;
    if (lv_img_decoder_get_info(src, &header) != LV_RES_OK)
    {
        printf("[%s:%d] lv_img_decoder_get_info errror\n", __FUNCTION__, __LINE__);
        return;
    }
   
    img_width = header.w;
    img_height = header.h;

    printf("[%s:%d] img_width:%u, img_height:%u, obj_width:%u, obj_height:%u\n", __FUNCTION__, __LINE__, img_width, img_height, obj_width, obj_height);
    if (img_width != 0 && img_height != 0)
    {
        uint32_t y_a= obj_height * img_width;   
        uint32_t x_b= obj_width * img_height;

        if (x_b >= y_a)
        {
            if (img_height >= obj_height)
            {
                uint32_t x = obj_height * 256;
                zoom_factor = x / img_height;
                lv_img_set_zoom(obj_img, zoom_factor);
            }
        }
        else
        {
            if (img_width > obj_width)
            {
                uint32_t x = obj_width * 256;
                zoom_factor = x / img_width;
                lv_img_set_zoom(obj_img, zoom_factor);
            }
        }
    }
}


static void my_picture_test(const char * file_path)
{
    lv_obj_t * screen = lv_obj_create(NULL);
    if (screen != NULL)
    {
        lv_scr_load(screen); // 加载屏幕
    }

    // 创建图片对象img_obj1，不使用缩放，直接根据图片大小显示
    lv_obj_t *img_obj1 = lv_img_create(lv_scr_act());
    if (img_obj1 == NULL)
    {
        printf("[%s:%d] create img_obj1 failed\n", __FUNCTION__, __LINE__);
        return;
    }

    lv_img_set_src(img_obj1, file_path); // 设置图片
    lv_obj_align(img_obj1, LV_ALIGN_TOP_MID, 0, 20);

    // 创建图片对象img_obj2，使用缩放，图片大小需要根据对象大小缩放
    lv_obj_t *img_obj2 = lv_img_create(lv_scr_act());
    if (img_obj2 == NULL)
    {
        printf("[%s:%d] create img_obj2 failed\n", __FUNCTION__, __LINE__);
        return;
    }

    unsigned int obj_width = 100, obj_height = 100; // 设置对象大小100*100
    lv_img_set_src(img_obj2, file_path); // 设置图片
    lv_obj_align(img_obj2, LV_ALIGN_BOTTOM_MID, 0, 200);
    lv_obj_img_png_set_zoom(img_obj2, file_path, obj_width, obj_height);
}


int main(int argc, char *argv[])
{
    lv_init(); // LittlevGL init
    ......
	lv_png_init(); // 初始化png图片解码
    .......

	my_picture_test("/work/gray.png");
	
    /*Handle LitlevGL tasks (tickless mode)*/
    while (app_run_flag) 
    {
        lv_task_handler();
        usleep(5000);
    }

    return 0;
}

4、显示效果

上下两张图分别为未缩放和缩放后的对比

测试原图：gray.png

参考文献：LVGL Littlevgl 使用文件系统加载PNG图片解码显示