mobileflowllc

Add gradient color fill to circle chart

@@ -75,10 +75,6 @@ @@ -75,10 +75,6 @@
75 //gradientMask.lineWidth = 4; 75 //gradientMask.lineWidth = 4;
76 gradientMask.lineWidth = self.frame.size.width; 76 gradientMask.lineWidth = self.frame.size.width;
77 gradientMask.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height); 77 gradientMask.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height);
78 -  
79 - CGMutablePathRef t = CGPathCreateMutable();  
80 - CGPathMoveToPoint(t, NULL, 0, 0);  
81 - CGPathAddLineToPoint(t, NULL, self.bounds.size.width, self.bounds.size.height);  
82 gradientMask.path = progressline.CGPath; 78 gradientMask.path = progressline.CGPath;
83 79
84 80
@@ -26,6 +26,7 @@ typedef NS_ENUM(NSUInteger, PNChartFormatType) { @@ -26,6 +26,7 @@ typedef NS_ENUM(NSUInteger, PNChartFormatType) {
26 26
27 @property (strong, nonatomic) UICountingLabel *countingLabel; 27 @property (strong, nonatomic) UICountingLabel *countingLabel;
28 @property (nonatomic) UIColor *strokeColor; 28 @property (nonatomic) UIColor *strokeColor;
  29 +@property (nonatomic) UIColor *strokeColorGradientStart;
29 @property (nonatomic) NSNumber *total; 30 @property (nonatomic) NSNumber *total;
30 @property (nonatomic) NSNumber *current; 31 @property (nonatomic) NSNumber *current;
31 @property (nonatomic) NSNumber *lineWidth; 32 @property (nonatomic) NSNumber *lineWidth;
@@ -101,6 +101,41 @@ @@ -101,6 +101,41 @@
101 _circle.strokeEnd = [_current floatValue] / [_total floatValue]; 101 _circle.strokeEnd = [_current floatValue] / [_total floatValue];
102 102
103 [_countingLabel countFrom:0 to:[_current floatValue] withDuration:1.0]; 103 [_countingLabel countFrom:0 to:[_current floatValue] withDuration:1.0];
  104 +
  105 +
  106 + // Check if user wants to add a gradient from the start color to the bar color
  107 + if (_strokeColorGradientStart) {
  108 +
  109 + // Add gradient
  110 + CAShapeLayer *gradientMask = [CAShapeLayer layer];
  111 + gradientMask.fillColor = [[UIColor clearColor] CGColor];
  112 + gradientMask.strokeColor = [[UIColor blackColor] CGColor];
  113 + gradientMask.lineWidth = _circle.lineWidth;
  114 + gradientMask.lineCap = kCALineCapRound;
  115 + CGRect gradientFrame = CGRectMake(0, 0, 2*self.bounds.size.width, 2*self.bounds.size.height);
  116 + gradientMask.frame = gradientFrame;
  117 + gradientMask.path = _circle.path;
  118 +
  119 + CAGradientLayer *gradientLayer = [CAGradientLayer layer];
  120 + gradientLayer.startPoint = CGPointMake(0.5,1.0);
  121 + gradientLayer.endPoint = CGPointMake(0.5,0.0);
  122 + gradientLayer.frame = gradientFrame;
  123 + UIColor *endColor = (_strokeColor ? _strokeColor : [UIColor greenColor]);
  124 + NSArray *colors = @[
  125 + (id)endColor.CGColor,
  126 + (id)_strokeColorGradientStart.CGColor
  127 + ];
  128 + gradientLayer.colors = colors;
  129 +
  130 + [gradientLayer setMask:gradientMask];
  131 +
  132 + [_circle addSublayer:gradientLayer];
  133 +
  134 + gradientMask.strokeEnd = [_current floatValue] / [_total floatValue];
  135 +
  136 + [gradientMask addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
  137 + }
  138 +
104 } 139 }
105 140
106 141
@@ -147,6 +147,7 @@ @@ -147,6 +147,7 @@
147 PNCircleChart * circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0, 80.0, SCREEN_WIDTH, 100.0) andTotal:@100 andCurrent:@60 andClockwise:YES andShadow:YES]; 147 PNCircleChart * circleChart = [[PNCircleChart alloc] initWithFrame:CGRectMake(0, 80.0, SCREEN_WIDTH, 100.0) andTotal:@100 andCurrent:@60 andClockwise:YES andShadow:YES];
148 circleChart.backgroundColor = [UIColor clearColor]; 148 circleChart.backgroundColor = [UIColor clearColor];
149 [circleChart setStrokeColor:PNGreen]; 149 [circleChart setStrokeColor:PNGreen];
  150 + [circleChart setStrokeColorGradientStart:[UIColor blueColor]];
150 [circleChart strokeChart]; 151 [circleChart strokeChart];
151 152
152 [viewController.view addSubview:circleChartLabel]; 153 [viewController.view addSubview:circleChartLabel];