diff --git a/docs/src/main-modules/draw/draw_descriptors.rst b/docs/src/main-modules/draw/draw_descriptors.rst index e0035e884e..cc198d05f9 100644 --- a/docs/src/main-modules/draw/draw_descriptors.rst +++ b/docs/src/main-modules/draw/draw_descriptors.rst @@ -677,9 +677,64 @@ following fields: Vector Draw Descriptor ********************** -TODO +Vector rendering works slightly differently than the other draw descriptors, because +the data required to describe the operation doesn't have a fixed length. +The key element of vector rendering is a "path" (:cpp:expr:`lv_vector_path_t`) which describes +the shape of the drawing using lines, arcs, and curves. The paths can be stroked +(draw a line on the path) and filled (fill the path with a color, gradient, or image). +A :cpp:expr:`lv_draw_vector_dsc_t` vector descriptor can hold multiple paths. + +The flow of creating a new vector descriptor is the following. + +1. Create a vector draw descriptor: + +.. code-block:: c + + lv_draw_vector_dsc_t * dsc = lv_draw_vector_dsc_create(layer); + +2. Create a path + +.. code-block:: c + + lv_vector_path_t * path = lv_vector_path_create(LV_VECTOR_PATH_QUALITY_MEDIUM); + +3. Set the shape of the path. The following show a few simple functions for that: + + - :cpp:expr:`lv_vector_path_clear`: Clear all lines, arcs, and curves from a path + - :cpp:expr:`lv_vector_path_move_to`: Move to a point without drawing any lines + - :cpp:expr:`lv_vector_path_line_to`: Add a line to the path from last point to the point + - :cpp:expr:`lv_vector_path_quad_to`: Add a quadratic bezier line to the path from last point to the point + - :cpp:expr:`lv_vector_path_cubic_to`: Add a cubic bezier line to the path from last point to the point + - :cpp:expr:`lv_vector_path_arc_to`: Add ellipse arc to the path from last point to the point + - :cpp:expr:`lv_vector_path_close`: Close the sub path by connecting the first and last point + +4. Set the stroke and fill settings on the draw descriptor for the given path. Use functions like: + + - :cpp:expr:`lv_draw_vector_dsc_set_stroke_color`: Set stroke color for a descriptor. + - :cpp:expr:`lv_draw_vector_dsc_set_stroke_opa`: Set stroke opacity for a descriptor + - :cpp:expr:`lv_draw_vector_dsc_set_stroke_width`: Set stroke width for a descriptor. + - :cpp:expr:`lv_draw_vector_dsc_set_fill_color`: Set fill color for a descriptor. + - :cpp:expr:`lv_draw_vector_dsc_set_fill_opa`: Set fill opacity for a descriptor. + +5. Add the path to the descriptor. It will apply the stroke and fill settings for the path: + +.. code-block:: c + + lv_draw_vector_dsc_add_path(dsc, path); + +6. If more paths are needed, clear the path or create a new one, and add it to the draw descriptor too. + +7. Start drawing and clean up: + +.. code-block:: c + + lv_draw_vector(dsc); + lv_vector_path_delete(path); + lv_draw_vector_dsc_delete(dsc); + +To see all the path, stroke, and fill options, check out `lv_draw_vector.h `__ . Masking Operation ***************** diff --git a/src/draw/lv_draw_vector.h b/src/draw/lv_draw_vector.h index c7e6d3bfee..1d5c12f434 100644 --- a/src/draw/lv_draw_vector.h +++ b/src/draw/lv_draw_vector.h @@ -346,7 +346,6 @@ void lv_draw_vector_dsc_set_fill_image(lv_draw_vector_dsc_t * dsc, const lv_draw void lv_draw_vector_dsc_set_fill_linear_gradient(lv_draw_vector_dsc_t * dsc, float x1, float y1, float x2, float y2); /** - * Set fill radial gradient radius for descriptor * The new path shapes added by `lv_draw_vector_dsc_add_path` will use this gradient. * @param dsc pointer to a vector graphic descriptor diff --git a/src/widgets/chart/lv_chart.c b/src/widgets/chart/lv_chart.c index 92b2d2ca4a..059a07d295 100644 --- a/src/widgets/chart/lv_chart.c +++ b/src/widgets/chart/lv_chart.c @@ -1327,7 +1327,7 @@ static void draw_series_curve(lv_obj_t * obj, lv_layer_t * layer) valid_point_cnt++; } - lv_draw_vector_dsc_add_path(dsc, path); // draw a path + lv_draw_vector_dsc_add_path(dsc, path); /* Draw a path */ if(dsc->base.id1 > 0) { point_dsc_default.base.id1--;