lvgl / lv_demos

Examples, tutorials and applications for the LVGL embedded GUI library
https://lvgl.io
488 stars 366 forks source link

We try to use shadows to achieve this effect, but how to remove this line #137

Closed Akery closed 2 years ago

Akery commented 2 years ago

image

kisvegabor commented 2 years ago

Hi,

Which version of LVGL do you use? Please send a code snippet to reproduce the issue.

Akery commented 2 years ago

version: 8.0.0 code: `lv_obj_t *main = lv_obj_create(lv_scr_act()); lv_obj_set_style_bg_color(main, lv_color_make(0x00, 0x00, 0x00), LV_PART_MAIN); lv_obj_set_size(main, 300, 400); lv_obj_center(main);

lv_obj_t* circle = lv_obj_create(main); lv_obj_set_pos(circle, -85, -86); lv_obj_set_size(circle, 282, 282); lv_obj_set_style_radius(circle, LV_RADIUS_CIRCLE, LV_PART_MAIN); lv_obj_set_style_opa(circle, LV_OPA_30, LV_PART_MAIN); lv_obj_set_style_bg_opa(circle, LV_OPA_70, LV_PART_MAIN); lv_obj_set_style_border_opa(circle, LV_OPA_0, LV_PART_MAIN); lv_obj_set_style_bg_color(circle, lv_color_make(0, 102, 255), LV_PART_MAIN); lv_obj_set_style_shadow_width(circle, 200, LV_PART_MAIN); lv_obj_set_style_shadow_opa(circle, LV_OPA_70, LV_PART_MAIN); lv_obj_set_style_shadow_color(circle, lv_color_make(0, 102, 255), LV_PART_MAIN); lv_obj_set_style_shadow_spread(circle, 80, LV_PART_MAIN); `

kisvegabor commented 2 years ago

With v8.1 it should look better, the horizontal/vertical line issue is already fixed. But the issue of circular color is there where the background and the shadow overlaps.

I suggest this trick:

     lv_obj_t* circle = lv_obj_create(main);
     lv_obj_clear_flag(circle, LV_OBJ_FLAG_SCROLLABLE);

     /*Small object positioned out of the screen*/
     lv_obj_set_pos(circle, -1, -1);
     lv_obj_set_size(circle, 1, 1);

     lv_obj_set_style_radius(circle, LV_RADIUS_CIRCLE, LV_PART_MAIN);
     lv_obj_set_style_opa(circle, LV_OPA_30, LV_PART_MAIN);
     lv_obj_set_style_bg_opa(circle, LV_OPA_70, LV_PART_MAIN);
     lv_obj_set_style_border_opa(circle, LV_OPA_0, LV_PART_MAIN);
     lv_obj_set_style_bg_color(circle, lv_color_make(0, 102, 255), LV_PART_MAIN);

     lv_obj_set_style_shadow_width(circle, 200, LV_PART_MAIN);
     lv_obj_set_style_shadow_opa(circle, LV_OPA_70, LV_PART_MAIN);
     lv_obj_set_style_shadow_color(circle, lv_color_make(0, 102, 255), LV_PART_MAIN);
     lv_obj_set_style_shadow_spread(circle, 180, LV_PART_MAIN);     /*Large spread*/
     lv_obj_set_style_shadow_ofs_x(circle, 20, LV_PART_MAIN);       /*And some offset*/
     lv_obj_set_style_shadow_ofs_y(circle, 20, LV_PART_MAIN);

image

Note that it can be slow to render such a large shadow and an image with ALPHA_8BIT format might be e better choice.

Akery commented 2 years ago

thank you.