LVGL 8.2 Draw label with gradient color

事件处理回调函数

static void add_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);  // 获取产生事件的对象
    lv_opa_t* mask_map = lv_event_get_user_data(e); // 获取事件对象关联的用户数据
    if (code == LV_EVENT_COVER_CHECK) {  // LV_EVENT_COVER_CHECK事件
        lv_event_set_cover_res(e, LV_COVER_RES_MASKED); // 设置LV_COVER_RES_MASKED
    }
    else if (code == LV_EVENT_DRAW_MAIN_BEGIN) { // LV_EVENT_DRAW_MAIN_BEGIN事件
        lv_draw_mask_map_init(&m, &obj->coords, mask_map);
        mask_id = lv_draw_mask_add(&m, NULL); // 添加mask绘制参数
    }
    else if (code == LV_EVENT_DRAW_MAIN_END) { // LV_EVENT_DRAW_MAIN_END事件
        lv_draw_mask_free_param(&m);   // 释放mask绘制参数占用的内存
        lv_draw_mask_remove_id(mask_id);  // 移除mask绘制参数
    }
}

Draw label with gradient color

#define MASK_WIDTH 100
#define MASK_HEIGHT 45

static void lv_example_label_4(void)
{
    /* Create the mask of a text by drawing it to a canvas*/
    static lv_opa_t mask_map[MASK_WIDTH * MASK_HEIGHT]; // mask map数组
    /*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); //设置画布数据buffer
    lv_canvas_fill_bg(canvas, lv_color_black(), LV_OPA_TRANSP); //画布填充背景色为黑色，透明度为LV_OPA_TRANSP
    /*Draw a label to the canvas. The result "image" will be used as mask*/
    lv_draw_label_dsc_t label_dsc;   //绘制描述符变量定义
    lv_draw_label_dsc_init(&label_dsc);
    label_dsc.color = lv_color_white();  //白色
    label_dsc.align = LV_TEXT_ALIGN_CENTER;   // LV_TEXT_ALIGN_CENTER对齐方式
    lv_canvas_draw_text(canvas, 5, 5, MASK_WIDTH, &label_dsc, "Text with gradient"); //画布上绘制文本
    /*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_obj_t* grad = lv_obj_create(lv_scr_act()); // 创建对象
    lv_obj_set_size(grad, MASK_WIDTH, MASK_HEIGHT); // 设置大小
    lv_obj_center(grad); // 居中对齐
    lv_obj_set_style_bg_color(grad, lv_color_hex(0xff0000), 0); // 设置背景
    lv_obj_set_style_bg_grad_color(grad, lv_color_hex(0x0000ff), 0); //设置渐变颜色值
    lv_obj_set_style_bg_grad_dir(grad, LV_GRAD_DIR_HOR, 0);//设置沿水平方向颜色渐变
    lv_obj_add_event_cb(grad, add_mask_event_cb, LV_EVENT_ALL, mask_map);//添加所有事件
}

运行效果