iPhone中的折线图渐变效果

Question

我正在尝试生成具有渐变/阴影效果的图表。我已经能够绘制线状图并将渐变效果应用于该图表。但是它应用于整个视图而不是图表本身。现在我的图片看起来像这样：。但我想要的是。我希望渐变效果仅出现在图表下方。

请帮我解决这个问题。提前感谢您。

我正在使用的代码是：

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();

- MohanVydehi

---

如果你想让完整的红色（或白色）颜色在图表的最高点而不是视图的顶部，你需要将图表中最高点的y坐标指定为渐变的顶部。 - Peter Hosey

Answer 1

关键是在绘制渐变之前设置剪切路径。详见CGContextRef文档。

- Josh Bleecher Snyder

---

谢谢，但我正在使用剪辑路径。CGContextClip（UIGraphicsGetCurrentContext（））; 但当前上下文是由后置图像视图定义的。 UIGraphicsBeginImageContext（self.graphView.frame.size）; [graphView.image drawInRect：CGRectMake（0,0，self.graphView.frame.size.width，self.graphView.frame.size.height）]; - MohanVydehi

@MohanVydehi：你是说你在不同的上下文中设置了剪辑路径，而不是绘制图像的上下文吗？如果是这样，那就是原因。否则，如果您编辑您的问题以包括视图方法的完整代码，进行剪辑和绘制，将极大地澄清事情。 - Peter Hosey

谢谢你的建议。我理解了问题。我附上我的代码，请帮我做一些更改，帮助我完成应用程序。 - MohanVydehi