程序员经验分享-hwhale

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

2023-11-07

图片 (Image)

image.png


图片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

符号标志.bmp

设置图片

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

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

鹦鹉.bmp

尺寸

调用 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)

偏移.bmp


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

透明度

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

file-read-6032.png

在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)

半透明.bmp

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)

绿到你发光.bmp


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

红光鹦鹉.bmp


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

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)

蓝色剪影.bmp

缩放

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

lvgl.img_set_zoom(img, 512)

放大一倍.bmp


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

旋转

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

lvgl.img_set_angle(img, 900)

旋转.bmp

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 指向图片对象的指针
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

AIR724软件

Air724UG

合宙Air724UG LuatOS-Air LVGL API控件-图片 (Image) 的相关文章

  • JAVA IDEA中sout无法正常弹出，System.out.print，和System.out.println以及其他语句标红报错的问题。

    问题 在写代码时发现sout无法正常识别 println方法和println方法标红报错显示无法解析 问题分析 使用输出函数属于代码 而类中只能容纳变量以及方法 代码应该放在代码块 即方法 中 解决方法 在类中写一个方法 将代码放入方法中

  • macOS下 anaconda 虚拟环境及依赖包管理

    文章目录 环境管理 适用mac 1 2 创建虚拟环境失败后 排查问题 并再次成功创建虚拟环境的过程 依赖包管理 环境管理 适用mac 检查conda版本或是否已经安装 base lzh mac conda version conda 4 1

  • Yolo5の网络结构训练策略

    搬来的可能还是熟人的 抱歉啊 为了自己学习 讲解yolov5模型结构 数据增强 以及训练策略 官方地址 https github com ultralytics yolov5 yolov5模型训练流程 https blog csdn net

  • qt 编译时提示error: multiple definition of

    今天在用QT 5 4 1 编译程序时 提示error multiple definition 错误 以下红色字体为错误提示 D Wind PLT Projects BCS tmp moc Cntrlane cpp 156 error mul

  • 《Graph learning》

    上周发布的 图传播算法 上 中讲了关于图传播算法的基本范式和PageRank算法 本文将延续上周的文章 继续讲解剩下的三个算法 2 HITS HITS Hyperlink Induced Topic Search 另一个典型的图传播算法 其

  • 图形用户界面工具：Tkinter库

    Tkinter是Python默认的图形用户界面 Graphical User Interface GUI 库 Tkinter是T看interface 的缩写 意为Tkinter库是 Tkinter Tcl Tk的pathon接口 Tk它基于

  • 1.GAN生成mnist

    1 GAN Generative Adversarial Network 2 生成器 随机生成一个一维的100个随机数 latent dim 作为输入生成mnist图片 def build generator self model Sequ

  • matlab怎么定义矩阵变量_MATLAB01:基本的数学运算与矩阵运算

    若微信排版有问题 请点击阅读原文查看 MATLAB01 基本的数学运算与矩阵运算 MATLAB基本语法变量变量名保留变量不适合做变量名变量不应当覆盖内置函数变量类型数字型变量的显示格式MATLAB命令行使用MATLAB进行数字运算使用MAT

  • 【C语言】之实现大小写字母转换

    文件名 字母大小写转换 c 功能描述 输入一个字符判断其是否为字母 如果是字母则将大写转换为小写或将小写转换为大写 编写人 王廷云 编写日期 2017 1 10 include

  • Unreal Engine UE4虚幻引擎，生成Cubemap（HDR高动态范围贴图）

    1 在场景中添加Scene Capture Cube场景捕获立方体 2 在Scene Capture Cube细节面板中创建 Cube Render Target 立方体渲染目标 打开创建的 Cube Render Target 立方体渲染

  • Docker 学习笔记（九）-- Dockerfile 构建Tomcat 实战测试

    1 准备镜像文件 Tomcat 压缩包 Apache Tomcat Welcome 依赖的 JDK 压缩包 Java Downloads Oracle https www aliyundrive com s YzH6o5G5QUu 下载 后

  • osg环境搭建与使用

    目录 环境安装 案例一 案例二 案例三 案例四 我的vs2022 window11 环境安装 看这个文章即可 博客很详细 按照这个没问题的 5条消息 OSG OSG环境部署 OSG3 6 5 vs2017 win10 x64 超详细 osg

  • 调用EAS单据转换规则（BOTP），生成下游单据

    代码调用单据转换规则 生成下游单据 调用BOTP生成下游单据 用于后台 param ctx 上下文 param sourceType 源单类型 param destType 目标单据类型 param sourceColl 源单集合 para

  • NER问题的模型训练5种相关提升tricks

    NER问题的模型训练5种相关提升tricks 一 cMedQANER数据集介绍 用于医疗领域的命名实体识别任务 实体标签 physiology test disease time drug symptom body department c

  • 快速实现M5311 NBIOT TCP通信

    M5311作为TCP Client和Server通信 一 本例程实现功能 二 Core提供的TCP功能介绍 三 接线图 五 完整代码 前言 虽然在如今的物联网开发中 像MQTT COAP这些专门为了物联网而诞生的协议逐渐成为主流 但其实TC

