app制作培训,重庆排名优化整站优化,app安装官方免费下载,学生做兼职去哪个网站图片 (Image) 图片IMG是用于显示图像的基本对象类型#xff0c;图像来源可以是文件#xff0c;或者定义的符号。
示例代码
-- 创建图片控件
img lvgl.img_create(lvgl.scr_act(), nil)
-- 设置图片显示的图像
lvgl.img_set_src(img, /lua/luatos.png)
-- 图片…图片 (Image) 图片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 i1, #symble doimg lvgl.img_create(cont, nil)lvgl.img_set_src(img, symble[i])
end设置图片
图像文件同样是通过 lvgl.img_set_src 函数设置的与符号标志不同的是需要传入图片路径。
lvgl.img_set_src(img, /lua/png40.png)尺寸
调用 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)可以看到这个偏移的显示效果跟我们想象的有点区别它是类似于铺地板的效果。也可以利用 X 或 Y 偏移创建滚动图像的效果。
透明度
lvgl.img_set_src 虽然可以设置图像显示但是直接显示的图片在 LuatOS-SoC 中是不支持透明度的尽管PNG图像本身带有透明度信息。 如需显示透明图片需要将PNG文件JPG 和 BMP 格式本身不支持透明背景在官网转化为 BIN 文件转换方式如下 在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_00lvgl.OPA_1025lvgl.OPA_2051lvgl.OPA_3076lvgl.OPA_40102lvgl.OPA_50127lvgl.OPA_60153lvgl.OPA_70178lvgl.OPA_80204lvgl.OPA_90229lvgl.OPA_100255lvgl.OPA_COVER255
我们来看看图片半透明的显示效果
lvgl.obj_set_style_local_image_opa(img, lvgl.IMG_PART_MAIN, lvgl.STATE_DEFAULT, 128)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)这样就得到了一只泛着绿光的鹦鹉没错这货是鹦鹉。lvgl.obj_set_style_local_image_recolor 设置颜色的模式是 RGB根据数值可以设定不同颜色。 根据透明度设置的数值我们甚至可以得到一个 剪影。
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)缩放
可以使用 lvgl.img_set_zoom(img, factor) 进行图像缩放 lvgl.IMG_ZOOM_NONE 是一个数值 256代表默认大小。factor 设置为256表示图片不进行缩放factor 设置为 512 表示图片放大一倍。同样128表示将图片缩小一倍。需要注意的是这里只是更改了图片的大小显示并没有更改控件的大小。
lvgl.img_set_zoom(img, 512)看起来有些模糊这是原先的图片素材放大了一倍的显示效果。
旋转
通过 lvgl.img_set_angle 可以对图片进行旋转使用的单位是 角度值*10方向是顺时针也就是说 900 就表示 90 度。下面我们对图片顺时针旋转 90 度。
lvgl.img_set_angle(img, 900)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指向图片对象的指针entrue 启用尺寸自动调整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指向图片对象的指针entrue 启用 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指向图片对象的指针
