圖片 (Image)

圖片IMG是用于顯示圖像的基本對(duì)象類型，圖像來源可以是文件，或者定義的符號(hào)。

示例代碼

-- 創(chuàng)建圖片控件
img = lvgl.img_create(lvgl.scr_act(), nil)
-- 設(shè)置圖片顯示的圖像
lvgl.img_set_src(img, "/lua/luatos.png")
-- 圖片居中
lvgl.obj_align(img, nil, lvgl.ALIGN_CENTER, 0, 0)

創(chuàng)建

使用?lvgl.img_create?可以創(chuàng)建圖像對(duì)象。

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

符號(hào)文字

圖片控件顯示的內(nèi)容有兩個(gè)來源，一個(gè)是來源文件的圖片，還是有一個(gè)就是 符號(hào)文字。符號(hào)文字是一段特殊的字符串，LVGL內(nèi)部會(huì)將這串特殊字符解析為圖像顯示，類似于 Emoji。符號(hào)文字名稱需要用戶在腳本層自行定義，例如"\xef\x80\x8c"代表的就是?OK按鈕，可以通過腳本自行定義名稱，方便識(shí)別。例如?OK?的標(biāo)志就可以標(biāo)記成?lvgl.SYMBOL_OK。

我們可以打印下部分符號(hào)文件:

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 doimg = lvgl.img_create(cont, nil)lvgl.img_set_src(img, symble[i])
end

設(shè)置圖片

圖像文件同樣是通過?lvgl.img_set_src?函數(shù)設(shè)置的，與符號(hào)標(biāo)志不同的是需要傳入圖片路徑。

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

尺寸

調(diào)用?lvgl.img_set_auto_size?函數(shù)，將設(shè)置圖像對(duì)象的大小自動(dòng)設(shè)置為圖像源的寬度和高度。 如果啟用了自動(dòng)調(diào)整大小，則在設(shè)置新文件時(shí)，對(duì)象大小將自動(dòng)更改。以后，可以手動(dòng)修改大小。默認(rèn)情況下將啟用自動(dòng)調(diào)整大小。

lvgl.img_set_auto_size(image, true)

偏移

使用?lvgl.img_set_offset_x?和?lvgl.img_set_offset_y?，可以向顯示的圖像添加一些偏移。如果對(duì)象尺寸小于圖像源尺寸，則很有用。

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

可以看到，這個(gè)偏移的顯示效果跟我們想象的有點(diǎn)區(qū)別，它是類似于鋪地板的效果。也可以利用 X 或 Y 偏移創(chuàng)建滾動(dòng)圖像的效果。

透明度

lvgl.img_set_src?雖然可以設(shè)置圖像顯示，但是直接顯示的圖片在 LuatOS-SoC 中是不支持透明度的，盡管PNG圖像本身帶有透明度信息。 如需顯示透明圖片，需要將PNG文件（JPG 和 BMP 格式本身不支持透明背景）在官網(wǎng)轉(zhuǎn)化為 BIN 文件，轉(zhuǎn)換方式如下：

在lvgl.img_set_src中直接傳入轉(zhuǎn)換完畢的 BIN 文件即可完成透明圖片的顯示，需要注意的是，轉(zhuǎn)換完后的文件后綴名需為?.bin，此接口依靠后綴名識(shí)別文件格式顯示。

重新著色

重新設(shè)置圖片的顏色模式，主要函數(shù)有三個(gè)：

lvgl.obj_set_style_local_image_opa
lvgl.obj_set_style_local_image_recolor
lvgl.obj_set_style_local_image_recolor_opa

都是通過風(fēng)格改變圖片信息，可以讓一張圖片顯示出不同的效果，可以用在圖像處理，或者讓圖片顯示不同狀態(tài)。其中，obj_set_style_local_image_opa?是改變圖片的透明度， 可以改變的數(shù)值為 0~255，可以取當(dāng)中任意數(shù)值，也可以使用 LVGL 已經(jīng)定義好的透明度數(shù)值。這里改變的是圖片的整體透明度。

透明度	數(shù)值
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)

lvgl.obj_set_style_local_image_recolor?是為圖片添加一個(gè)類似于濾鏡的效果。

首先來看下代碼是怎樣使用的:

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)

這樣就得到了一只泛著綠光的鸚鵡，沒錯(cuò)，這貨是鸚鵡。
lvgl.obj_set_style_local_image_recolor?設(shè)置顏色的模式是 RGB，根據(jù)數(shù)值可以設(shè)定不同顏色。
?

根據(jù)透明度設(shè)置的數(shù)值，我們甚至可以得到一個(gè)?剪影。

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)?進(jìn)行圖像縮放，?lvgl.IMG_ZOOM_NONE?是一個(gè)數(shù)值 256，代表默認(rèn)大小。factor 設(shè)置為256表示圖片不進(jìn)行縮放，factor 設(shè)置為 512 表示圖片放大一倍。同樣128表示將圖片縮小一倍。需要注意的是，這里只是更改了圖片的大小顯示，并沒有更改控件的大小。

