當前位置：網站首頁 > 新聞動態 > 新聞動態
新聞動態

png透明圖標在串口屏上的應用

分享到：

點擊次數：更新時間：2021-12-18 11:29:05 【打印此頁】【關閉】

導讀：

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

SDWb、SDWap系列串口屏均支持png格式的圖標。

一、VGUS組態軟件中如何使用png圖標

在VGUS組態軟件中，任何與圖標相關的控件均支持png格式的圖標顯示。用戶端無需任何修改，只需要在上位機開發軟件中，添加相應的素材即可?？丶脑O置方法與以前一致，只需要設置對應圖標文件和圖標ID號。

png圖標素材以及變量圖標控件設置分別如圖1、圖2所示。

圖1 圖標素材文件列表示意圖圖2 變量圖標控件屬性設置

二、png圖標應用案例

2.1 滑動調節背光亮度

圖3所示為滑動調節背光亮度的案例，由滑塊控件和進度條控件組合設計實現。設計中用到了兩個png格式的圖標，一個是圓形的滑塊圖標，另一個是長條形的藍色進度條圖標。圖中滑塊圖標和進度條圖標的邊緣都能夠自然的和背景融合在一起。

圖3 透明圖標在滑塊、進度條控件上的應用展示

圖4 滑塊圖標素材

圖5 進度條圖標素材

2.2 表盤應用案例

圖6所示為表盤應用案例，該案例通過圖標旋轉控件實現，需要一張帶刻度的背景圖片，一張png格式的指針圖標。由于指針采用的是png格式圖標，指針與背景能夠完美的融合在一起。

圖6 透明圖標在旋轉圖標控件上的應用展示

圖7 表盤指針素材

2.3 表盤時鐘應用案例

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

圖8 透明圖標在表盤時鐘控件上的應用展示

圖9 表盤時鐘指針圖標素預覽

2.4 藝術字應用

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

圖10 透明圖標在藝術字控件上的應用展示

圖11 藝術字png圖標素預覽

上一條：如何調整電容觸摸屏的靈敏度下一條：串口屏內存不夠用怎么辦

copyright © 2003-2022, 中顯科技. all rights reserved.
地址：武漢市東湖新技術開發區高新四路40號葛洲壩太陽城產業園1棟
電話：027-87617912 027-87617960 027-87596062 傳真：027-87596850 鄂ICP備18025119號-2

新聞動態

當前位置：網站首頁 > 新聞動態 > 新聞動態 新聞動態

png透明圖標在串口屏上的應用

當前位置：網站首頁 > 新聞動態 > 新聞動態
新聞動態