合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image)

这篇具有很好参考价值的文章主要介绍了合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

图片 (Image)

合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image),AIR724软件,Air724UG


图片IMG是用于显示图像的基本对象类型,图像来源可以是文件,或者定义的符号。

示例代码

-- 创建图片控件
img = lvgl.img_create(lvgl.scr_act(), nil)
-- 设置图片显示的图像
lvgl.img_set_src(img, "/lua/luatos.png")
-- 图片居中
lvgl.obj_align(img, nil, lvgl.ALIGN_CENTER, 0, 0)

创建

使用 lvgl.img_create 可以创建图像对象。

img = lvgl.img_create(lvgl.scr_act(), nil)

符号文字

图片控件显示的内容有两个来源,一个是来源文件的图片,还是有一个就是 符号文字。符号文字是一段特殊的字符串,LVGL内部会将这串特殊字符解析为图像显示,类似于 Emoji。符号文字名称需要用户在脚本层自行定义,例如"\xef\x80\x8c"代表的就是 OK按钮,可以通过脚本自行定义名称,方便识别。例如 OK 的标志就可以标记成 lvgl.SYMBOL_OK

我们可以打印下部分符号文件:

symble = {
    "\xef\x80\x81", "\xef\x80\x88", "\xef\x80\x8b", "\xef\x80\x8c",
    "\xef\x80\x8d", "\xef\x80\x91", "\xef\x80\x93", "\xef\x80\x95",
    "\xef\x80\x99", "\xef\x80\x9c", "\xef\x80\xa1", "\xef\x80\xa6",
    "\xef\x80\xa7", "\xef\x80\xa8", "\xef\x80\xbe", "\xef\x8C\x84",
    "\xef\x81\x88", "\xef\x81\x8b", "\xef\x81\x8c", "\xef\x81\x8d",
    "\xef\x81\x91", "\xef\x81\x92", "\xef\x81\x93", "\xef\x81\x94",
    "\xef\x81\xa7", "\xef\x81\xa8", "\xef\x81\xae", "\xef\x81\xb0",
    "\xef\x81\xb1", "\xef\x81\xb4", "\xef\x81\xb7", "\xef\x81\xb8",
    "\xef\x81\xb9", "\xef\x81\xbb", "\xef\x82\x93", "\xef\x82\x95",
    "\xef\x83\x84", "\xef\x83\x85", "\xef\x83\x87", "\xef\x83\xa7",
    "\xef\x83\xAA", "\xef\x83\xb3", "\xef\x84\x9c", "\xef\x84\xa4",
    "\xef\x85\x9b", "\xef\x87\xab", "\xef\x89\x80", "\xef\x89\x81",
    "\xef\x89\x82", "\xef\x89\x83", "\xef\x89\x84", "\xef\x8a\x87",
    "\xef\x8a\x93", "\xef\x8B\xAD", "\xef\x95\x9A", "\xef\x9F\x82",
}

local img = lvgl.img_create(cont, nil)
lvgl.cont_set_layout(cont, lvgl.LAYOUT_GRID)
for i=1, #symble do
	img = lvgl.img_create(cont, nil)
	lvgl.img_set_src(img, symble[i])
end

合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image),AIR724软件,Air724UG

设置图片

图像文件同样是通过 lvgl.img_set_src 函数设置的,与符号标志不同的是需要传入图片路径。

lvgl.img_set_src(img, "/lua/png40.png")

合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image),AIR724软件,Air724UG

尺寸

调用 lvgl.img_set_auto_size 函数,将设置图像对象的大小自动设置为图像源的宽度和高度。 如果启用了自动调整大小,则在设置新文件时,对象大小将自动更改。以后,可以手动修改大小。默认情况下将启用自动调整大小。

lvgl.img_set_auto_size(image, true)

偏移

使用 lvgl.img_set_offset_x 和 lvgl.img_set_offset_y ,可以向显示的图像添加一些偏移。如果对象尺寸小于图像源尺寸,则很有用。

lvgl.img_set_offset_x(img, 10)
lvgl.img_set_offset_y(img, 10)

合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image),AIR724软件,Air724UG


