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

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

分享到：

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

導(dǎo)讀：

優(yōu)秀的UI設(shè)計，離不開串口屏的軟硬件支持，同樣也離不開精美的圖片圖標(biāo)素材和合適的文件格式。常用的圖標(biāo)格式有bmp、jpg、png三種格式，特點也各不相同。png圖標(biāo)支持透明顯示效果，可以為圖像定義不同的透明層次，使得彩色圖像的邊緣能與任何背景平滑地融合，從而徹底地消除鋸齒邊緣。而jpg/bmp圖標(biāo)不支持透明層次定義，在需要用到透明顯示時，只能采取濾除指定背景顏色的方法實現(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)顯示。用戶端無需任何修改，只需要在上位機開發(fā)軟件中，添加相應(yīng)的素材即可。控件的設(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é)背光亮度的案例，由滑塊控件和進度條控件組合設(shè)計實現(xiàn)。設(shè)計中用到了兩個png格式的圖標(biāo)，一個是圓形的滑塊圖標(biāo)，另一個是長條形的藍色進度條圖標(biāo)。圖中滑塊圖標(biāo)和進度條圖標(biāo)的邊緣都能夠自然的和背景融合在一起。

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

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

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

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

圖6所示為表盤應(yīng)用案例，該案例通過圖標(biāo)旋轉(zhuǎn)控件實現(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è)計實現(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

国产无遮挡无码视频在线观看丨亚洲乱色熟女一区二区三区麻豆丨国产婷婷色综合av性色av丨亚洲av色香蕉一区二区麻豆丨综合色一区二区

新聞動態(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)