Gradient effect for Line Graph in iPhone

家住魔仙堡 提交于 2020-01-13 03:55:14

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!