lvgl.img_set_zoom(img, 512)

看起來有些模糊，這是原先的圖片素材放大了一倍的顯示效果。

旋轉(zhuǎn)

通過?lvgl.img_set_angle?可以對(duì)圖片進(jìn)行旋轉(zhuǎn)，使用的單位是?角度值*10，方向是順時(shí)針，也就是說， 900 就表示 90 度。下面我們對(duì)圖片順時(shí)針旋轉(zhuǎn) 90 度。

lvgl.img_set_angle(img, 900)

API

lvgl.img_create

調(diào)用	lvgl.img_create(par, copy)
功能	創(chuàng)建一個(gè)圖片對(duì)象
返回	指向圖片對(duì)象的指針
參數(shù)
par	指向?qū)ο蟮闹羔? 它將是新鍵對(duì)象的父對(duì)象
copy	指向圖片對(duì)象的指針, 如果不為 nil, 則將從其復(fù)制新對(duì)象

lvgl.img_set_src

調(diào)用	lvgl.img_set_src(img, data)
功能	設(shè)置圖片控件的顯示內(nèi)容
參數(shù)
img	指向圖片對(duì)象的指針
data	圖像顯示的數(shù)據(jù)內(nèi)容

lvgl.img_set_auto_size

調(diào)用	lvgl.img_set_auto_size(img, en)
功能	是否啟動(dòng)自動(dòng)調(diào)整尺寸功能
參數(shù)
img	指向圖片對(duì)象的指針
en	true 啟用尺寸自動(dòng)調(diào)整，false 禁用尺寸自動(dòng)調(diào)整

lvgl.img_set_offset_x

調(diào)用	lvgl.img_set_offset_x(img, x)
功能	設(shè)置圖片內(nèi)容的橫向偏移
參數(shù)
img	指向圖片對(duì)象的指針
x	圖片的橫向偏移

lvgl.img_set_offset_y

調(diào)用	lvgl.img_set_offset_y(img, y)
功能	設(shè)置圖片內(nèi)容的縱向偏移
參數(shù)
img	指向圖片對(duì)象的指針
y	圖片的縱向偏移

lvgl.img_set_angle

調(diào)用	lvgl.img_set_angle(img, angle)
功能	設(shè)置圖片的旋轉(zhuǎn)角度
參數(shù)
img	指向圖片對(duì)象的指針
angle	圖片的旋轉(zhuǎn)角度

lvgl.img_set_pivot

調(diào)用	lvgl.img_set_pivot(img, x, y)
功能	設(shè)置圖片的旋轉(zhuǎn)點(diǎn)
參數(shù)
img	指向圖片對(duì)象的指針
x	圖片的旋轉(zhuǎn)中心點(diǎn) X 坐標(biāo)
y	圖片的旋轉(zhuǎn)中心點(diǎn) Y 坐標(biāo)

lvgl.img_set_zoom

調(diào)用	lvgl.img_set_zoom(img, zoom)
功能	設(shè)置圖片的縮放
參數(shù)
img	指向圖片對(duì)象的指針
zoom	圖片的縮放系數(shù)，256 代表默認(rèn)大小。

lvgl.img_set_antialias

調(diào)用	lvgl.img_set_antialias(img, en)
功能	是否啟用圖片的抗鋸齒功能
參數(shù)
img	指向圖片對(duì)象的指針
en	true 啟用， false 禁用

lvgl.img_get_auto_size

調(diào)用	lvgl.img_get_auto_size(img)
功能	獲取當(dāng)前是否啟動(dòng)自動(dòng)調(diào)整尺寸
返回	自動(dòng)調(diào)整尺寸是否啟動(dòng)標(biāo)志
參數(shù)
img	指向圖片對(duì)象的指針

lvgl.img_get_offset_x

調(diào)用	lvgl.img_get_offset_x(img)
功能	獲取圖片的 x 偏移
返回	圖片的 x 偏移
參數(shù)
img	指向圖片對(duì)象的指針

lvgl.img_get_offset_y

調(diào)用	lvgl.img_get_offset_y(img)
功能	獲取圖片的 y 偏移
返回	圖片的 y 偏移
參數(shù)
img	指向圖片對(duì)象的指針

lvgl.img_get_angle

調(diào)用	lvgl.img_get_angle(img)
功能	獲取圖片的旋轉(zhuǎn)角度
返回	圖片的旋轉(zhuǎn)角度
參數(shù)
img	指向圖片對(duì)象的指針

lvgl.img_get_zoom

調(diào)用	lvgl.img_get_zoom(img)
功能	獲取圖片的縮放系數(shù)
返回	圖片的縮放系數(shù)
參數(shù)
img	指向圖片對(duì)象的指針

lvgl.img_get_antialias

調(diào)用	lvgl.img_get_antialias(img)
功能	獲取圖片是否設(shè)置了抗鋸齒
返回	true 設(shè)置了抗鋸齒, false 沒有設(shè)置
參數(shù)
img	指向圖片對(duì)象的指針