How to draw a dash circle?


I want to draw a dash circle, how can i do?

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


What LVGL version are you using?


What do you want to achieve?

draw a dash circle

What have you tried so far?

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

/*You code here*/

Screenshot and/or video

I want to draw like this:
资源 77

Did you figure out how? Also faced the same problem

Here is an example. This is using LVGL version 9.0 so if you are using 8.x you will need to make some changes but it will give you the general idea.

This code is pseudo code and has not been tested. It will more than likely have problems with it but it gives you the general idea. I show how to render a dashed circle and also a dashed ellipse as well.

#include <math.h>
#include "lvgl.h"

// *************** ellipsis specific ***********************
/* This code can also be used to render a circle as well.
 * LVGL has a built in function for rendering aa circle but it is 
 * reliant on angles that have a precision of 0.1 degrees. So if you
 * need to have greater precision then I recommend using the
 * code below and setting the raadius verticaal and raadius horizontal to 
 * be the same value.  

#define PI2  (2.0f * 3.14159265359f)
#define DEG = (180.0f / 3.14159265359f)

typedef struct {
    float x;
    float y;
} fpoint_t;

lv_point_t fpoint_to_lv_point(fpoint_t point) {
    lv_point_t res;
    res.x = (lv_coord_t) point.x;
    res.y = (lv_coord_t) point.y;
    return res;

typedef struct {
    float_t center;
    float radius_horizontal;
    float radius_vertical;
} ellipsis_t;

float angle_from_point_on_ellipsis(ellipsis_t e, fpoint_t point) {
    float arc_tan = (float) atan2((double) (e.point.y - point.y), (double) (e.point.x - point.x));
    return arc_tan * DEG;

fpoint_t get_point_from_angle(ellipsis_t e, float a) {
    double ang = (double) (a / DEG);

    float x = (float) cos(ang);
    float y = (float) sin(ang);
    float aa = e.point.x * e.point.x;
    float bb = e.point.y * e.point.y;
    float t = aa * bb / ((x * x * bb) + (y * y * aa));
    x *= t;
    y *= t;
    y *= e.point.x / e.point.y;
    float ea = (float) atan2((double)y, (double)x);
    if (ea < 0.0f) {
        ea += PI2;

    float rh = e.radius_horizontal;
    float rv = e.radius_vertical;
    x = e.point.x;
    y = e.point.y;

    float co = (float) cos((double) ea);
    float si = (float) sin((double) ea);
    float ta = si / co  # tan(a);
    float tt = ta * rh / rv  # tan(t);
    float d = 1.0f / (float) sqrt((double) (1.0f + tt * tt));
    if (co < 0.0f) {
       x -= rh * d;
    } else {
       x += rh * d;
    if (si < 0.0f) {
        y -= rv * tt * d;
    } else {
        y += rv * tt * d;

    res = fpoint_t;
    res.x = x;
    res.y = y;
    return res;
// *********************************************************

// create the canvas
lv_canvas_t * canvas = lv_canvas_create(lv_scr_act());

// creaate aand set the caanvas buffer
uint8_t buf[300 * 150 * sizeof(lv_color_t)];
lv_canvas_set_buffer(canvas, buf, 300, 150, LV_COLOR_FORMAT_NATIVE)

// position and size the canvas
lv_obj_set_size(canvas, 300, 150);

// rendering a dashed ellipsis
ellipsis_t ellipsis;
ellipsis.point.x = 225.0f;
ellipsis.point.y = 75.0f;
ellipsis.radius_horizontal = 50.0f;
ellipsis.radius_vertical = 25.0f;

lv_draw_line_dsc_t line_dsc;
dsc.color = lv_color_hex(0xFF0000);
dsc.width = 2;
dcs.opa = 255;

for (float i = 0.0f; i < 360.0f; i += 10.0f) {
    const lv_point_t points[] = {
        fpoint_to_lv_point(get_point_from_angle(ellipsis, i)),
        fpoint_to_lv_point(get_point_from_angle(ellipsis, i + 3.0f)),
        fpoint_to_lv_point(get_point_from_angle(ellipsis, i + 6.0f)),

    lv_canvas_draw_line(canvas, points, 3, &line_dsc);

// rendering a dashed circle using LVGL's built in function.
int32_t start_angle;
int32_t end_angle;

lv_draw_arc_dsc_t arc_dsc;

arc_dsc.color = lv_color_hex(0xFF0000);
arc_dsc.width = 2;
arc_dsc.opa = 255;

for (start_angle=0;start_angle<3600;start_angle+=100) {
    end_angle = start_angle + 60;
    lv_canvas_draw_arc(canvas, 75, 75, 50, start_angle, end_angle, &arc_dsc);

This code is not going to be memory efficient and that will be the responsibility of you to make changes to make it as memory efficient as possible. If you want to use the ellipse portion of the code it is going to be processor heavy due to the floating point math, if you need to use it in a real time scenario I recommend making changes so it will use integer math.

Again this is for showing the general idea and it may not run.