Как нарисовать дугу с градиентом, то есть радугу?

Question

Следующий код рисует полукруг с градиентом от красного до зеленого. Это не то, что я хотел. Я ожидал, что дуга шириной 5 пикселей закрашена градиентом.

Любая помощь в указании, где я ошибся, будет принята с благодарностью.

Чарльз

-(void) DrawRainbow {
// Create an arc path
float x = 150.0;
float y = 220.0;
float radius = 75.0;
float startAngle = M_PI;
float endAngle   = 2*M_PI;
bool clockWise = false;
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddArc(path, nil, x, y, radius, startAngle, endAngle, clockWise);

// Setup the gradient
size_t num_locations = 2;
CGFloat locations[2] = { 0.0, 1.0 };
CGFloat components[8] = {
    1.0, 0.0, 0.0, 1.0,   // Start color is red
    0.0, 1.0, 0.0, 1.0 }; // End color is green
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradientFill = 
    CGGradientCreateWithColorComponents (colorSpace, components,
                                         locations, num_locations);
// setup gradient points
CGRect pathRect = CGPathGetBoundingBox(path);
CGPoint myStartPoint, myEndPoint;
myStartPoint.x = CGRectGetMinX(pathRect);
myStartPoint.y = CGRectGetMinY(pathRect);
myEndPoint.x   = CGRectGetMaxX(pathRect);
myEndPoint.y   = CGRectGetMinY(pathRect);

// draw the gradient
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 5.0);
CGContextAddPath(context, path);
CGContextSaveGState(context);
CGContextClip(context);
CGContextDrawLinearGradient (context, gradientFill,
                             myStartPoint, myEndPoint, 0);
CGContextRestoreGState(context);

CGGradientRelease(gradientFill);
CGColorSpaceRelease(colorSpace);

}

Answer 1

Я думаю, вы хотите радиальный градиент. См. Этот документ Apple.

https://developer.apple.com/library/mac/#documentation/graphicsimaging/conceptual/drawingwithquartz2d/dq_shadings/dq_shadings.html

Answer 2

Результирующий градиент, на мой взгляд, выглядит как фон для указателя уровня топлива, поэтому радиальный градиент может не дать должного эффекта. У меня нет большого опыта работы с кварцем, но моя идея - заполнить эллипс, используя цвет фона.

radius -= 5.0;
CGRect rainbowArch = CGRectMake( x - radius, y - radius, 2 * radius, 2 * radius);
const CGFloat * bgComponents = CGColorGetComponents( self.backgroundColor.CGColor );
CGContextSetRGBFillColor(context, bgComponents[0], bgComponents[1], bgComponents[2], 1.0);
CGContextFillEllipseInRect( context, rainbowArch );

...
CGContextRestoreGState(context);

CGGradientRelease(gradientFill);
CGColorSpaceRelease(colorSpace);