使用CAShapeLayer与UIBezierPath画动态柱状图

</pre><p style="margin-top: 0px; margin-bottom: 0px; line-height: normal; font-family: Menlo;"><pre name="code" class="objc" style="color: rgb(75, 209, 87); font-size: 11px;">////  TextView.m//  练习////  Created by 王文杰 on 16/9/20.//  Copyright © 2016年 王文杰. All rights reserved.//#import "TextView.h"@implementation TextView// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect {        NSArray * Value = @[@"60",@"90",@"100",@"80",@"200",@"30"];    NSArray * month = @[@"1月",@"2月",@"3月",@"4月",@"5月",@"6月"];    //获取数据最大值    float max = [[Value valueForKeyPath:@"@max.intValue"] floatValue];    //计算坐标比例    float value = 140/max;    //循环创建柱状图    for (int i = 0; i<Value.count; i++) {        /**         *           //获得上下文         CGContextRef ctx=UIGraphicsGetCurrentContext();         //第二个参数是x轴，第三个是y轴/起点         CGContextMoveToPoint(ctx, 80+i*50, 200);         //第二个参数是x轴，第三个是y轴/终点         CGContextAddLineToPoint(ctx, 80+i*50, self.bounds.size.height-[[cost objectAtIndex:i] floatValue]*value);         //设置绘图的颜色         CGContextSetRGBStrokeColor(ctx, 1.0, 0.7, 0.3, 1.0);         //设置线条的宽度         CGContextSetLineWidth(ctx, 10);         //设置线条的起点和终点的样式         CGContextSetLineCap(ctx, kCGLineCapButt);         //设置宽度         CGContextSetLineWidth(ctx, 20);         //绘制一条空心的线         CGContextStrokePath(ctx);         *         *  @return 第一种方法         */                                UIBezierPath *Polyline = [UIBezierPath bezierPath];        //设置起点        [Polyline moveToPoint:CGPointMake(80+i*50, 200)];        //设置终点        [Polyline addLineToPoint:CGPointMake(80+i*50,self.bounds.size.height-[[Value objectAtIndex:i] floatValue]*value)];        //设置颜色        [[UIColor clearColor] set];        //设置宽度        Polyline.lineWidth = 20;        //添加到画布        [Polyline stroke];                //添加CAShapeLayer        CAShapeLayer *shapeLine = [[CAShapeLayer alloc]init];        //设置颜色        shapeLine.strokeColor = [UIColor colorWithRed:0.400 green:1.000 blue:1.000 alpha:0.8].CGColor;        //设置宽度        shapeLine.lineWidth = 20.0;        //把CAShapeLayer添加到当前视图CAShapeLayer        [self.layer addSublayer:shapeLine];        //把Polyline的路径赋予shapeLine        shapeLine.path = Polyline.CGPath;                //开始添加动画        [CATransaction begin];        //创建一个strokeEnd路径的动画        CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];        //动画时间        pathAnimation.duration = 2.0;        //添加动画样式        pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];        //动画起点        pathAnimation.fromValue = @0.0f;        //动画停止位置        pathAnimation.toValue   = @1.0f;        //把动画添加到CAShapeLayer        [shapeLine addAnimation:pathAnimation forKey:@"strokeEndAnimation"];        //动画终点        shapeLine.strokeEnd = 1.0;        //结束动画        [CATransaction commit];                //柱状图值        UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(60+i*50, self.bounds.size.height-20-[[Value objectAtIndex:i] floatValue]*value, 40, 20)];        label.text = [NSString stringWithFormat:@"%@",[Value objectAtIndex:i]];        label.textAlignment = NSTextAlignmentCenter;        label.font = [UIFont systemFontOfSize:11];        [self addSubview:label];        //x轴坐标        UILabel * label1 = [[UILabel alloc]initWithFrame:CGRectMake(60+i*50, 200, 40, 20)];        label1.text = [NSString stringWithFormat:@"%@",[month objectAtIndex:i]];        label1.textAlignment = NSTextAlignmentCenter;        label1.font = [UIFont systemFontOfSize:15];        [self addSubview:label1];            }               //画x轴    for (int i = 0; i<15; i++) {        UIBezierPath *Polyline = [UIBezierPath bezierPath];        //设置起点        [Polyline moveToPoint:CGPointMake(0, 200-i*10)];        //设置终点        [Polyline addLineToPoint:CGPointMake(self.bounds.size.width,200-i*10)];        //设置颜色        [[UIColor grayColor] set];        //设置宽度        Polyline.lineWidth = 0.3;        //添加到画布        [Polyline stroke];    }}@end

为了方便大家看的简单明白，所以代码比较粗糙，也没有封装，应为需求开发网上找了好多UIBezierPath的资料都看的不是很明白，所以自己研究了半天写出来给大家看看。