疯狂做受ⅩⅩⅩⅩ高潮高清视频_顶级欧美熟妇高潮xxxxx_久久久不卡国产精品一区二区_国产成人愉拍精品
首頁(ye)
新聞(wen)動態
產品展示(shi)
資料下(xia)載(zai)
聯系我們(men)
新聞動態
新聞動態
當前位置:
網站首頁
>
新聞動態
>
新聞動態
新聞動態
圓形進度條在串口屏上的應用
分享到(dao):
點擊次數:
更新時間:2022-07-13 15:41:10 【
打印此頁
】 【
關閉
】
導讀:
圓形(xing)(xing)進度(du)條在(zai)UI設(she)計(ji)中是(shi)一(yi)種(zhong)比(bi)較常見的(de)(de)(de)表示進度(du)的(de)(de)(de)方(fang)式。串口屏的(de)(de)(de)UI設(she)計(ji)也是(shi)如(ru)此。在(zai)之前(qian)的(de)(de)(de)實現方(fang)式中,使(shi)用(yong)變量圖標(biao)(biao)來(lai)實現圓形(xing)(xing)進度(du)條的(de)(de)(de)功能,將圖標(biao)(biao)內容設(she)計(ji)成一(yi)個圓形(xing)(xing)進度(du)條,每個圖標(biao)(biao)對應一(yi)個進度(du)值。這樣(yang)做的(de)(de)(de)需(xu)要提(ti)前(qian)準(zhun)備大量的(de)(de)(de)圖標(biao)(biao)素材,由于圖標(biao)(biao)數(shu)量的(de)(de)(de)限(xian)制,進度(du)值的(de)(de)(de)精度(du)有限(xian),并且大量的(de)(de)(de)圖標(biao)(biao)會占用(yong)更(geng)多的(de)(de)(de)存(cun)儲空間。
使(shi)用圓形進度條(tiao)控件,支持(chi)單色(se)填充背景或前景圓環,無需(xu)圖標素材,即可快速制作進度條(tiao)UI。對于需(xu)要進度條(tiao)色(se)彩更加(jia)豐富的(de)需(xu)求(qiu),支持(chi)圖標或圖片素材中獲取相應位置的(de)顏(yan)色(se)填充的(de)圓環中。描述(shu)指針的(de)使(shi)用,使(shi)得進度條(tiao)的(de)位置,大小,顏(yan)色(se),角度調整(zheng)更加(jia)方便,給(gei)UI帶(dai)來(lai)更大的(de)靈活性。注:僅SDWb系列20220517及以后固件支持(chi)。
一、VGUS組態軟件中如何使用圓形進度條
在VGUS組態軟件中,控件位置為:變量配置->圓(yuan)形進度條顯示。
圓形進度條(tiao)顯示(shi)控(kong)件設置如圖(tu)1所示(shi)。
圖1 圓(yuan)形進度條顯示(shi)控件屬性(xing)設置
變量存儲地址:字(zi)地址,范圍0000~FFFF,用于存儲變量,長度為(wei)一個單(dan)元(字(zi)地址一個單(dan)元包含2個字(zi)節)。
使用(yong)0x82指令刷新進度條時需要使用(yong)該地址。
起始值:變量為(wei)該值時,前景所顯示(shi)的(de)區(qu)域占整個(ge)前景區(qu)域的(de)0%。
終止值:變量(liang)為該值時(shi),前景所顯(xian)示的區域(yu)(yu)占(zhan)整(zheng)個前景區域(yu)(yu)的100%。
起始(shi)角(jiao)(jiao)度(du)(du)/終(zhong)止角(jiao)(jiao)度(du)(du):起始(shi)值/終(zhong)止值分別對應(ying)的角(jiao)(jiao)度(du)(du)值。設置范圍0-720。對應(ying)實際(ji)的角(jiao)(jiao)度(du)(du)為0-360。調(diao)整精度(du)(du)為0.5度(du)(du)。
進度(du)(du)條厚(hou)度(du)(du):圓環的厚(hou)度(du)(du)。當厚(hou)度(du)(du)大(da)于等于整(zheng)個圓環寬(kuan)度(du)(du)的1/2時(shi),內圓半(ban)徑為0,此時(shi)將(jiang)顯示為扇(shan)形。
邊緣圓(yuan)角(jiao):開始和結束的(de)位置使用圓(yuan)角(jiao)顯示。
進(jin)度方向:從起始(shi)角度對應的位置開始(shi),沿順時針或逆時針方向顯示到(dao)結束角度對應的位置。
背景類型(xing):選擇不同(tong)的素材填充背景圓環(huan)。
背景顏色:單色填充背景圓環;
背景(jing)切圖:圖片素(su)材填(tian)充背景(jing)圓環;
背(bei)景圖(tu)標:圖(tu)標素材填充背(bei)景圓環(huan)。
前景類型:選擇不(bu)同的素(su)材填充前景圓環。
前景(jing)顏色:單色填充前景(jing)圓(yuan)環;
前(qian)景切圖(tu):圖(tu)片素材填充前(qian)景圓環(huan);
前(qian)(qian)景(jing)圖標:圖標素材(cai)填(tian)充前(qian)(qian)景(jing)圓環(huan)。
二、圓形進度條顯示案例
2.1 圓形進度條顯示效果1
圖(tu)2 圓形進度(du)條(tiao)控件顯示(shi)效果1
圖3 圓形(xing)進度條控件屬性(xing)設置1
如(ru)圖2/圖3所示(shi),設置起始值/終止值為(wei)0-100,對(dui)應的(de)起始角度/終止角度為(wei)450-270。變量由起始值向終止值變化時,前(qian)景(jing)圓環沿順時針方向遞增。使用邊緣(yuan)(yuan)圓角,使得邊緣(yuan)(yuan)過渡更(geng)加圓滑。指定背景(jing)色(se)和前(qian)景(jing)色(se)即可(ke)。無需其他素(su)材。
2.2 圓形進度條顯示效果2
圖4 圓形(xing)進度條控件顯示效果2
圖5 圓形進(jin)度條控(kong)件屬性(xing)設置2
如圖(tu)(tu)4/圖(tu)(tu)5所示,當進(jin)度(du)值為(wei)100%時(shi),將顯示整(zheng)(zheng)個圓環(huan)。使用圖(tu)(tu)標素材作為(wei)前(qian)景圓環(huan)的(de)填充,整(zheng)(zheng)個進(jin)度(du)條(tiao)的(de)色彩變的(de)極為(wei)豐富。當進(jin)度(du)值達(da)到(dao)一定值時(shi),使用特定的(de)顏色提示,將達(da)到(dao)更好的(de)UI效果。
2.3 圓形進度條顯示效果3
圖6 圓形(xing)進(jin)度條控件顯示(shi)效果(guo)3
圖7 圓形進(jin)度條控件屬性設置3
如圖(tu)6/圖(tu)7所示,分(fen)別(bie)使(shi)用兩個圖(tu)標素材作(zuo)為背景和前景的填充數據源(yuan)。使(shi)用圓形進度(du)條實(shi)現進度(du)的顯(xian)示功能,僅需要(yao)兩個圖(tu)標即可(ke):
圖8 圓(yuan)形(xing)進度(du)條背(bei)景圖標
圖(tu)9 圓(yuan)形(xing)進度條前景圖(tu)標
如果使(shi)用(yong)變量圖標顯(xian)示,需(xu)要顯(xian)示多(duo)少個級別(bie)的(de)進度值,就需(xu)要多(duo)少張圖標素材。顯(xian)然(ran),圓形進度條控(kong)件在這種應用(yong)場合(he)更具(ju)優勢。
2.4 圓形進度條顯示效果4
圖10 圓形(xing)進度條控件顯示效果4
圖11 圓形進(jin)度條控件(jian)屬性設(she)置(zhi)4
如圖10/圖11所(suo)示(shi)(shi),圓(yuan)(yuan)(yuan)形進度(du)(du)條(tiao)(tiao)顯示(shi)(shi)成了扇形。進度(du)(du)條(tiao)(tiao)的外圓(yuan)(yuan)(yuan)直(zhi)徑為(wei)(wei)320,進度(du)(du)條(tiao)(tiao)的厚度(du)(du)為(wei)(wei)160,此(ci)時內圓(yuan)(yuan)(yuan)半徑為(wei)(wei)0,圓(yuan)(yuan)(yuan)形進度(du)(du)條(tiao)(tiao)顯示(shi)(shi)為(wei)(wei)扇形。可以實現顯示(shi)(shi)簡單(dan)餅狀(zhuang)圖。
上一條:
一招讓UI“動”起來——用戶體驗從功能機時代躍升到智能機時代
下一條:
如何調整電容觸摸屏的靈敏度
copyright © 2003-2024, 中顯科技. all rights reserved.
地址:武漢市東湖新技術開發區高新四路40號葛洲壩太陽城產業園1棟
電話:027-87617912 027-87617960 027-87596062 傳真:027-87596850
技術支持:
7.8