本文首发于:个人简书javascript
#前言java
能力分布图是一个统计类常常须要的一个需求,须要必定的几何计算,实现难度适中,在平时也很适合拿来用做iOS绘图练手。
这里写了一个具备必定可复用行比较高的多边形能力分布图,有须要的同窗能够拿去用,也能够当作本身的练手Demo。相关代码我都放在个人Github-AWPolygonView上,后续会有优化更新,有什么问题欢迎你们提出想法,互相学习进步。git
画图一个核心步骤是计算须要的点的坐标。须要的点的类型为:中心点、边上的角、能力值的各个点。接下来开始计算各个点的坐标。github
x坐标就是View的宽度的一半
y坐标就是View的高度的一半ide
_centerX = self.bounds.size.width/2;
_centerY = self.bounds.size.height/2;复制代码
根据须要是几边形,经过在一个以View的中心点为圆心,view的宽度为直径的圆上取点。
而后经过角度和半径 进行计算得到各个点的坐标cos
和sin
方法参数须要为弧度,将其转换成传入参数为角度的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);复制代码
能力值的点不想边上的点那么有规律,半径长短不一,可是角度跟边上的点的角度是同样的,因此只要在边上的点的基础上乘上半径长短比例就能够了。
代码以下:spa
//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]];
}
}复制代码
各个点的坐标肯定好了,接下来就是连线了,能够采用CoreGraphics中的context绘制直线方法:code
CGContextMoveToPoint(CGContextRef _Nullable c, CGFloat x, CGFloat y)
CGContextAddLineToPoint(CGContextRef _Nullable c, CGFloat x, CGFloat y)复制代码
这样能够直接划线比较简单,可是只知足不须要动画的需求。若是须要进行相似Stroke
动画变须要使用贝塞尔曲线
初始化一个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];复制代码
接下来是展现动画效果: