根据UIBezierPath与CAShapeLayer画折线

来源:互联网 发布:韩国出口数据 编辑:程序博客网 时间:2024/06/07 23:44
//创建数据 NSMutableArray * dataArray = [[NSMutableArray alloc]init];    for (int i=0; i<10; i++) {                int a = arc4random()%150;        [dataArray addObject:[NSNumber numberWithInt:a]];            }        //创建坐标轴    CGFloat XAxisWidth = Device_Width - FIT_WIDTH(23)*2; // X宽度    CGFloat YAxisHeight = FIT_HEIGHT(150); // Y高度    CGPoint axisOriginPoint = CGPointMake(FIT_WIDTH(23), FIT_HEIGHT(350)); // 起始点坐标        //创建路径    UIBezierPath * bezierPath = [[UIBezierPath alloc]init];    [bezierPath moveToPoint:CGPointMake(FIT_WIDTH(23), axisOriginPoint.y - YAxisHeight)];    [bezierPath addLineToPoint:CGPointMake(FIT_WIDTH(23), axisOriginPoint.y)];    [bezierPath addLineToPoint:CGPointMake(FIT_WIDTH(23) + XAxisWidth, axisOriginPoint.y)];        //画坐标轴    CAShapeLayer * XAxisShapeLayer = [[CAShapeLayer alloc]init];    XAxisShapeLayer.path = bezierPath.CGPath;    XAxisShapeLayer.lineWidth = 2;    XAxisShapeLayer.lineJoin = kCALineJoinRound;    XAxisShapeLayer.strokeColor = [UIColor lightGrayColor].CGColor;    XAxisShapeLayer.fillColor = nil;    [self.layer addSublayer:XAxisShapeLayer];    [bezierPath removeAllPoints];            //创建折线点    for (int i=0; i<dataArray.count; i++) {                //X坐标文字        CATextLayer * textLayer = [[CATextLayer alloc]init];        textLayer.string = [NSString stringWithFormat:@"%d",i];        textLayer.fontSize = FIT_HEIGHT(11);        textLayer.foregroundColor = [UIColor lightGrayColor].CGColor;        textLayer.frame = CGRectMake(FIT_WIDTH(23)+XAxisWidth/dataArray.count * i, axisOriginPoint.y +FIT_HEIGHT(5), XAxisWidth/dataArray.count, FIT_HEIGHT(11));        textLayer.alignmentMode = kCAAlignmentLeft;        textLayer.contentsScale = [UIScreen mainScreen].scale; // 以屏幕适配文字,避免拉伸或者模糊        [self.layer addSublayer:textLayer];                        //x坐标标志        UIBezierPath * bezierPath = [[UIBezierPath alloc]init];        [bezierPath moveToPoint:CGPointMake(FIT_HEIGHT(23) + XAxisWidth/dataArray.count * i, axisOriginPoint.y)];        [bezierPath addLineToPoint:CGPointMake(FIT_HEIGHT(23) + XAxisWidth/dataArray.count * i, axisOriginPoint.y - FIT_HEIGHT(3))];        CAShapeLayer * shapeLayerX = [[CAShapeLayer alloc]init];        shapeLayerX.path = bezierPath.CGPath;        shapeLayerX.lineWidth = 1;        shapeLayerX.strokeColor = [UIColor lightGrayColor].CGColor;        shapeLayerX.fillColor = nil;        [self.layer addSublayer:shapeLayerX];        [bezierPath removeAllPoints];                        //y坐标标志        bezierPath = [[UIBezierPath alloc]init];        [bezierPath moveToPoint:CGPointMake(FIT_HEIGHT(23) + XAxisWidth/dataArray.count * i, axisOriginPoint.y)];        [bezierPath addLineToPoint:CGPointMake(FIT_HEIGHT(23) + XAxisWidth/dataArray.count * i, axisOriginPoint.y - FIT_HEIGHT(3))];        CAShapeLayer * shapeLayerY = [[CAShapeLayer alloc]init];        shapeLayerY.path = bezierPath.CGPath;        shapeLayerY.lineWidth = 1;        shapeLayerY.strokeColor = [UIColor lightGrayColor].CGColor;        shapeLayerY.fillColor = nil;        [self.layer addSublayer:shapeLayerY];        [bezierPath removeAllPoints];                    }        //创建数据折线    UIBezierPath * brokenBezierPath = [[UIBezierPath alloc]init];    CAShapeLayer * brokenShaperLayer = [[CAShapeLayer alloc]init];        for (int i=0; i<dataArray.count; i++) {                CGFloat height = axisOriginPoint.y - [dataArray[i] floatValue] ;        if (i == 0) {            [brokenBezierPath moveToPoint:CGPointMake(FIT_WIDTH(23), height)];        }        else            [brokenBezierPath addLineToPoint:CGPointMake(FIT_WIDTH(23) + XAxisWidth/dataArray.count * i , height)];            }        brokenShaperLayer.path = brokenBezierPath.CGPath;    brokenShaperLayer.lineWidth = 2;    brokenShaperLayer.strokeColor = Color_248.CGColor;    brokenShaperLayer.fillColor = nil;    brokenShaperLayer.lineJoin = kCALineJoinRound;    [self.layer addSublayer:brokenShaperLayer];                /*        •速度控制函数(CAMediaTimingFunction)        1.kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉        2.kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开        3.kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地        4.kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。    */        //通过 strokeEnd 添加简单的动画效果    CABasicAnimation * brokenAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];    brokenAnimation.fromValue = @0;    brokenAnimation.toValue = @1;    brokenAnimation.duration = 2;    brokenAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];    [brokenShaperLayer addAnimation:brokenAnimation forKey:@"brokenAnimation"];/* 几种动画方式    transform.scale            比例转化     @(0.8)    transform.scale.x          宽的比例     @(0.8)    transform.scale.y          高的比例     @(0.8)    transform.rotation.x       围绕x轴旋转     @(M_PI)    transform.rotation.y       围绕y轴旋转     @(M_PI)    transform.rotation.z       围绕z轴旋转     @(M_PI)    cornerRadius               圆角的设置     @(50)    backgroundColor            背景颜色的变化     (id)[UIColor purpleColor].CGColor    bounds                     大小,中心不变     [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];    position                   位置(中心点的改变)     [NSValue valueWithCGPoint:CGPointMake(300, 300)];    contents                   内容,比如UIImageView的图片     imageAnima.toValue = (id)[UIImage imageNamed:@"to"].CGImage;    opacity                    透明度     @(0.7)    contentsRect.size.width     横向拉伸缩放     @(0.4)最好是0~1之间的   */

原创粉丝点击