热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

LVGL小部件–LVGL画布

画布(lv_canvas),画布继承自图像,用户可以在其中绘制任何内容。可以使用lvgl的绘图引擎在此处绘制矩形,文本,图像,线弧。除了一些“效果”,还可以

画布(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_COLORLV_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_dsclv_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)),则仅 通用事件 由对象类型发送。

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

按键

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

进一步了解 按键 。

范例


在画布上绘图并旋转

LVGL画布

在画布上绘图并旋转

上述效果的示例代码:

#include "../../../lv_examples.h"
#if LV_USE_CANVAS
#define CANVAS_WIDTH 200
#define CANVAS_HEIGHT 150
void lv_ex_canvas_1(void)
{
lv_draw_rect_dsc_t rect_dsc;
lv_draw_rect_dsc_init(&rect_dsc);
rect_dsc.radius = 10;
rect_dsc.bg_opa = LV_OPA_COVER;
rect_dsc.bg_grad_dir = LV_GRAD_DIR_HOR;
rect_dsc.bg_color = LV_COLOR_RED;
rect_dsc.bg_grad_color = LV_COLOR_BLUE;
rect_dsc.border_width = 2;
rect_dsc.border_opa = LV_OPA_90;
rect_dsc.border_color = LV_COLOR_WHITE;
rect_dsc.shadow_width = 5;
rect_dsc.shadow_ofs_x = 5;
rect_dsc.shadow_ofs_y = 5;
lv_draw_label_dsc_t label_dsc;
lv_draw_label_dsc_init(&label_dsc);
label_dsc.color = LV_COLOR_YELLOW;
static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_TRUE_COLOR(CANVAS_WIDTH, CANVAS_HEIGHT)];
lv_obj_t * canvas = lv_canvas_create(lv_scr_act(), NULL);
lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_TRUE_COLOR);
lv_obj_align(canvas, NULL, LV_ALIGN_CENTER, 0, 0);
lv_canvas_fill_bg(canvas, LV_COLOR_SILVER, LV_OPA_COVER);
lv_canvas_draw_rect(canvas, 70, 60, 100, 70, &rect_dsc);
lv_canvas_draw_text(canvas, 40, 20, 100, &label_dsc, "Some text on text canvas", LV_LABEL_ALIGN_LEFT);
/* Test the rotation. It requires an other buffer where the orignal image is stored.
* So copy the current image to buffer and rotate it to the canvas */
static lv_color_t cbuf_tmp[CANVAS_WIDTH * CANVAS_HEIGHT];
memcpy(cbuf_tmp, cbuf, sizeof(cbuf_tmp));
lv_img_dsc_t img;
img.data = (void *)cbuf_tmp;
img.header.cf = LV_IMG_CF_TRUE_COLOR;
img.header.w = CANVAS_WIDTH;
img.header.h = CANVAS_HEIGHT;
lv_canvas_fill_bg(canvas, LV_COLOR_SILVER, LV_OPA_COVER);
lv_canvas_transform(canvas, &img, 30, LV_IMG_ZOOM_NONE, 0, 0, CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2, true);
}
#endif

色度键控的透明画布

LVGL画布

色度键控的透明画布

上述效果的示例代码:

#include "../../../lv_examples.h"
#if LV_USE_CANVAS
#define CANVAS_WIDTH 50
#define CANVAS_HEIGHT 50
/**
* Create a transparent canvas with Chroma keying and indexed color format (palette).
*/
void lv_ex_canvas_2(void)
{
/*Create a button to better see the transparency*/
lv_btn_create(lv_scr_act(), NULL);
/*Create a buffer for the canvas*/
static lv_color_t cbuf[LV_CANVAS_BUF_SIZE_INDEXED_1BIT(CANVAS_WIDTH, CANVAS_HEIGHT)];
/*Create a canvas and initialize its the palette*/
lv_obj_t * canvas = lv_canvas_create(lv_scr_act(), NULL);
lv_canvas_set_buffer(canvas, cbuf, CANVAS_WIDTH, CANVAS_HEIGHT, LV_IMG_CF_INDEXED_1BIT);
lv_canvas_set_palette(canvas, 0, LV_COLOR_TRANSP);
lv_canvas_set_palette(canvas, 1, LV_COLOR_RED);
/*Create colors with the indices of the palette*/
lv_color_t c0;
lv_color_t c1;
c0.full = 0;
c1.full = 1;
/*Transparent background*/
lv_canvas_fill_bg(canvas, c1, LV_OPA_TRANSP);
/*Create hole on the canvas*/
uint32_t x;
uint32_t y;
for( y = 10; y <30; y++) {
for( x = 5; x <20; x++) {
lv_canvas_set_px(canvas, x, y, c0);
}
}
}
#endif

