Drawing arc in Clock wise direction

How-to
#1

Hi, kisvegabor! at first, thank you good code!
My UI designer design a progress ARC object to indicate the progress of a job. the arc start at the 12 :00 clock position as 0 degree, then crop at 3deg/second speed, at clock wise directtion. and finish ed at 360 degree(the start point) when task is ready.
the problem is: the lvgl library’s arc object implement isn’t clock wise, How can I do ?
thank you a lot!!

#2

the problem is: the LVG’s ARC object implement isn’t clock wise, How can I do ?
thank you a lot!!

#3

You should be able to use math and invert it for counter-clockwise operation.

#4

thank u!@embeddedt.
but the direction isn’t clock wise. I need the arc incresing in degree from 0 to 360 clockwise, but it isn’t.

can i rotate the arc 180degreen entirely? it seemed that lvgl can’t rotate object.

#5

I know. But like I said, you can use math and calculate the right values for clockwise. Read my post carefully.

#6

/Create a style for the running arc./
static lv_style_t arc_thick_style;
lv_style_copy(&arc_thick_style,&arc_thin_style);
arc_thick_style.line.width = 8; /8 px thick arc/
arc_thick_style.line.color = LV_COLOR_WHITE;
/Create the thick Arc/
arc_thick = lv_arc_create(parent, NULL);

    lv_arc_set_style(arc_thick, LV_ARC_STYLE_MAIN, &arc_thick_style);          /*Use the new style*/
    lv_obj_set_size(arc_thick, 162, 162);
    lv_obj_set_pos(arc_thick, 39,54);
   lv_arc_set_angles(arc_thick, 180, 270 );

just as my code above, the arc is now display 12:00 – 9:00 ,but i hope it is displayed as 0:00(12:00)–3:00, (180deg-270deg,clockwise.)

#7

What happens if you use 180 to 90?

#8

i will try again. thank you @embeddedt

#9

It’s really not so intuitive now. I played with it and added an example:
https://docs.littlevgl.com/en/html/object-types/arc.html#loader-with-arc

1 Like
#10

thanks !!!@kisvegabor:hamburger::hamburger::hamburger:
I see the effect, it is what i want. :+1::+1:强大(very cool!!)

#11

You are welcome! :slight_smile:

#12

你好。我在使用arc时也遇到的一些问题？能想你请教吗？

#13

Please open a new issue with your problem and fill out the template.