可以看到,这个偏移的显示效果跟我们想象的有点区别,它是类似于铺地板的效果。也可以利用 X 或 Y 偏移创建滚动图像的效果。

透明度

lvgl.img_set_src 虽然可以设置图像显示,但是直接显示的图片在 LuatOS-SoC 中是不支持透明度的,尽管PNG图像本身带有透明度信息。 如需显示透明图片,需要将PNG文件(JPG 和 BMP 格式本身不支持透明背景)在官网转化为 BIN 文件,转换方式如下:

合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image),AIR724软件,Air724UG

lvgl.img_set_src中直接传入转换完毕的 BIN 文件即可完成透明图片的显示,需要注意的是,转换完后的文件后缀名需为 .bin,此接口依靠后缀名识别文件格式显示。

重新着色

重新设置图片的颜色模式,主要函数有三个:

lvgl.obj_set_style_local_image_opa
lvgl.obj_set_style_local_image_recolor
lvgl.obj_set_style_local_image_recolor_opa

都是通过风格改变图片信息,可以让一张图片显示出不同的效果,可以用在图像处理,或者让图片显示不同状态。其中,obj_set_style_local_image_opa 是改变图片的透明度, 可以改变的数值为 0~255,可以取当中任意数值,也可以使用 LVGL 已经定义好的透明度数值。这里改变的是图片的整体透明度。

透明度 数值
lvgl.OPA_0 0
lvgl.OPA_10 25
lvgl.OPA_20 51
lvgl.OPA_30 76
lvgl.OPA_40 102
lvgl.OPA_50 127
lvgl.OPA_60 153
lvgl.OPA_70 178
lvgl.OPA_80 204
lvgl.OPA_90 229
lvgl.OPA_100 255
lvgl.OPA_COVER 255

我们来看看图片半透明的显示效果

lvgl.obj_set_style_local_image_opa(img, lvgl.IMG_PART_MAIN, lvgl.STATE_DEFAULT, 128)

合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image),AIR724软件,Air724UG

lvgl.obj_set_style_local_image_recolor 是为图片添加一个类似于滤镜的效果。

首先来看下代码是怎样使用的:

lvgl.obj_set_style_local_image_recolor_opa(img, lvgl.IMG_PART_MAIN, lvgl.STATE_DEFAULT, 128)
lvgl.obj_set_style_local_image_recolor(img, lvgl.IMG_PART_MAIN, lvgl.STATE_DEFAULT, 0x00FF00)

合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image),AIR724软件,Air724UG


这样就得到了一只泛着绿光的鹦鹉,没错,这货是鹦鹉
lvgl.obj_set_style_local_image_recolor 设置颜色的模式是 RGB,根据数值可以设定不同颜色。
 

合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image),AIR724软件,Air724UG


根据透明度设置的数值,我们甚至可以得到一个 剪影

lvgl.obj_set_style_local_image_recolor_opa(img, lvgl.IMG_PART_MAIN, lvgl.STATE_DEFAULT, 255)
lvgl.obj_set_style_local_image_recolor(img, lvgl.IMG_PART_MAIN, lvgl.STATE_DEFAULT, 0x0000FF)

合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image),AIR724软件,Air724UG

缩放

可以使用 lvgl.img_set_zoom(img, factor) 进行图像缩放, lvgl.IMG_ZOOM_NONE 是一个数值 256,代表默认大小。factor 设置为256表示图片不进行缩放,factor 设置为 512 表示图片放大一倍。同样128表示将图片缩小一倍。需要注意的是,这里只是更改了图片的大小显示,并没有更改控件的大小。

lvgl.img_set_zoom(img, 512)

合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image),AIR724软件,Air724UG


看起来有些模糊,这是原先的图片素材放大了一倍的显示效果。

旋转

通过 lvgl.img_set_angle 可以对图片进行旋转,使用的单位是 角度值*10,方向是顺时针,也就是说, 900 就表示 90 度。下面我们对图片顺时针旋转 90 度。

lvgl.img_set_angle(img, 900)

合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image),AIR724软件,Air724UG文章来源地址https://www.toymoban.com/news/detail-703142.html

API

lvgl.img_create

