IOS繪制漸變背景色折線圖的一種嘗試

1.繪制折線圖

     上次在群里看到一個折線圖划的很漂亮，自己想實現一個這樣的

，但是一直沒什么頭緒，不知道怎么做，就開始在網上查找划線，繪

制漸變色這一塊的內容，用最笨的方式，自己嘗試的寫了一些，也沒

有完全實現這些內容，權當是記錄下學習的這塊內容。

 

2.實現的效果

 

 

3.實現的代碼

  
    //添加坐標的坐標點
    UIBezierPath * pathtemp=[[UIBezierPath alloc] init];
    [pathtemp moveToPoint:CGPointMake(10, 100)];
    [pathtemp addLineToPoint:CGPointMake(50, 90)];
    [pathtemp addLineToPoint:CGPointMake(100, 50)];
    [pathtemp addLineToPoint:CGPointMake(150, 80)];
    [pathtemp addLineToPoint:CGPointMake(200, 70)];
    [pathtemp addLineToPoint:CGPointMake(250, 60)];
    [pathtemp addLineToPoint:CGPointMake(300, 50)];
    [pathtemp addLineToPoint:CGPointMake(350, 100)];
    
    
    //把折線繪制到界面
    CAShapeLayer *arctemp = [CAShapeLayer layer];
    arctemp.path =pathtemp.CGPath;  //path->CGPath;
    arctemp.strokeColor = [UIColor purpleColor].CGColor;
    arctemp.lineWidth = 8;
    [self.view.layer addSublayer:arctemp];
    
     //繪制線條的動畫
     CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
     drawAnimation.duration            = 5.0;
     drawAnimation.repeatCount         = 1.0;
     drawAnimation.removedOnCompletion = NO;
     drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
     drawAnimation.toValue   = [NSNumber numberWithFloat:10.0f];
     drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
     [arctemp addAnimation:drawAnimation forKey:@"drawCircleAnimation"];
    

    
//===================================================================================================================
    
    
    //繪制漸變色層
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame =CGRectMake(0, 0, 500, 400) ;// self.view.frame;
    gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed:249.0/255.0 green:127.0/255.0 blue:127.0/255.0 alpha:1].CGColor ,
                             (__bridge id)[UIColor colorWithRed:250.0/255.0 green:150.0/255.0 blue:150.0/255.0 alpha:1].CGColor,
                             (__bridge id)[UIColor yellowColor].CGColor];
    gradientLayer.locations=@[@0.0,@0.2,@1.0];
    
    gradientLayer.startPoint = CGPointMake(0.5,0.5);
    gradientLayer.endPoint = CGPointMake(0.5,1);
  
    
    [self.view.layer addSublayer:gradientLayer];//加上漸變層
    
    
    
//============第一種方式添加路徑->這個是繪制漸變需要的
        UIBezierPath * path=[[UIBezierPath alloc] init];
        [path moveToPoint:CGPointMake(10, 100)];
        [path addLineToPoint:CGPointMake(10, 300)];
        [path addLineToPoint:CGPointMake(350, 300)];
        [path addLineToPoint:CGPointMake(350, 100)];
        [path addLineToPoint:CGPointMake(300, 50)];
        [path addLineToPoint:CGPointMake(250, 60)];
        [path addLineToPoint:CGPointMake(200, 70)];
        [path addLineToPoint:CGPointMake(150, 80)];
        [path addLineToPoint:CGPointMake(100, 50)];
        [path addLineToPoint:CGPointMake(50, 90)];
        [path closePath];
    
//============第二種方式添加路徑
//  UIBezierPath* path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10,10,100,100)];
    
    
//============第三種方式添加path路徑
//    CGMutablePathRef path = CGPathCreateMutable();
//    
//    CGPathAddRect(path, nil, CGRectInset(self.view.bounds, 20, 120));
    

  
    
    
   
    
    
       CAShapeLayer *arc = [CAShapeLayer layer];
       arc.path =path.CGPath;
       arc.fillColor = [UIColor yellowColor].CGColor;
       arc.strokeColor = [UIColor yellowColor].CGColor;
       arc.lineWidth = 1;
       gradientLayer.mask=arc;