iOS 繪圖 - 如何繪製一個多邊形能力分佈圖

王小樹發表於2017-05-24

iOS 繪圖 - 如何繪製一個多邊形能力分佈圖
能力分佈圖

本文首發於:我的簡書

#前言

能力分佈圖是一個統計類經常需要的一個需求,需要一定的幾何計算,實現難度適中,在平時也很適合拿來用作iOS繪圖練手。
這裡寫了一個具有一定可複用行比較高的多邊形能力分佈圖,有需要的同學可以拿去用,也可以當做自己的練手Demo。相關程式碼我都放在我的Github-AWPolygonView上,後續會有優化更新,有什麼問題歡迎大家提出想法,互相學習進步。

正文

一、計算各個點的座標

畫圖一個核心步驟是計算需要的點的座標。需要的點的型別為:中心點、邊上的角、能力值的各個點。接下來開始計算各個點的座標。

1、中心的點

x座標就是View的寬度的一半
y座標就是View的高度的一半

    _centerX = self.bounds.size.width/2;
    _centerY = self.bounds.size.height/2;複製程式碼
2、邊上的角度

根據需要是幾邊形,通過在一個以View的中心點為圓心,view的寬度為直徑的圓上取點。
然後通過角度和半徑 進行計算獲得各個點的座標
cossin方法引數需要為弧度,將其轉換成傳入引數為角度的ANGLE_COS方法
公式為:

1弧度=180/π度
1度=π/180弧度複製程式碼

程式碼就是:

#define ANGLE_COS(Angle) cos(M_PI / 180 * (Angle))
#define ANGLE_SIN(Angle) sin(M_PI / 180 * (Angle))複製程式碼

接著通過一個迴圈計算每個點的座標。
點的座標計算程式碼如下:

//self.radius 為半徑
//self.sideNum為總共多少個邊
//i為逆時針第i個點

CGPoint cornerPoint = CGPointMake(
_centerX - ANGLE_COS(90.0 - 360.0 /self.sideNum * i) * self.radius,
_centerY - ANGLE_SIN(90.0 - 360.0 /self.sideNum * i) * self.radius);複製程式碼
3、能力值點的座標

能力值的點不想邊上的點那麼有規律,半徑長短不一,但是角度跟邊上的點的角度是一樣的,所以只要在邊上的點的基礎上乘上半徑長短比例就可以了。
程式碼如下:

    //Values
    for (int i = 0; i < self.sideNum; i++) {
        if (self.values.count > i) {
            CGFloat valueRadius = [self.values[i] floatValue] * self.radius;
            CGPoint valuePoint =  CGPointMake(_centerX - ANGLE_COS(90.0 - 360.0 /self.sideNum * i) * valueRadius,
                                              _centerY - ANGLE_SIN(90.0 - 360.0 /self.sideNum * i) * valueRadius);
            [tempValuePoints addObject:[NSValue valueWithCGPoint:valuePoint]];
        }
    }複製程式碼

二、進行連線

1、採用CoreGraphics方法

各個點的座標確定好了,接下來就是連線了,可以採用CoreGraphics中的context繪製直線方法:

    CGContextMoveToPoint(CGContextRef  _Nullable c, CGFloat x, CGFloat y)
    CGContextAddLineToPoint(CGContextRef  _Nullable c, CGFloat x, CGFloat y)複製程式碼

這樣可以直接劃線比較簡單,但是隻滿足不需要動畫的需求。如果需要進行類似Stroke動畫變需要使用貝塞爾曲線

2、使用貝塞爾曲線與CAShaperLayer結合

初始化一個UIBezierPath

- (UIBezierPath *)bezierPath {
    if (!_bezierPath) {
        _bezierPath = [UIBezierPath bezierPath];
    }
    return _bezierPath;
}複製程式碼

通過這個bezierPath進行畫路徑

[_bezierPath moveToPoint:firstPoint];
[_bezierPath addLineToPoint:point];複製程式碼

將貝塞爾曲線路徑賦值給CAShapeLayer的路徑

    self.shapeLayer.path = self.bezierPath.CGPath;複製程式碼

此時已經劃出需要的圖案,接著是執行動畫

- (void)addStrokeEndAnimationToLayer:(CAShapeLayer *)layer {
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = @0;
    animation.toValue = @1;
    animation.duration = self.animationDuration;
    [layer addAnimation:animation forKey:@"stokeEndAnimation"];
}
//呼叫動畫
[self addStrokeEndAnimationToLayer:self.shapeLayer];複製程式碼

三、展示效果

接下來是展示動畫效果:

iOS 繪圖 - 如何繪製一個多邊形能力分佈圖
animation.gif

相關程式碼我都放在我的Github-AWPolygonView上,後續會有優化更新,有什麼問題歡迎大家提出想法,互相學習進步。

相關文章