如何使用Core Graphics / iPhone绘制渐变弧？

I know how to draw a arc

我知道如何绘制弧线

and I also found how to draw a gradient line from here

I have found two function can draw gradient:CGContextDrawLinearGradient and CGContextDrawRadialGradient.but how can I draw a gradient arc? I want to realize like this picture: 如何使用Core Graphics / iPhone绘制渐变弧？

2 个解决方案

#1

I spent a long time searching for how to do this, too, so I thought I'd post the way I ended up doing it. It turns out both answers are in the excellent answer to this question:

我花了很长时间寻找如何做到这一点,所以我想我会发布我最终做的方式。事实证明,这两个答案都是这个问题的优秀答案:

Draw segments from a circle or donut

从圆圈或圆环画出片段

For my purposes, I only used the drawing and gradient parts of that answer. The structure looks more or less like this...

出于我的目的,我只使用了答案的绘图和渐变部分。结构看起来或多或少像这样......

CGContextRef context = UIGraphicsGetCurrentcontext();

CGFloat arcStartAngle = M_PI;
CGFloat arcEndAngle = 2 * M_PI;

CGPoint startPoint = CGPointMake(...);
CGPoint endPoint = CGPointMake(...);

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

CGFloat colors[] =
{
    1.0, 0.0, 0.0, 1.0,   //RGBA values (so red to green in this case)
    0.0, 1.0, 0.0, 1.0    
};

CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, NULL, 2);
//Where the 2 is for the number of color components. You can have more colors throughout //your gradient by adding to the colors[] array, and changing the components value.

CGColorSpaceRelease(colorSpace);

//Now for the arc part...

CGMutablePathRef arc = CGPathCreateMutable();

CGPathMoveToPoint(arc, NULL, startPoint.x, startPoint.y);


//Here, the CGPoint self.arcCenter is the point around which the arc is placed, so maybe the
//middle of your view. self.radius is the distance between this center point and the arc.
CGPathAddArc(arc, NULL, self.arcCenter.x, self.arcCenter.y, self.radius, 
             arcStartAngle, arcEndAngle, YES);


//This essentially draws along the path in an arc shape
CGPathRef strokedArc = CGPathCreateCopyByStrokingPath(arc, NULL, 5.0f, 
                                                      kCGLineCapButt, kCGLineJoinMiter, 10);


CGContextSaveGState(context);

CGContextAddPath(context, strokedArc);
CGContextClip(context);

CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);

CGContextDrawPath(context, kCGPathFillStroke);

CGGradientRelease(gradient);
CGContextRestoreGState(context);

//This all draws a gradient that is much larger than the arc itself, but using
//CGContextClip, it clips out everything EXCEPT the colors in the arc. Saving and Restoring
//the state allows you to preserve any other drawing going on. If you didn't use these,
//then all other drawing would also be clipped.

I hope this helps. If any of this is unclear, I recommend you check out the question link above. The answer to that questions contains everything I used in this answer and a few more cool and useful drawing tips.

我希望这有帮助。如果其中任何一项不清楚,我建议您查看上面的问题链接。这些问题的答案包含了我在这个答案中使用的所有内容以及一些更酷和有用的绘图技巧。

#2

-1

You could do it by using CGContextDrawRadialGradient() with a clipping path applied. You could do something like this:

您可以使用CGContextDrawRadialGradient()并应用剪切路径来完成此操作。你可以这样做:

CGContextBeginPath(context);
CGContextMoveToPoint(context, startX, startY);
CGContextAddArcToPoint(context, x1, y1, x2, y2, arcRadius);
CGConextClosePath(context);
CGContextClip(context);
CGContextDrawRadialGradient(context, gradient, startCenter, startRadius, endCenter, endRadius, options);

#1