曲线进度条如何实现

这种进度条请问用什么api实现?

微信图片_20240824153642

参考示例: https://squareline.io/demos

image

谢谢,这个它实际上还是一个直上直下的变化。和我发的L型还是不一样。我自己试了,用mask的确是可以,但是我的mask是用canvas画矩形,但是画出来的样子跟百叶窗似的,不知道为什么。
这是我想要的效果


这是我画出来的
微信图片_20240825175920
这是我的代码


/**
 * @file main
 *
 */

/*********************
 *      INCLUDES
 *********************/
#include <stdlib.h>
#include <unistd.h>

#include "lvgl/lvgl.h"
#include "lv_drivers/win32drv/win32drv.h"

#include <windows.h>

#include "gui_guider.h"
#include "events_init.h"
/*********************
 *      DEFINES
 *********************/
const lv_coord_t mask_width = 792;
const lv_coord_t mask_height = 202;
/**********************
 *      TYPEDEFS
 **********************/

/**********************
 *  STATIC PROTOTYPES
 **********************/
static void hal_init(void);
static int tick_thread(void *data);

/**********************
 *  STATIC VARIABLES
 **********************/
lv_ui guider_ui;
/**********************
 *      MACROS
 **********************/
 /* Create the mask of a text by drawing it to a canvas*/
static lv_color_t mask_map[LV_CANVAS_BUF_SIZE_ALPHA_8BIT(792,202)];
static void mask_event_cb(lv_event_t * e);
/**********************
 *   GLOBAL FUNCTIONS
 **********************/
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR szCmdLine, int nCmdShow)
{
    int i;
    /*Initialize LittlevGL*/
    lv_init();

    /*Initialize the HAL for LittlevGL*/
    lv_win32_init(hInstance, SW_SHOWNORMAL, 800, 480, NULL);

    /*Output prompt information to the console, you can also use printf() to print directly*/
    LV_LOG_USER("LVGL initialization completed!");

    /*Run the demo*/
    //lv_demo_widgets();
    setup_ui(&guider_ui);

    lv_obj_add_event_cb(guider_ui.screen_img_1, mask_event_cb, LV_EVENT_ALL, guider_ui.screen_img_1);

    while(!lv_win32_quit_signal) {
        /* Periodically call the lv_task handler.
         * It could be done in a timer interrupt or an OS task too.*/
        lv_task_handler();
        usleep(10000);       /*Just to let the system breath*/

    }
    return 0;
}

static void mask_event_cb(lv_event_t * e) {
    static lv_draw_mask_map_param_t m;
    static int16_t mask_id;
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* obj = lv_event_get_target(e);

    if (code == LV_EVENT_COVER_CHECK) {
        lv_event_set_cover_res(e, LV_COVER_RES_MASKED);
    }
    else if (code == LV_EVENT_DRAW_MAIN_BEGIN) {
        /*Create a "8 bit alpha" canvas and clear it*/
        lv_obj_t* canvas = lv_canvas_create(lv_scr_act());
        lv_canvas_set_buffer(canvas, mask_map, mask_width, mask_height, LV_IMG_CF_ALPHA_8BIT);
        lv_canvas_fill_bg(canvas, lv_color_black(), LV_OPA_TRANSP);

        /*Draw a label to the canvas. The result "image" will be used as mask*/
        lv_draw_rect_dsc_t  rect_dsc;
        lv_draw_rect_dsc_init(&rect_dsc);
        rect_dsc.radius = 0;
        rect_dsc.bg_opa = LV_OPA_COVER;
        rect_dsc.bg_color = lv_color_white();
        rect_dsc.bg_grad.dir = LV_GRAD_DIR_NONE;
        rect_dsc.border_side = LV_BORDER_SIDE_NONE;
        lv_canvas_draw_rect(canvas, 0, 0, 150, 100, &rect_dsc);
        /*The mask is reads the canvas is not required anymore*/
        lv_obj_del(canvas);
        /* Create an object from where the text will be masked out.
        * Now it's a rectangle with a gradient but it could be an image too*/
        lv_draw_mask_map_init(&m, &obj->coords, mask_map);
        mask_id = lv_draw_mask_add(&m, NULL);
    }
    else if (code == LV_EVENT_DRAW_MAIN_END) {
        lv_draw_mask_free_param(&m);
        lv_draw_mask_remove_id(mask_id);
    }
}