1

我想做这样的事情：

圆形进度条渐变

我试图用这样的核心图形来制作它：

    float radius = CGRectGetWidth(rect)/2.0f - self.circleBorderWidth/2.0f;
float angleOffset = 0;

UIBezierPath *aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect))
                                                     radius:radius
                                                 startAngle:-angleOffset
                                                   endAngle:(mCircleSegs + 1)/(float)kCircleSegs*M_PI*2 - angleOffset
                                                  clockwise:YES];

CGPathRef shape = CGPathCreateCopyByStrokingPath(aPath.CGPath, NULL, 3, kCGLineCapSquare, kCGLineJoinMiter, 1.0f);

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddPath(ctx, shape);
CGContextClip(ctx);

AngleGradientLayer *angle = [[AngleGradientLayer alloc] init];
angle.colors = [NSArray arrayWithObjects:
                (id)[UIColor colorWithRed:0 green:0 blue:0 alpha:1].CGColor,
                (id)[UIColor colorWithRed:1 green:1 blue:1 alpha:1].CGColor,
                nil];


CGContextClipToRect(ctx, self.bounds);
[angle drawInContext:ctx];

[angle release];

但我认为我在这里走错了路。它看起来不像示例。CoreGraphics 能画出这样的东西吗？如何？

4

1 回答 1

4

您用作剪辑的贝塞尔路径似乎只是圆的一小部分，而在您显示的图像中，路径更复杂：圆的 2 个部分，由 2 条线连接，整个路径有一个“环”形状。

这种方法应该可行，我将它用于具有相同外观的计时器。虽然我没有直接使用AngleGradientLayer，但我修改了它的- (CGImageRef)newImageGradientInRect:(CGRect)rect方法，返回一个 UIImage。但是我不得不将这个图像旋转 + PI/2，因为巴甫洛夫渐变角度渐变是水平开始的。

我使用 UIImage，因为它是一个不会改变的背景，所以我在我的图层中保存了这个 UIImage 的一个实例，并在我更新剪切路径时绘制它

- (void)drawInContext:(CGContextRef)ctx
{

    UIBezierPath *currentPath = [self timerPath];
   // other drawing code for glow (shadow) and white stroke)
    CGContextAddPath(ctx, currentPath.CGPath);
    // clip !
    CGContextClip(ctx);
    CGContextDrawImage(ctx, self.bounds, _circularGradientImage.CGImage);

    //_circularGradientImage from modified newImageGradientInRect method.

}

这是我得到的：

在此处输入图像描述

于 2013-02-17T18:05:29.607 回答