问题
I'm trying to generate a graph with gradient/shading effect. Now I'm able to draw line graph and applied gradient effect to that graph. It is applying to whole view not to the graph. Now I'm getting image like
this. But I want like this. I want gradient effect just under the graph.Please help me in this. Thanks in advance.
The code that I'm using is:
UIGraphicsBeginImageContext(self.graphView.frame.size);
[graphView.image drawInRect:CGRectMake(0, 0, self.graphView.frame.size.width, self.graphView.frame.size.height)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineJoin(UIGraphicsGetCurrentContext(), kCGLineJoinRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 2.0);
CGContextSetRGBFillColor(UIGraphicsGetCurrentContext(), 225, 48, 48, 1.0);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 225, 225, 0.0, 1.0);
CGContextBeginPath(UIGraphicsGetCurrentContext());
float xCordinate, yCordinate;
for (int i = 0; i < [graphValues count]; i++) {
int val = [[graphValues objectAtIndex: i] intValue] / 5;
float diff = [[graphValues objectAtIndex: i] floatValue] / 5 - val;
yCordinate = val * 120 + 120 * diff;
xCordinate = graphWidth * i / [graphValues count] + 60;
if (i == 0)
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), xCordinate, graphHeight + 60 - yCordinate);
else
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), xCordinate, graphHeight + 60 - yCordinate);
}
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), xCordinate, graphHeight + 60);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), 60, graphHeight + 60);
CGContextClosePath(UIGraphicsGetCurrentContext());
CGContextSaveGState(UIGraphicsGetCurrentContext());
CGContextDrawPath(UIGraphicsGetCurrentContext(), kCGPathStroke);
// CGContextFillPath(UIGraphicsGetCurrentContext());
CGContextClip(UIGraphicsGetCurrentContext());
//Draw Gradient
UIColor *topColor = [UIColor colorWithRed: 1.0 green:1.0 blue:1.0 alpha:1.0];
UIColor *bottomColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.0];
CGColorRef colorRef[] = { [topColor CGColor], [bottomColor CGColor] };
CFArrayRef colors = CFArrayCreate(NULL, (const void**)colorRef, sizeof(colorRef) / sizeof(CGColorRef), &kCFTypeArrayCallBacks);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, colors, NULL);
CFRelease(colorSpace);
CFRelease(colors);
// Draw a linear gradient from top to bottom
CGPoint gradStartPoint = CGPointMake(50.0, graphView.bounds.size.height);
CGPoint gradEndPoint = CGPointMake(50.0, 0.0);
CGContextDrawLinearGradient(UIGraphicsGetCurrentContext(), gradient, gradStartPoint, gradEndPoint, 0);
CFRelease(gradient);
// Cleanup
CGColorSpaceRelease(colorSpace);
CGContextRestoreGState(UIGraphicsGetCurrentContext());
graphView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
回答1:
The trick is to set a clipping path before you draw the gradient. See the CGContextRef docs for details.
来源:https://stackoverflow.com/questions/4835515/gradient-effect-for-line-graph-in-iphone