feat(example) add text with gradient example

fixes #2778

examples/widgets/label/index.rst

@@ -17,3 +17,9 @@ Show LTR, RTL and Chinese texts
 .. lv_example:: widgets/label/lv_example_label_3
   :language: c
 
+Draw label with gradient color
+""""""""""""""""""""""""""""""""""""
+
+.. lv_example:: widgets/label/lv_example_label_4
+  :language: c
+

examples/widgets/label/lv_example_label_3.c

@@ -2,7 +2,7 @@
 #if LV_USE_LABEL && LV_BUILD_EXAMPLES && LV_FONT_DEJAVU_16_PERSIAN_HEBREW && LV_FONT_SIMSUN_16_CJK && LV_USE_BIDI
 
 /**
- * Show mixed LTR, RTL and Chiease label
+ * Show mixed LTR, RTL and Chinese label
  */
 void lv_example_label_3(void)
 {

examples/widgets/label/lv_example_label_4.c

@@ -0,0 +1,63 @@
+#include "../../lv_examples.h"
+#if LV_USE_LABEL && LV_BUILD_EXAMPLES && LV_DRAW_COMPLEX
+
+#define MASK_WIDTH 100
+#define MASK_HEIGHT 45
+
+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_set_cover_res(e, LV_COVER_RES_MASKED);
+    }
+    else if(code == LV_EVENT_DRAW_MAIN_BEGIN) {
+        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);
+    }
+}
+
+/**
+ * Draw label with gradient color
+ */
+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];
+
+    /*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_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_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);
+}
+
+#endif

examples/widgets/lv_example_widgets.h

@@ -81,6 +81,7 @@ void lv_example_keyboard_1(void);
 void lv_example_label_1(void);
 void lv_example_label_2(void);
 void lv_example_label_3(void);
+void lv_example_label_4(void);
 
 void lv_example_led_1(void);