曲線圖(統(tǒng)計圖)的實現(xiàn)

上一遍總結和分享是關于上面那個環(huán)形的view的,在研究完環(huán)形的進度視圖之后,開始研究下面這個看起來很怕人的曲線統(tǒng)計圖。因為沒有接口,所以只能是先自己做一些假數(shù)據(jù),大致繪制一個樣子。

1、在開始動手之前,先構想了一下,這個視圖是在拿到數(shù)據(jù)之后才去創(chuàng)建出來的。那么直接重寫一個繼承于UIView的view的初始化方法,在初始化時候就把數(shù)據(jù)傳進去不就好了嘛。

.h


注釋中提到了重寫初始化方法一定要記得init后面的字母要大寫 Xcode判斷是否為init方法規(guī)則:方法返回id,并且名字以init+大寫字母開頭+其他 ?為準則 如果你不大寫 這個方法里調用父類的初始化方法是會報錯的。

還有一點需要說的是,初始化方法一個是返回id,一個是instancetype,這兩個的區(qū)別是需要我們去研究的,后面我會自己研究,然后繼續(xù)總結在這里。

.m

2、有了數(shù)據(jù)之后,開始繪制這個view,第一步要做的,一定是確定坐標系——x軸和y軸。

這里繪制x軸和y軸又用到了一個新的類 CGContextRef ,先開始很困惑,不知道這是個什么東西,在查閱了一些資料后,發(fā)現(xiàn)和UIBezierPath一樣,都是用于平面繪制的,小菜瓜感覺CGContextRef給了必要的參數(shù)自己就去畫了。我們用UIBezierPath,給了一些參數(shù)是想要得到UIBezierPath的CGPath的,獲取這個路徑再利用CAShapeLayer去繪制的。c

而且基于剛才的問題,因為要在有了數(shù)據(jù)之后才能去創(chuàng)建視圖,而且繪制的操作都是要在drawrect里面做的,我沒有辦法控制這個方法的執(zhí)行,這些是嘗試過之后才發(fā)現(xiàn)的,后來在demo中找到了一種比較機智的辦法就是重寫view的初始化方法,初始化時順便把帶有數(shù)據(jù)的數(shù)組傳進來,這樣在執(zhí)行drawrect的時候,一定是有數(shù)據(jù)的。

這些事情做完之后,就可以安心的開始繪制x軸和y軸了。

第一步就是獲取當前制圖的上下文,后面進行設置也需要當前的制圖上下文這個參數(shù)。后面就是設置畫線的寬度和顏色了。

moveToPoint的方法就是設置起始點。addLineToPoint就是連線了,參數(shù)就是當前繪圖的上下文和那個點的x和y。CGContextStrokePath是開始連線,開始繪制。

for循環(huán)里面的label是記錄刻度用的。

3、很關鍵的部分來了,下面將利用UIBezierPath結合CAShapeLayer做一個帶動畫的曲線統(tǒng)計圖。

有必要說的是這一點,path addCurveToPoint………… controlPoint1 …… controlPoint2……

這兩個控制點需要用到一些數(shù)學知識了,這兩個點是用來控制曲線的彎曲方向和程度了,這兩個點很重要,具體控制的一些東西如果有興趣的話可以具體再研究的。這兩個控制點,一般這樣給:controlPoint1:(x:起始點的x + 結束點的x 的和 除以2,y:起始點的y) controlPoint2:(x:起始點的x + 結束點的x 的和 除以2,y:結束點的y)這個地方是一個坑點,之前因為點的精確問題出了很多問題,明明用的是畫曲線方法,出來是折線,還有一堆亂七八糟的線段等等。

4、最后別忘了移除這個動畫


5、最后效果展示就是這樣了,還一些細節(jié)調整。


效果圖

github地址

我是神經病。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容