Canvas (lv_canvas)
Overview
A Canvas inherits from Image where the user can draw anything. Rectangles, texts, images, lines, arcs can be drawn here using lvgl's drawing engine.
Parts and Styles
LV_PART_MAIN
Uses the typical rectangle style properties and image
style properties.
Usage
Buffer
The Canvas needs a buffer in which it stores the drawn image. To assign a
buffer to a Canvas, use
lv_canvas_set_buffer(canvas, buffer, width, height, LV_COLOR_FORMAT_...).
Where buffer
is a static buffer (not just a local variable) to hold
the image of the canvas. For example for a 100x50 ARGB8888 buffer:
static uint8_t buffer[100 * 50 * 4]
.
Or you can use
static uint8_t buffer[LV_CANVAS_BUF_SIZE(width, height, bit_per_pixel, stride_in_bytes)]
.
The canvas supports all the color formats like
LV_COLOR_FORMAT_ARGB8888
or LV_COLOR_FORMAT_I2
. See the full
list in the Color formats section.
Indexed colors
For LV_COLOR_FORMAT_I1/2/4/8
color formats a palette needs to be
initialized with lv_canvas_set_palette(canvas, 3, lv_color_hex(0xff0000)). It
sets pixels with index=3 to red.
Drawing
To set a pixel's color on the canvas, use
lv_canvas_set_px_color(canvas, x, y, color, opa). With
LV_COLOR_FORMAT_I1/2/4/8
the index of the color needs to be passed as
color like this lv_color_from_int(13);
. It passes index 13 as a color.
lv_canvas_fill_bg(canvas, lv_color_hex(0x00ff00), LV_OPA_50) fills the whole
canvas to blue with 50% opacity. Note that if the current color format
doesn't support colors (e.g. LV_COLOR_FORMAT_A8
) the color will be
ignored. Similarly, if opacity is not supported
(e.g. LV_COLOR_FORMAT_RGB565
) it will be ignored.
An array of pixels can be copied to the canvas with lv_canvas_copy_buf(canvas, buffer_to_copy, x, y, width, height). The color format of the buffer and the canvas need to match.
To draw something to the canvas use LVGL's draw functions directly. See the examples for more details.
The draw function can draw to any color format to which LVGL can render. Typically it means
LV_COLOR_FORMAT_RGB565
, LV_COLOR_FORMAT_RGB888
,
LV_COLOR_FORMAT_XRGB888
, and LV_COLOR_FORMAT_ARGB8888
.
Events
No special events are sent by canvas objects. The same events are sent as for the
See the events of the lv_image.h too.
Learn more about Events.
Keys
No Keys are processed by the object type.
Learn more about Keys.
Example
Drawing on the Canvas and rotate
C code
View on GitHubTransparent Canvas with chroma keying
C code
View on GitHubDraw a rectangle to the canvas
C code
View on GitHubDraw a label to the canvas
C code
View on GitHubDraw an arc to the canvas
C code
View on GitHubDraw an image to the canvas
C code
View on GitHubDraw a line to the canvas
C code
View on GitHubDraw a vector graphic to the canvas
C code
View on GitHub