先看效果，创建了两个画布，一个按钮，按钮是为了演示透明画布效果，

第一个画布先画一个不透明蓝色矩形再画透明矩形，透过画布可以看到下面的按钮

第二个面布画了一个圆角矩形中间填充过渡色，再画一个字符串，然后将整个画布旋转指定角度

开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft=t&id=626366733674

一、开发板简介

二、开发环境搭建 windows

三、基础示例

四、LVGL控件使用示例

LVGL_Arc_Test 圆弧指示器通过触摸动态改变值
LVGL_Bar_Test 通过动画方式动态演示Bar进度条的使用方法
  LVGL_Button_Test 通过5种不同动态效果的按钮学习按钮的创建与使用
  LVGL_ButtonMatrix_Test 创建一个计算器布局来演示矩阵按钮控件的使用
  LVGL_Calendar_Test 日历控件的创建和使用
LVGL_Canvas_Test 透明画布和画一个圆角过渡色矩形旋转角度学习画布的使用
  LVGL_Chart_Test 通过创建三个不同风格的图表来学习图表控件的使用
  LVGL_Checkbox_Test 学习复选框控件的创建和使用
  LVGL_ColorPicker_Test 创建一个颜色选择器并动态显示当前颜色的RGB值
  LVGL_Container_Test 在容器控件上动态创建三个文本标签
  LVGL_Drop_down_List_Test 创建三个不同类型的下拉选择控件
  LVGL_Gauge_Test 创建一个动态仪表和静态多指针仪表
  LVGL_Image_Test 通过四个滑动条控制图片颜色的变化学习图像控件的使用
  LVGL_ImageButton_Test   创建一个图片背景的图像按钮
  LVGL_Keyboard_Test 通过一个文本输入框控件还学习键盘控件的调用关闭设置
  LVGL_Label_Test   创建颜色可变，长文本滚动，带阴影3D效果三个标签控件
LVGL_LED_Test   创建三个LED，学习LED控件的调光，颜色，开关的设置
  LVGL_Line_Test   通过二维数组创建一段折线来演示线控件的使用
  LVGL_LineMeter_Test 创建两个不同的线段弧形指示器动态展示数据
  LVGL_List_Test 创建一个带图标的列表控件
  LVGL_MessageBox_Test 创建一个带按钮的消息框控件
  LVGL_ObjectMask_Test 创建一个变幻色的文本学习蒙版遮罩效果
  LVGL_Page_Test 学习页面控件的使用
  LVGL_Roller_Test 通过示例学习滑动列表选择器控件
  LVGL_Slider_Test 创建一个单向和一个双向滑动条控件
  LVGL_Spinbox_Test 学习微调控件的使用
  LVGL_Spinner_Test 创建三个不同的环形加载器
  LVGL_Switch_Test 创建两个不同的开关控件
  LVGL_Table_Test 创建一个简单的表格
  LVGL_Tabview_Test 实现三页的页面切换学习Tabview控件
  LVGL_Textarea_Test 长按实现打字机效果的Textarea控件
  LVGL_Tileview_Test 实现四面环形触摸切换的Tileview控件
  LVGL_Window_Test 创建一个窗口，带设置子窗口学习窗口控件的使用

画布(lv_canvas):

画布继承自图像，用户可以在其中绘制任何内容。可以使用lvgl的绘图引擎在此处绘制矩形，文本，图像，线弧。除了一些“效果”，还可以应用，例如旋转，缩放和模糊。

零件和样式

画布的一个主要部分称为 LV_CANVAS_PART_MAIN ，只有image_recolor属性用于为 LV_IMG_CF_ALPHA_1/2/4/8BIT 图像赋予颜色。

用法

缓冲区

画布需要一个缓冲区来存储绘制的图像。要将缓冲区分配给画布，请使用 lv_canvas_set_buffer(canvas, buffer, width, height, LV_IMG_CF_...) 。其中 buffer 是用于保存画布图像的静态缓冲区（而不仅仅是局部变量）。例如， static lv_color_t buffer[LV_CANVAS_BUF_SIZE_TRUE_COLOR(width, height)] 。 LV_CANVAS_BUF_SIZE_... 宏有助于确定不同颜色格式的缓冲区大小。

画布支持所有内置的颜色格式，例如 LV_IMG_CF_TRUE_COLOR 或 LV_IMG_CF_INDEXED_2BIT 。请参阅颜色格式部分中的完整列表。

调色板

对于 LV_IMG_CF_INDEXED_... 颜色格式，需要使用 lv_canvas_set_palette(canvas, 3, LV_COLOR_RED) 初始化调色板。它将 index=3 的像素设置为红色。

画画

要在画布上设置像素，请使用 lv_canvas_set_px(canvas, x, y, LV_COLOR_RED) 。对于 LV_IMG_CF_INDEXED _... 或 LV_IMG_CF_ALPHA _... ，需要将颜色的索引或alpha值作为颜色传递。例如： lv_color_t c; c.full = 3 ;

lv_canvas_fill_bg(canvas, LV_COLOR_BLUE, LV_OPA_50) 将整个画布填充为蓝色，不透明度为50％。请注意，如果当前的颜色格式不支持颜色（例如 LV_IMG_CF_ALPHA_2BIT ），则会忽略颜色。同样，如果不支持不透明度（例如 LV_IMG_CF_TRUE_COLOR ），则会将其忽略。