相关API


Typedefs

typedef uint8_t lv_canvas_part_t

enums

enum [anonymous]
值:
enumerator LV_CANVAS_PART_MAIN

函数

lv_obj_t * lv_canvas_create(lv_obj_t * par,constlv_obj_t *copy)
功能:创建一个画布对象
返回:
指向创建的画布的指针
形参:
par:指向对象的指针,它将是新画布的父对象
copy:指向画布对象的指针,如果不为NULL,则将从其复制新对象
void lv_canvas_set_buffer(lv_obj_t * canvas,void * buf,lv_coord_t w,lv_coord_t h,lv_img_cf_t cf )
功能:为画布设置缓冲区。
形参:
buf:画布内容所在的缓冲区。所需的大小为(lv_img_color_format_get_px_size(cf)* w)/ 8 * h)
可以使用它分配lv_mem_alloc()或可以是静态分配的数组(例如,静态lv_color_t buf [100 * 50]),
也可以是RAM中的地址或外部地址SRAM
canvas:指向画布对象的指针
w:画布的宽度
h:画布的高度
cf:颜色格式。LV_IMG_CF_...
void lv_canvas_set_px(lv_obj_t * canvas,lv_coord_t x,lv_coord_t y,lv_color_t c )
功能:设置画布上像素的颜色
形参:
canvas:
x:要设置点的x坐标
y:要设置点的x坐标
c:点的颜色
void lv_canvas_set_palette(lv_obj_t * canvas,uint8_t id,lv_color_t c )
功能:使用索引格式设置画布的调色板颜色。仅对LV_IMG_CF_INDEXED1/2/4/8
形参:
canvas:指向画布对象的指针
id:要设置的调色板颜色:
为LV_IMG_CF_INDEXED1:0..1
为LV_IMG_CF_INDEXED2:0..3
为LV_IMG_CF_INDEXED4:0..15
为LV_IMG_CF_INDEXED8:0..255
c:要设置的颜色
lv_color_t lv_canvas_get_px(lv_obj_t * canvas,lv_coord_t x,lv_coord_t y )
功能:获取画布上像素的颜色
返回:
点的颜色
形参:
canvas:
x:要设置点的x坐标
y:要设置点的x坐标
lv_img_dsc_t * lv_canvas_get_img(lv_obj_t * canvas )
功能:获取画布的图像作为指向lv_img_dsc_t变量的指针。
返回:
指向图像描述符的指针。
形参:
canvas:指向画布对象的指针
void lv_canvas_copy_buf(lv_obj_t *canvas,constvoid * to_copy,lv_coord_t x,lv_coord_t y,lv_coord_t w,lv_coord_t h )
功能:将缓冲区复制到画布
形参:
canvas:指向画布对象的指针
to_copy:要复制的缓冲区。颜色格式必须与画布的缓冲区颜色格式匹配
x:目标位置的左侧
y:目标位置的顶部
w:要复制的缓冲区的宽度
h:要复制的缓冲区的高度
void lv_canvas_transform(lv_obj_t * canvas,lv_img_dsc_t * img,int16_t angle,uint16_t zoom,lv_coord_t offset_x,lv_coord_t offset_y,int32_tivot_x,int32_tivot_y,bool antialias )
功能:转换并成像并将结果存储在画布上。
形参:
canvas:指向画布对象的指针,以存储转换结果。
img:指向要转换的图像描述符的指针。也可以是其他画布的图像描述符(lv_canvas_get_img())。
angle:旋转角度(0..3600),0.1度分辨率
zoom:变焦倍数(256无变焦);
offset_x:偏移X以告知将结果数据放在目标画布上的位置
offset_y:偏移X以告知将结果数据放在目标画布上的位置
pivot_x:旋转X轴。相对于源画布设置为围绕中心旋转source width / 2
pivot_y:旋转的枢轴Y。相对于源画布设置为围绕中心旋转source height / 2
antialias:在转换过程中应用抗锯齿。看起来更好,但速度较慢。
void lv_canvas_blur_hor(lv_obj_t *canvas,constlv_area_t * area,uint16_t r )
功能:在画布上应用水平模糊
形参:
canvas:指向画布对象的指针
area:要模糊的区域。如果NULL整个画布会模糊。
r:模糊半径
void lv_canvas_blur_ver(lv_obj_t *canvas,constlv_area_t * area,uint16_t r )
功能:在画布上应用垂直模糊
形参:
canvas:指向画布对象的指针
area:要模糊的区域。如果NULL整个画布会模糊。
r:模糊半径
void lv_canvas_fill_bg(lv_obj_t *canvas,lv_color_t color,lv_opa_t opa )
功能:用颜色填充画布
形参:
canvas:指向画布的指针
color:背景色
opa:所需的不透明度
void lv_canvas_draw_rect(lv_obj_t * canvas,lv_coord_t x,lv_coord_t y,lv_coord_t w,lv_coord_t h,constlv_draw_rect_dsc_t * rect_dsc )
功能:在画布上画一个矩形
形参:
canvas:指向画布对象的指针
x:矩形的左坐标
y:矩形的顶部坐标
w:矩形的宽度
h:矩形的高度
rect_dsc:矩形的描述符
void lv_canvas_draw_text(lv_obj_t *canvas,lv_coord_t x,lv_coord_t y,lv_coord_t max_w,lv_draw_label_dsc_t * label_draw_dsc,constchar * txt,lv_label_align_t align )
功能:在画布上绘制文本。
形参:
canvas:指向画布对象的指针
x:文本的左坐标
y:文本的顶部坐标
max_w:文字的最大宽度。文本将被包装以适合此大小
label_draw_dsc:指向有效标签描述符的指针 lv_draw_label_dsc_t
txt:要显示的文字
align:对齐文字(LV_LABEL_ALIGN_LEFT/RIGHT/CENTER)
void lv_canvas_draw_img(lv_obj_t * canvas,lv_coord_t x,lv_coord_t y,constvoid * src,constlv_draw_img_dsc_t * img_draw_dsc )
功能:在画布上绘制图像
形参:
canvas:指向画布对象的指针
x:图像的左坐标
y:图像的最高坐标
src:图像源。可以是lv_img_dsc_t变量的指针或图像的路径。
img_draw_dsc:指向有效标签描述符的指针 lv_draw_img_dsc_t
void lv_canvas_draw_line(lv_obj_t *canvas,constlv_point_t points[],uint32_t point_cnt,constlv_draw_line_dsc_t * line_draw_dsc )
功能:在画布上画一条线
形参:
canvas:指向画布对象的指针
points:线的点
point_cnt:点数
line_draw_dsc:指向初始化lv_draw_line_dsc_t变量的指针
void lv_canvas_draw_polygon(lv_obj_t *canvas,constlv_point_t点[],uint32_t point_cnt,constlv_draw_rect_dsc_t * poly_draw_dsc )
功能:在画布上绘制多边形
形参:
canvas:指向画布对象的指针
points:多边形的点
point_cnt:点数
poly_draw_dsc:指向初始化lv_draw_rect_dsc_t变量的指针
void lv_canvas_draw_arc(lv_obj_t * canvas,lv_coord_t x,lv_coord_t y,lv_coord_t r,int32_t start_angle,int32_t end_angle,constlv_draw_line_dsc_t * arc_draw_dsc )
功能:在画布上画圆弧
形参:
canvas:指向画布对象的指针
x:弧的origo x
y:弧线的起源
r:圆弧半径
start_angle:起始角度(度)
end_angle:结束角度(度)
arc_draw_dsc:指向初始化lv_draw_line_dsc_t变量的指针


