How to use MASK in v8.3

How-to
1

I can not find any example for v8.3. But in manual v8.3 it said this version support mask function.
Could you give me some example?

2

Hey, there is this page in the docs for v8.3 about masking.

3

Thanks a lot, I made it. But after I add the mask, it will like window-shades.
I want to get:

微信图片_20240825175837
微信图片_20240825175837790×87 10.7 KB

But I got:
微信图片_20240825175920

This is my code:

/*********************
 *      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*/
lv_color_t mask_map[LV_CANVAS_BUF_SIZE_TRUE_COLOR_ALPHA(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_TRUE_COLOR_ALPHA);
        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_width = 0;
        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);
    }
}