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