摘要:開箱即用的源碼地址洋蔥數學同款雷達圖支持自定義屬性雷達網的半徑該屬性決定了的寬高各屬性表示的最大進度雷達網的顏色雷達網的線寬各屬性文字的顏色各屬性文字和中心處名字的字體路徑中心連接區域的顏色中心連接區域的邊框顏色中心處的名字中
開箱即用的源碼地址
洋蔥數學同款雷達圖-RadarView
支持XML自定義屬性:
rv_webRadius:雷達網的半徑(該屬性決定了View的寬高)
rv_webMaxProgress:各屬性表示的最大進度
rv_webLineColor:雷達網的顏色
rv_webLineWidth:雷達網的線寬
rv_textArrayedColor:各屬性文字的顏色
rv_textArrayedFontPath:各屬性文字和中心處名字的字體路徑
rv_areaColor:中心連接區域的顏色
rv_areaBorderColor:中心連接區域的邊框顏色
rv_textCenteredName:中心處的名字
rv_textCenteredColor:中心文字的顏色
rv_textCenteredFontPath:中心數字文字的字體路徑
rv_animateTime:動畫執行時間
rv_animateMode:動畫模式
TIME:時間一定,動畫執行時間為rv_animateTime
SPEED:速度一定,動畫執行速度為rv_webMaxProgress?rv_animateTime
支持代碼設置數據源:
setTextArray(textList: List
setProgressList(progressList: List
setOldProgressList(oldProgressList: List
支持代碼執行動畫:
doInvalidate():各個屬性的動畫一起執行
doInvalidate(index: Int, block: ((Int) -> Unit));:指定某屬性執行動畫,可傳入參數接收動畫結束的回調
起源近來我司產品側在重構一項業務,連帶UI也有變動,其中就涉及到了雷達圖,所以也就有了這次封裝的RadarView,其主要特點是:
有豐富的自定義屬性,可對雷達圖外觀進行設置
支持自由設置屬性個數
支持兩種動畫模式(時間一定、速度一定)
支持指定某屬性執行動畫(從而滿足UI稿的個性需求,見頭圖三)
頭圖三聯是演示了該View的主要特點,然后結合局部UI稿,大家可以對比看下(還原度99%,?(? ? ??)嘿嘿嘿)。
思考分析
NOTE:
我們把六角形抽象成N角形,后文統一使用N角形表示
我們在繪制前會把坐標系原點移動到雷達圖中心,后文統一使用原點表示
我們先來思考下關鍵技術點:
繪制N角形雷達網
繪制虛線
虛線可以給Paint設置DashPathEffect實現
以雷達圖中心為原點,將坐標系每逆時針旋轉360/N度,從原點向上繪制長度為雷達網半徑的虛線
繪制實線
在繪制完一條虛線后,緊接著繪制實線
同樣以雷達圖中心為原點,將坐標系每向上移動雷達網半徑/4后,并且順時針旋轉360/N/2度(為什么是這個值?大家可自行
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/7057.html
摘要:原文鏈接公司產品需要一個雷達圖來展示各維度的比重,網上找了一波,學到不少,直接自己上手來擼一記無圖言虛空簡單分析一波,確定雷達圖正幾邊形的正五邊形,分為幾個層數層畫邊畫線描繪文字覆蓋區域主要這幾步,開擼自定義繼承確定需要使用的變量, 原文鏈接 https://mp.weixin.qq.com/s/Ms... 公司產品需要一個雷達圖來展示各維度的比重,網上找了一波,學到不少,直接自己上...
摘要:導語本期訪談對象小猴機器人,清華人工智能專業博士在讀。或許因為成長于廣袤的內蒙,小猴身上帶著大山和草原一般的灑脫與樂觀,在他鐘愛的無人車上,印上了一個美好的我們的征途是星辰大海。技術人攻略除了規則挖掘,人工智能遇到的難題還 showImg(https://segmentfault.com/img/bVc1yA); 文:Gracia,攝影:周振邦 (本文為原創內容,部分或全文轉載均需經作...
閱讀 730·2023-04-25 19:43
閱讀 3974·2021-11-30 14:52
閱讀 3801·2021-11-30 14:52
閱讀 3865·2021-11-29 11:00
閱讀 3796·2021-11-29 11:00
閱讀 3894·2021-11-29 11:00
閱讀 3571·2021-11-29 11:00
閱讀 6154·2021-11-29 11:00