How to solve the strange at rounded-ending-line?

How-to
1

Description

I have just tried line with width and rounded-ending.
But the result comes out some stranges
such as

  • horizontal/vertical line with width : the result displays haft-width of line .
  • rounded-ending : only one side is rounded, the other is not.

(as the following picture.)

What MCU/Processor/Board and compiler are you using?

  • ESP32
  • lvgl 6.0.2 master

What do you want to achieve?

Line with width and rounded-ending can display correctly at any angle.

What have you tried so far?

Code to reproduce

void create_lines() {
  lv_obj_t* line1, *line2, *line3;
  line1 = lv_line_create(lv_scr_act(), NULL);
  line2 = lv_line_create(lv_scr_act(), NULL);
  line3 = lv_line_create(lv_scr_act(), NULL);
  
  static lv_point_t p1[] = {  {50,50},  {280,50} };
  static lv_point_t p2[] = {  {50,100}, {280,200} };
  static lv_point_t p3[] = {  {160,20}, {160,200} };

  lv_line_set_points(line1, p1, 2 );
  lv_line_set_points(line2, p2, 2 );
  lv_line_set_points(line3, p3, 2 );

  static lv_style_t style1, style2, style3;
  lv_style_copy(&style1, &lv_style_plain);
  lv_style_copy(&style2, &lv_style_plain);
  lv_style_copy(&style3, &lv_style_plain);
  lv_obj_set_style(line1, &style1);
  lv_obj_set_style(line2, &style2);
  lv_obj_set_style(line3, &style3);

  style1.line.color= LV_COLOR_RED;
  style1.line.width= 30;
  style1.line.rounded = true;
  
  style2.line.color= LV_COLOR_BLUE;
  style2.line.width= 30;
  style2.line.rounded = true;

  style3.line.color= LV_COLOR_GREEN;
  style3.line.width= 30;
  style3.line.rounded = true;
}

Screenshot and/or video

image

2

When turn off rounded-ending

  style1.line.color= LV_COLOR_RED;
  style1.line.width= 30;
  style1.line.rounded = false;
  
  style2.line.color= LV_COLOR_BLUE;
  style2.line.width= 30;
  style2.line.rounded = false;

  style3.line.color= LV_COLOR_GREEN;
  style3.line.width= 30;
  style3.line.rounded = false;

image

3

Have you tried it on the PC simulator? Does it work there?

4

I guess the issue occurs maybe from these lines ?

5

Please test it on the PC simulator and see if it works there.

6

LittlevGL sets the object’s size automatically when you call lv_line_set_points. It takes style.line.width into account.
However, when you set the style after lv_line_set_points the line’s width changes but the object’s size is not updated therefore some parts are clipped.

You should either

  1. set the styles before calling lv_line_set_points
  2. disable auto size (lv_line_set_auto_size(line, false) and set the object’s size manually with lv_obj_set_size(l)
1 Like
7

Thank you.
Solved by lv_line_set_points before set the style.