Эффект градиента для линейного графика в iPhone

Я пытаюсь создать график с эффектом градиента/затенения. Теперь я могу рисовать линейный график и применять к нему эффект градиента. Это относится ко всему виду, а не к графику. Теперь я получаю изображение типа введите здесь описание изображения. Но я хочу, например, введите здесь описание изображенияэто. Я хочу эффект градиента прямо под графиком.

Пожалуйста, помогите мне в этом. Заранее спасибо.

Код, который я использую:

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

iphone gradient core-graphics linegraph
person MohanVydehi    schedule 29.01.2011    source источник
comment
Если вы хотите, чтобы полный красный (или белый) цвет был в самой верхней точке графика, а не в верхней части представления, вам нужно указать координату y самой высокой точки на графике в качестве вершины градиента. .   -  person Peter Hosey    schedule 30.01.2011

Ответы (1)


arrow_upward
4
arrow_downward

Хитрость заключается в том, чтобы установить обтравочный контур, прежде чем рисовать градиент. Подробности смотрите в документации CGContextRef.

person Josh Bleecher Snyder    schedule 29.01.2011
comment
Спасибо, но я использую обтравочный контур. CGContextClip(UIGraphicsGetCurrentContext()); Но текущий контекст определяется видом заднего изображения.UIGraphicsBeginImageContext(self.graphView.frame.size); [graphView.image drawInRect:CGRectMake(0, 0, self.graphView.frame.size.width, self.graphView.frame.size.height)]; - person MohanVydehi; 29.01.2011
comment
@MohanVydehi: Вы говорите, что устанавливаете путь отсечения в контексте, отличном от того, в котором вы рисуете изображение? Если да, то вот почему. В противном случае это значительно прояснило бы ситуацию, если бы вы отредактировали свой вопрос, включив в него полный код любого метода вашего представления, выполняющего отсечение и рисование. - person Peter Hosey; 29.01.2011
comment
Спасибо за ваше предложение. Я понял проблему. Я прикрепил свой код, пожалуйста, внесите некоторые изменения и помогите мне завершить приложение. - person MohanVydehi; 30.01.2011