推荐阅读
  • 本文将深入探讨如何在不依赖第三方库的情况下,使用 React 处理表单输入和验证。我们将介绍一种高效且灵活的方法,涵盖表单提交、输入验证及错误处理等关键功能。 ... [详细]
  • 深入解析Java枚举及其高级特性
    本文详细介绍了Java枚举的概念、语法、使用规则和应用场景,并探讨了其在实际编程中的高级应用。所有相关内容已收录于GitHub仓库[JavaLearningmanual](https://github.com/Ziphtracks/JavaLearningmanual),欢迎Star并持续关注。 ... [详细]
  • 在高并发需求的C++项目中,我们最初选择了JsonCpp进行JSON解析和序列化。然而,在处理大数据量时,JsonCpp频繁抛出异常,尤其是在多线程环境下问题更为突出。通过分析发现,旧版本的JsonCpp存在多线程安全性和性能瓶颈。经过评估,我们最终选择了RapidJSON作为替代方案,并实现了显著的性能提升。 ... [详细]
  • 开发笔记:9.八大排序
    开发笔记:9.八大排序 ... [详细]
  • 利用决策树预测NBA比赛胜负的Python数据挖掘实践
    本文通过使用2013-14赛季NBA赛程与结果数据集以及2013年NBA排名数据,结合《Python数据挖掘入门与实践》一书中的方法,展示如何应用决策树算法进行比赛胜负预测。我们将详细讲解数据预处理、特征工程及模型评估等关键步骤。 ... [详细]
  • 本题来自WC2014,题目编号为BZOJ3435、洛谷P3920和UOJ55。该问题描述了一棵不断生长的带权树及其节点上小精灵之间的友谊关系,要求实时计算每次新增节点后树上所有可能的朋友对数。 ... [详细]
  • 本文介绍了如何在 C# 和 XNA 框架中实现一个自定义的 3x3 矩阵类(MMatrix33),旨在深入理解矩阵运算及其应用场景。该类参考了 AS3 Starling 和其他相关资源,以确保算法的准确性和高效性。 ... [详细]
  • 探讨ChatGPT在法律和版权方面的潜在风险及影响,分析其作为内容创造工具的合法性和合规性。 ... [详细]
  • 本文详细介绍了虚拟专用网(Virtual Private Network, VPN)的概念及其通过公共网络(如互联网)构建临时且安全连接的技术特点。文章探讨了不同类型的隧道协议,包括第二层和第三层隧道协议,并提供了针对IPSec、GRE以及MPLS VPN的具体配置指导。 ... [详细]
  • CentOS 7.6环境下Prometheus与Grafana的集成部署指南
    本文旨在提供一套详细的步骤,指导读者如何在CentOS 7.6操作系统上成功安装和配置Prometheus 2.17.1及Grafana 6.7.2-1,实现高效的数据监控与可视化。 ... [详细]
  • Ihaveastringwithquotesaroundthepathasfollows:我在路径周围有一个带引号的字符串,如下所示:C:\ProgramFiles(x ... [详细]
  • 对象自省自省在计算机编程领域里,是指在运行时判断一个对象的类型和能力。dir能够返回一个列表,列举了一个对象所拥有的属性和方法。my_list[ ... [详细]
  • 本文详细解析了Java中hashCode()和equals()方法的实现原理及其在哈希表结构中的应用,探讨了两者之间的关系及其实现时需要注意的问题。 ... [详细]
  • JSOI2010 蔬菜庆典:树结构中的无限大权值问题
    本文探讨了 JSOI2010 的蔬菜庆典问题,主要关注如何处理非根非叶子节点的无限大权值情况。通过分析根节点及其子树的特性,提出了有效的解决方案,并详细解释了算法的实现过程。 ... [详细]
  • 本文详细解释了为什么在成功执行移动赋值操作后,对象的析构函数会被调用,并提供了代码示例和详细的分析。 ... [详细]
author-avatar
手机用户2502857335
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有