Objective-C绘制一个圆形的圆形

时间:2012-06-30 01:54:41

标签: objective-c drawing quartz-2d geometry

我写了这个用圆圈绘制动画进度的类(它根据浮动进度绘制一个循环扇区)

@implementation MXMProgressView

@synthesize progress;

- (id)initWithDefaultSize {
    int circleOffset = 45.0f;
    self = [super initWithFrame:CGRectMake(0.0f,
                                           0.0f,
                                           135.0f + circleOffset,
                                           135.0f + circleOffset)];
    self.backgroundColor = [UIColor clearColor];
    return self;
}

- (void)drawRect:(CGRect)rect {

    CGRect allRect = self.bounds;
    CGRect circleRect = CGRectMake(allRect.origin.x + 2, allRect.origin.y + 2, allRect.size.width - 4,
                                   allRect.size.height - 4);

    CGContextRef context = UIGraphicsGetCurrentContext();

    // background image
    //UIImage *image = [UIImage imageNamed:@"loader_disc_hover.png"]; 
    //[image drawInRect:circleRect];

    // Orange: E27006
    CGContextSetRGBFillColor(context, 
                             ((CGFloat)0xE2/(CGFloat)0xFF),
                             ((CGFloat)0x70/(CGFloat)0xFF),
                             ((CGFloat)0x06/(CGFloat)0xFF),
                             0.01f); // fill

    //CGContextSetLineWidth(context, 2.0);
    CGContextFillEllipseInRect(context, circleRect);
    //CGContextStrokeEllipseInRect(context, circleRect);

    // Draw progress
    float x = (allRect.size.width / 2);
    float y = (allRect.size.height / 2);

    // Orange: E27006
    CGContextSetRGBFillColor(context, 
                             ((CGFloat)0xE2/(CGFloat)0xFF),
                             ((CGFloat)0x70/(CGFloat)0xFF),
                             ((CGFloat)0x06/(CGFloat)0xFF),
                             1.0f); // progress

    CGContextMoveToPoint(context, x, y);
    CGContextAddArc(context, x, y, (allRect.size.width - 4) / 2, -M_PI_2, (self.progress * 2 * M_PI) - M_PI_2, 0);
    CGContextClosePath(context);
    CGContextFillPath(context);
}

@end

现在我要做什么我用相同的进度动画绘制一个环形状,而不是填满整圆,所以圆形扇区再次不是从圆心开始。

我尝试使用CGContextAddEllipseInRectCGContextEOFillPath(context);

没有成功。

2 个答案:

答案 0 :(得分:1)

我认为你需要构建一个更复杂的路径,例如:

// Move to start point of outer arc  (which might not be required)
CGContextMoveToPoint(context, x+outerRadius*cos(startAngle), y+outerRadius*sin(startAngle));
// Add outer arc to path (counterclockwise)
CGContextAddArc(context, x, y, outerRadius, startAngle, endAngle, 0);
// move *inward* to start point of inner arc
CGContextMoveToPoint(context, x+innerRadius*cos(endAngle), y+innerRadius*sin(endAngle));
// Add inner arc to path (clockwise)
CGContextAddArc(context, x, y, innerRadius, endAngle, StartAngle, 1);
// Close the path from end of inner arc to start of outer arc
CGContextClosePath(context);

注意:我自己没有尝试过上面的代码

答案 1 :(得分:1)

廉价而讨厌的解决方案:

  • 绘制一个小于原始圆的实心圆,表示您想要绘制的圆的厚度。
  • 在原始圆圈的顶部绘制此圆圈,您将看到的所有动画都是圆环。