可以使用 lv_canvas_copy_buf(canvas, buffer_to_copy, x, y, width, height) 将像素数组复制到画布。缓冲区和画布的颜色格式需要匹配。

画一些东西到画布上使用

lv_canvas_draw_rect(canvas, x, y, width, heigth, &draw_dsc)
lv_canvas_draw_text(canvas, x, y, max_width, &draw_dsc, txt, LV_LABEL_ALIGN_LEFT/CENTER/RIGHT)
lv_canvas_draw_img(canvas, x, y, &img_src, &draw_dsc)
lv_canvas_draw_line(canvas, point_array, point_cnt, &draw_dsc)
lv_canvas_draw_polygon(canvas, points_array, point_cnt, &draw_dsc)
lv_canvas_draw_arc(canvas, x, y, radius, start_angle, end_angle, &draw_dsc)

draw_dsc 是 lv_draw_rect/label/img/line_dsc_t 变量，应首先使用 lv_draw_rect/label/img/line_dsc_init() 函数初始化，然后使用所需的颜色和其他值对其进行修改。

绘制功能可以绘制为任何颜色格式。例如，可以在 LV_IMG_VF_ALPHA_8BIT 画布上绘制文本，然后将结果图像用作lv_objmask中的蒙版。

旋转和缩放

lv_canvas_transform() 可用于旋转和/或缩放图像的图像并将结果存储在画布上。该函数需要以下参数：

canvas 指向画布对象以存储转换结果的指针。
img pointer 转换为图像描述符。也可以是其他画布的图像描述符（ lv_canvas_get_img() ）。
angle 旋转角度（0..3600），0.1度分辨率
zoom 缩放系数（256不缩放，512倍大小，128个一半大小）；
offset_x 偏移量X，以指示将结果数据放在目标画布上的位置
offset_y 偏移量Y，以指示将结果数据放在目标画布上的位置
pivot_x 旋转的X轴。相对于源画布。设置为 源宽度/ 2 以围绕中心旋转
pivot_y 旋转的枢轴Y。相对于源画布。设置为 源高度/ 2 以围绕中心旋转
antialias true：在转换过程中应用抗锯齿。看起来更好，但速度较慢。

请注意，画布无法自身旋转。您需要源和目标画布或图像。

模糊效果

画布的给定区域可以使用 lv_canvas_blur_hor(canvas, &area, r) 水平模糊，垂直使用 lv_canvas_blur_ver(canvas, &area, r) 模糊。r是模糊的半径（值越大表示毛刺强度越大）。 area 是应该应用模糊的区域（相对于画布进行解释）

事件

默认情况下，画布的单击被禁用（由Image继承），因此不生成任何事件。

如果启用了单击（lv_obj_set_click（canvas，true）），则仅通用事件由对象类型发送。

了解有关事件的更多信息。

按键

画布对象类型不处理任何键。

ESP32 开发笔记(四）LVGL控件学习 Canvas 画布控件相关推荐

LVGL『Canvas画布控件』介绍
一. LVGL GUI画布控件的概念画布继承自图像,用户可以在其中绘制任何内容.可以使用 lvgl 的绘图引擎在此处绘制矩形,文本,图像,圆弧.除了一些"效果",还可以应用,例如 ...
ESP32 开发笔记(四）LVGL控件学习 ColorPicker 颜色选择器控件
先看效果,创建一个颜色选择器控件,设置事件回调动态显示当前选择的颜色值开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.5 ...
ESP32 开发笔记(四）littleVGL LVGL 控件学习 Arc 弧形控件
先看效果,创建了两个Arc 弧形控件,一个可触摸拖动的默认风格,一个动画控制的自定义风格的弧形控件 ESP-IDF版本:V4.2 littleVGL版本:V7.10.0 开发板购买链接https:// ...
ESP32 开发笔记(四）LVGL控件学习 Table 表格控件
先看效果,创建一个简单的表格开发板购买链接https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111deb2Ij1As&ft= ...
Android初级开发笔记-- activity启动模式的学习（1）
第一次学习Android中一个很重要的概念,启动模式.文章记录的也只是一些入门知识,随着学习的深入还会有activity启动模式的学习(2)和(3). 下面分三个小点说一下对启动模式的理解区别以及如何 ...
【Visual C++】游戏开发笔记四十三浅墨DirectX教程十一为三维世界添彩：纹理映射技术(二)...
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 作者:毛星云(浅墨) 邮箱: happylifemxy@163.com 本篇文章里,我们首先对Direct3D之中固定功能流水线中的 ...
【Visual C++】游戏开发笔记四十六浅墨DirectX教程十四模板测试与镜面特效专场
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/details/8632184 作者:毛星云( ...
【Visual C++】游戏开发笔记四十三浅墨DirectX教程十一为三维世界添彩纹理映射技术二
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本系列文 ...
物联网开发笔记（83）- 使用Micropython开发ESP32开发板之触控TouchPad操作
一.目的这一节我们学习如何使用我们的ESP32开发板来学习触控TouchPad操作. 二.环境 ESP32 + Thonny + 几根杜邦线 + Win10 接线方法: 三.代码 from ...

ESP32 开发笔记(四）LVGL控件学习 Canvas 画布控件