1、準(zhǔn)備元件
（1）背景矩形，注意高=圓角半徑*2，長(zhǎng)寬根據(jù)需要進(jìn)行設(shè)置，實(shí)際案例中我設(shè)置的長(zhǎng)寬分別為300，30，圓角半徑為15。
（2）進(jìn)度矩形（復(fù)制背景），寬度是背景的直徑，設(shè)置長(zhǎng)寬分別為30，30，圓角半徑為15（也可以添加一個(gè)圓形長(zhǎng)寬分別為30，30）。
（3）一個(gè)圓形，將圓形轉(zhuǎn)換成動(dòng)態(tài)面板（這里之所以轉(zhuǎn)為動(dòng)態(tài)面板，是因?yàn)橹挥袆?dòng)態(tài)面板可以添加事件“拖動(dòng)”，一般的圓形是無(wú)法實(shí)現(xiàn)這個(gè)交互），圓形文字用于顯示進(jìn)度條百分比。
三個(gè)元件的層級(jí)順序，圓圈在最上面，進(jìn)度在中間，背景在最下面
2、設(shè)置交互
拖動(dòng)圓形（動(dòng)態(tài)面板）的時(shí)候，添加三個(gè)交互
（1）圓形跟隨移動(dòng)，并設(shè)置移動(dòng)邊界。
左側(cè)大于背景矩形的X軸，右側(cè)小于等于背景矩形的寬度；
頂部大于背景矩形的y軸，底部小于等于背景矩形的高度；
（2）進(jìn)度矩形設(shè)置尺寸。
寬=圓形的X軸+圓形的直徑；
高不變，還是原始高度30；
（3）圓形上的文字設(shè)置百分比。
文本值=進(jìn)度矩形的寬度*100/背景寬，因?yàn)檫M(jìn)度我們?nèi)≌麛?shù)，需要用到函數(shù)Math.floor(x) ，向下取整。
3、查看效果
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
暫無(wú)評(píng)論，快來(lái)評(píng)論吧!