利用UIBezierPath画曲线折线图

采用的三次曲线方式绘制path

关键坐标计算

image

在iOS中坐标原点在左上角

controlPoint1 = CGPointMake((prePonit.x+nowPoint.x)/2, prePonit.y);

controlPoint2 = CGPointMake((prePonit.x+nowPoint.x)/2, nowPoint.y)

/**
 画曲线

 @param points allPoints description
 */
- (void)drawPathWithPoints:(NSArray *)points{

    UIBezierPath *path = [UIBezierPath bezierPath];

    CGPoint prePonit;
    for (int i =0; i<points.count; i++) {
        if (i==0) {
            // 起点
            [path moveToPoint:[points[0] CGPointValue]];

            prePonit = [points[0] CGPointValue];
        }else{

            CGPoint nowPoint = [points[i] CGPointValue];
            // 三次曲线
            [path addCurveToPoint:nowPoint controlPoint1:CGPointMake((prePonit.x+nowPoint.x)/2, prePonit.y) controlPoint2:CGPointMake((prePonit.x+nowPoint.x)/2, nowPoint.y)];

            prePonit = nowPoint;
        }
    }

    // 创建CAShapeLayer
    CAShapeLayer *layer = [CAShapeLayer layer];

    layer.fillColor = [UIColor clearColor].CGColor;
    layer.lineWidth =  1.0f;
    layer.lineCap = kCALineCapRound;
    layer.lineJoin = kCALineJoinRound;
    layer.strokeColor = [UIColor blueColor].CGColor;
    [self.view.layer addSublayer:layer];
    layer.path = path.CGPath;

    // 创建Animation
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = @(0.0);
    animation.toValue = @(1.0);
    layer.autoreverses = NO;
    animation.duration = 4.0;

    // 设置layer的animation
    [layer addAnimation:animation forKey:nil];

}

效果图

image

GitHub：https://github.com/quzhongyeluo/DrawBezierPathWithPointArray