iPhone中折线图的渐变效果 [英] Gradient effect for Line Graph in iPhone

问题描述

我正在尝试生成具有渐变/阴影效果的图形。现在，我可以绘制折线图并将渐变效果应用于该图。它适用于整个视图而不适用于图形。现在，我得到的图像就像这样。但我想像此。我想要渐变效果就在图表下方。

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.

我正在使用的代码是：

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（））;

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

推荐答案

诀窍是在绘制之前设置剪切路径渐变。有关详细信息，请参见CGContextRef文档。

The trick is to set a clipping path before you draw the gradient. See the CGContextRef docs for details.

这篇关于iPhone中折线图的渐变效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！