阅读 926

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];复制代码

三、展示效果

接下来是展示动画效果:

animation.gif

相关代码我都放在我的Github-AWPolygonView上,后续会有优化更新,有什么问题欢迎大家提出想法,互相学习进步。

关注下面的标签,发现更多相似文章
评论