调用 lvgl.img_create(par, copy)
功能 创建一个图片对象
返回 指向图片对象的指针
参数
par 指向对象的指针, 它将是新键对象的父对象
copy 指向图片对象的指针, 如果不为 nil, 则将从其复制新对象

lvgl.img_set_src

调用 lvgl.img_set_src(img, data)
功能 设置图片控件的显示内容
参数
img 指向图片对象的指针
data 图像显示的数据内容

lvgl.img_set_auto_size

调用 lvgl.img_set_auto_size(img, en)
功能 是否启动自动调整尺寸功能
参数
img 指向图片对象的指针
en true 启用尺寸自动调整,false 禁用尺寸自动调整

lvgl.img_set_offset_x

调用 lvgl.img_set_offset_x(img, x)
功能 设置图片内容的横向偏移
参数
img 指向图片对象的指针
x 图片的横向偏移

lvgl.img_set_offset_y

调用 lvgl.img_set_offset_y(img, y)
功能 设置图片内容的纵向偏移
参数
img 指向图片对象的指针
y 图片的纵向偏移

lvgl.img_set_angle

调用 lvgl.img_set_angle(img, angle)
功能 设置图片的旋转角度
参数
img 指向图片对象的指针
angle 图片的旋转角度

lvgl.img_set_pivot

调用 lvgl.img_set_pivot(img, x, y)
功能 设置图片的旋转点
参数
img 指向图片对象的指针
x 图片的旋转中心点 X 坐标
y 图片的旋转中心点 Y 坐标

lvgl.img_set_zoom

调用 lvgl.img_set_zoom(img, zoom)
功能 设置图片的缩放
参数
img 指向图片对象的指针
zoom 图片的缩放系数,256 代表默认大小。

lvgl.img_set_antialias

调用 lvgl.img_set_antialias(img, en)
功能 是否启用图片的抗锯齿功能
参数
img 指向图片对象的指针
en true 启用, false 禁用

lvgl.img_get_auto_size

调用 lvgl.img_get_auto_size(img)
功能 获取当前是否启动自动调整尺寸
返回 自动调整尺寸是否启动标志
参数
img 指向图片对象的指针

lvgl.img_get_offset_x

调用 lvgl.img_get_offset_x(img)
功能 获取图片的 x 偏移
返回 图片的 x 偏移
参数
img 指向图片对象的指针

lvgl.img_get_offset_y

调用 lvgl.img_get_offset_y(img)
功能 获取图片的 y 偏移
返回 图片的 y 偏移
参数
img 指向图片对象的指针

lvgl.img_get_angle

调用 lvgl.img_get_angle(img)
功能 获取图片的旋转角度
返回 图片的旋转角度
参数
img 指向图片对象的指针

lvgl.img_get_zoom

调用 lvgl.img_get_zoom(img)
功能 获取图片的缩放系数
返回 图片的缩放系数
参数
img 指向图片对象的指针

lvgl.img_get_antialias

调用 lvgl.img_get_antialias(img)
功能 获取图片是否设置了抗锯齿
返回 true 设置了抗锯齿, false 没有设置
参数
img 指向图片对象的指针

