當(dāng)前位置：網(wǎng)站首頁 > 新聞動態(tài) > 新聞動態(tài)
新聞動態(tài)

png透明圖標(biāo)在串口屏上的應(yīng)用

分享到：

點(diǎn)擊次數(shù)：更新時間：2021-12-18 11:29:05 【打印此頁】【關(guān)閉】

導(dǎo)讀：

優(yōu)秀的UI設(shè)計，離不開串口屏的軟硬件支持，同樣也離不開精美的圖片圖標(biāo)素材和合適的文件格式。常用的圖標(biāo)格式有bmp、jpg、png三種格式，特點(diǎn)也各不相同。png圖標(biāo)支持透明顯示效果，可以為圖像定義不同的透明層次，使得彩色圖像的邊緣能與任何背景平滑地融合，從而徹底地消除鋸齒邊緣。而jpg/bmp圖標(biāo)不支持透明層次定義，在需要用到透明顯示時，只能采取濾除指定背景顏色的方法實(shí)現(xiàn)，就會導(dǎo)致圖標(biāo)邊沿與背景融合不順暢，甚至出現(xiàn)鋸齒等現(xiàn)象。

SDWb、SDWap系列串口屏均支持png格式的圖標(biāo)。

一、VGUS組態(tài)軟件中如何使用png圖標(biāo)

在VGUS組態(tài)軟件中，任何與圖標(biāo)相關(guān)的控件均支持png格式的圖標(biāo)顯示。用戶端無需任何修改，只需要在上位機(jī)開發(fā)軟件中，添加相應(yīng)的素材即可?？丶脑O(shè)置方法與以前一致，只需要設(shè)置對應(yīng)圖標(biāo)文件和圖標(biāo)ID號。

png圖標(biāo)素材以及變量圖標(biāo)控件設(shè)置分別如圖1、圖2所示。

圖1 圖標(biāo)素材文件列表示意圖圖2 變量圖標(biāo)控件屬性設(shè)置

二、png圖標(biāo)應(yīng)用案例

2.1 滑動調(diào)節(jié)背光亮度

圖3所示為滑動調(diào)節(jié)背光亮度的案例，由滑塊控件和進(jìn)度條控件組合設(shè)計實(shí)現(xiàn)。設(shè)計中用到了兩個png格式的圖標(biāo)，一個是圓形的滑塊圖標(biāo)，另一個是長條形的藍(lán)色進(jìn)度條圖標(biāo)。圖中滑塊圖標(biāo)和進(jìn)度條圖標(biāo)的邊緣都能夠自然的和背景融合在一起。

圖3 透明圖標(biāo)在滑塊、進(jìn)度條控件上的應(yīng)用展示

圖4 滑塊圖標(biāo)素材

圖5 進(jìn)度條圖標(biāo)素材

2.2 表盤應(yīng)用案例

圖6所示為表盤應(yīng)用案例，該案例通過圖標(biāo)旋轉(zhuǎn)控件實(shí)現(xiàn)，需要一張帶刻度的背景圖片，一張png格式的指針圖標(biāo)。由于指針采用的是png格式圖標(biāo)，指針與背景能夠完美的融合在一起。

圖6 透明圖標(biāo)在旋轉(zhuǎn)圖標(biāo)控件上的應(yīng)用展示

圖7 表盤指針?biāo)夭?/span>

2.3 表盤時鐘應(yīng)用案例

圖8所示為表盤時鐘應(yīng)用案例，該案例通過表盤時鐘控件設(shè)計實(shí)現(xiàn)，圖中使用了一張帶時間刻度的背景圖片，時針、分針、秒針三張png格式圖標(biāo)。由于使用的是png格式圖標(biāo)，所以時針、分針、秒針圖標(biāo)能夠很好的與背景圖標(biāo)融合。

圖8 透明圖標(biāo)在表盤時鐘控件上的應(yīng)用展示

圖9 表盤時鐘指針圖標(biāo)素預(yù)覽

2.4 藝術(shù)字應(yīng)用

圖10為藝術(shù)字控件應(yīng)用效果展示，該案例需要使用0-9數(shù)字對應(yīng)的png格式圖標(biāo)。由于圖標(biāo)全部采用了png格式，所以能夠很好的與背景圖片融合。

圖10 透明圖標(biāo)在藝術(shù)字控件上的應(yīng)用展示

圖11 藝術(shù)字png圖標(biāo)素預(yù)覽

上一條：如何調(diào)整電容觸摸屏的靈敏度下一條：串口屏內(nèi)存不夠用怎么辦

copyright © 2003-2024, 中顯科技. all rights reserved.
地址：武漢市東湖新技術(shù)開發(fā)區(qū)高新四路40號葛洲壩太陽城產(chǎn)業(yè)園1棟
電話：027-87617912 027-87617960 027-87596062 傳真：027-87596850 鄂ICP備18025119號-2
技術(shù)支持：米拓建站 7.8

99精品人妻少妇一区二区,日本熟妇色xxxxx,野花社区高清在线www,丹麦大白屁股xxxxx

新聞動態(tài)

當(dāng)前位置：網(wǎng)站首頁 > 新聞動態(tài) > 新聞動態(tài) 新聞動態(tài)

png透明圖標(biāo)在串口屏上的應(yīng)用

當(dāng)前位置：網(wǎng)站首頁 > 新聞動態(tài) > 新聞動態(tài)
新聞動態(tài)