随机推荐

  • 【VMware】VM虚拟机启动系统黑屏及操作系统未找到 多种详细解决方案

    作者 MiTu 本帖内容著作权归作者所有 转载请务必保留本文链接 VM虚拟机启动黑屏 解决方案大全 前言 1 BIOS虚拟设备支持 2 LSP问题 3 虚拟机配置 4 硬盘启动优先级 5 Opearating System not foun

  • 将sqlite源码放进自己的工程一起编译

    在sqlite官网上http www sqlite com download html下载最新的源代码 目前最新的版本是3 8 11 sqlite的源码包有两类 一类是sqlite amalgamation 3081101 zip 这个包里

  • （三十七）论文阅读

    简介 图1 论文原文 论文聚焦的是在目标检测中的 A n c h o r rm Anchor

  • mysql describe_mysql8 参考手册--EXPLAIN、DESCRIBE语句

    EXPLAIN DESCRIBE DESC tbl name col name wild EXPLAIN DESCRIBE DESC explain type explainable stmt FOR CONNECTION connecti

  • 工控随笔_10_西门子_WinCC的VBS脚本_01_基础入门

    很多人都认为VB语言或者VBS脚本语言是一种很low的语言 从心里看不起VB或者VBS 但是其实VBS不仅可以做为系统管理员的利器 同样在工控领域VBS语言大有用武之地 西门子的WinCC提供了两种脚本语言 C脚本和VBS脚本 通过这两种脚

  • [Unity]改变代码运行场景等待时间太长怎么办

    改变代码运行场景速度太慢怎么办 改变一次代码5分钟 运行场景等待5分钟怎么办 是否是因为项目工程 中的资源文件太大 文件数量太多 尝试把这些资源文件 放入 非 项目工程文件夹Assets内 打包后从服务器下载 这些资源文件 zip文件

  • 网络基础：双绞线

    双绞线的线序 EIA TIA的布线标准中规定了两种双绞线的线序 568A与568B 标准568A 绿白 1 绿 2 橙白 3 蓝 4 蓝白 5 橙 6 褐白 7 褐 8 标准568B 橙白 1 橙 2 绿白 3 蓝 4 蓝白 5 绿 6 褐

  • 用vue构建项目笔记5(在vue-cli项目中引用公用方法)（vue resource统一处理）

    之前用cli脚手架构建的项目废了 又让我改成jq了 悲剧 这次这个项目用纯vue实现了 哈哈 下面介绍如何引入全局方法供每个组件都能调用 1 创建一个js文件 我起的名字叫做 common js 放在assets gt js下 2 在com

  • vue文件夹上传源码

    一 功能性需求与非功能性需求 要求操作便利 一次选择多个文件和文件夹进行上传 支持PC端全平台操作系统 Windows Linux Mac 支持文件和文件夹的批量下载 断点续传 刷新页面后继续传输 关闭浏览器后保留进度信息 支持文件夹批量上

  • [论文解读]UNet++解读 + 它是如何对UNet改进 + 作者的研究态度和方式

    UNet 论文 地址 UNet 论文翻译 地址 UNet 源代码 地址 UNet 作者在知乎 上进行了解读 里面还有视频的详解 深入人心 里面的每一句话都令我印象深刻 我总结如下 很多论文给出了他们建议的网络结构 其中包括非常多的细节 比如

  • Oracle常用及非常用函数

    感于总有些网友提出一些非常基础的问题 比如有没有实现某某功能的函数啊 某某函数是做什么用的啊 格式是什么等等 同时也感受到自己对oracle函数认识的不足 于是集中月余时间专注于oracle函数 小有心得不敢私藏 发之与诸公共享 本文并不准

  • Java 使用BufferedImage快速画出图片

    Java 使用BufferedImage快速画出图片 在上一篇文章中我们学习了类似相机中的一些功能 比如黑白 马赛克等 但是我们发现一个问题 画的太慢了 一张图片能画半天 而且还是一条一条的 今天我们来学习如何迅速的画出图片 新知识 new

  • C++ 正则表达式regex（二）

    正则匹配 查找与替代 书写好模式字符串后 需要将待匹配的字符串和模式字符串进行一定规则的匹配 包括三种方式 匹配 regex match 查找 regex search 替换 regex replace 匹配很简单 直接将待匹配字符串和模式

  • PLSQL连接ORACLE时弹出空白框

    前两天一台数据库服务器坏掉了 重新找了台同型号的替换 服务器系统装好后 就在本地机器上远程操作服务器 配置数据库后 新部署的服务就是起不来 怀疑数据库的问题 就各种折腾 还是没有起作用 用本地PLSQL链接ORACLE时 就出现一个小白框

  • HBase选择Store file做compaction的算法

    The algorithm is basically as follows Run over the set of all store files from oldest to youngest If there are more than

  • Maven : Log4j2 could not find a logging implementation

    1 美图 3 错误信息 Log4j2 could not find a logging implementation Please add log4j core to the classpath 解决办法 pom把log4j api也加进去

  • 开源电路仿真软件CircuitJS1介绍与使用入门

    文章目录 前言 基础介绍 使用入门 界面与显示 绘制与操作 保存为文件 子电路绘制与使用 总结 前言 在做电路设计的过程中经常需要用到电路仿真软件对设计的电路进行仿真 以确定电路工作特性或者元件的参数取值 使用电路仿真软件可以缩短电路开发时

  • CentOS系统安装Apache步骤详解

    1 通过 yum y install httpd 安装apache服务 2 使用 systemctl start httpd 启动Apache服务器 并测试启动情况 3 修改主页 4 访问测试 这样 centos的apache服务就搭建好了

  • 单片机毕设 基于stm32的WiFi监控小车

    文章目录 1 背景 2 系统设计方案 2 1 实现功能 2 1 1 硬件部分 2 1 2 软件部分 2 1 3 WIFI通信功能 2 2 系统架构 2 2 1 WiFi 通信 2 2 2 电机驱动 2 2 3 摄像头 2 2 4 舵机 2

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

    图片 Image 图片IMG是用于显示图像的基本对象类型 图像来源可以是文件 或者定义的符号 示例代码 创建图片控件 img lvgl img create lvgl scr act nil 设置图片显示的图像 lvgl img set s

热门标签