到了这里,关于合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 合宙Air724UG LuatOS-Air LVGL API控件-截屏(Screenshots)

    截屏(Screenshots) 分 享导出pdf 截屏功能,core版本号要=3211 disp.screenshots 调用 disp.screenshots(name, x1, x2, y1, y2) 功能 截取显示屏指定区域图片 返回 0/-1 成功/失败 参数 name 文件路径名只支持bmp x1 水平初始值MIPI屏(0-479)/LCD屏(0-239) x2 水平结束值MIPI屏(x1-479)/LCD屏(x1-239)

    2024年02月07日
    浏览(39)
  • 合宙Air724UG LuatOS-Air LVGL API控件--图表 (Chart)

    图表 (Chart) 一幅图胜过一千个字,通过图表展示出的数据内容能让用户更快速有效的了解数据特征。 代码示例 – 创建图表 chart = lvgl.chart_create(lvgl.scr_act(), nil) lvgl.obj_set_size(chart, 200, 150) lvgl.obj_align(chart, nil, lvgl.ALIGN_CENTER, 0, 0) – 设置 Chart 的显示模式 (折线图) lvgl.chart_set_typ

    2024年02月10日
    浏览(38)
  • 合宙Air724UG LuatOS-Air LVGL API控件--按钮 (Button)

    按钮 (Button) 按钮控件,这个就不用多说了,界面的基础控件之一。 示例代码 – 按键回调函数 event_handler = function(obj, event) if event == lvgl.EVENT_CLICKED then print(“Clickedn”) elseif event == lvgl.EVENT_VALUE_CHANGED then print(“Toggledn”) end end – 按键1 btn1 = lvgl.btn_create(lvgl.scr_act(), nil) lvgl.o

    2024年02月11日
    浏览(41)
  • 合宙Air724UG LuatOS-Air LVGL API控件--容器 (Container)

    容器 (Container) 容器是 lvgl 相当重要的一个控件了,可以设置布局,容器的大小也会自动进行调整,利用容器可以创建出自适应成都很高的界面布局。 代码示例 – 创建容器 cont = lvgl.cont_create(lvgl.scr_act(), nil) lvgl.obj_set_auto_realign(cont, true) lvgl.obj_align(cont, nil, lvgl.ALIGN_CENTER, 0, 0)

    2024年02月10日
    浏览(36)
  • 合宙Air724UG LuatOS-Air LVGL API控件--曲线 (Arc)

    曲线 (Arc) 曲线控件,也可以称为弧。因为 Arc 本身就是弧,弧形的意思。根据控件的样子也能推测出它的使用场景,一般用在加载器(就是等待界面转的圈圈)或者数值显示,数值调节这些场景。曲线控件分了两个部分,前景和背景,都可以分别进行设置。 示例代码 – 创建曲

    2024年02月11日
    浏览(53)
  • 合宙Air724UG LuatOS-Air LVGL API控件-键盘 (Keyboard)

    键盘 (Keyboard) LVGL 可以添加触摸键盘,但是很明显,使用触摸键盘的话必须要使用触摸的输入方式,否则无法驱动键盘。 通过  keyboard_create  可以创建键盘,实际上只要这一句就可在界面上显示键盘了。很难得的是,键盘没有复制对象, lvgl.keyboard_create  只需要传入一个参数

    2024年02月09日
    浏览(35)
  • 合宙Air724UG LuatOS-Air LVGL API控件--日历 (Calendar)

    日历 (Calendar) LVGL 提供了一个用来选择和显示当前日期的日历控件。 示例代码 – 高亮显示的日期 highlightDate = lvgl.calendar_date_t() – 日历点击的回调函数 – 将点击日期设置高亮 function event_handler(obj, event) if event == lvgl.EVENT_VALUE_CHANGED then date = lvgl.calendar_get_pressed_date(obj) if date

    2024年02月10日
    浏览(44)
  • 合宙Air724UG LuatOS-Air LVGL API控件-滑动条 (Slider)

    滑动条 (Slider) 滑动条看起来和进度条是有些是有些像,但不同的是滑动条可以进行数值选择。 滑动条是通过  lvgl.slider_create  函数创建的。 滑动条创建完之后设置显示位置就可以进行操作了。 滑动条的使用和 Bar 还是很像的。可以设置数值  lvgl.slider_set_value ,也可以设置显

    2024年02月09日
    浏览(36)
  • 合宙Air724UG LuatOS-Air LVGL API控件-加载器(Spinner)

    加载器(Spinner) 通过  lvgl.spinner_create  就可创建一个加载器,本身自带动画效果。 可以通过  lvgl.spinner_set_arc_length  函数调整加载器的弧长。单位是度,一圈是按 360 度计算的。 通过  lvgl.spinner_set_spin_time  可以设置转速,这里的单位是 ms,是加载器转完一圈的时间,GIF 录制

    2024年02月09日
    浏览(40)
  • 合宙Air724UG LuatOS-Air LVGL API控件-微调框 (Spinbox)

    微调框 (Spinbox) 微调框用于数值调整,有时候我们希望获取一个用户输入的数值,但是又不希望弹出键盘,可以使用微调框。 微调框的创建函数是  spinbox_create ,创建也比较简单。 这里有点需要注意,创建的微调框只有这个:   增大减小按钮是需要自己通过代码创建的,所以

    2024年02月09日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包