picknick
picknick

Reputation: 4007

How can I create a part of a filled circle using Core Graphics/Quartz

I have made a subclass of UIView and I am trying to draw part of a circle in my drawRect method.

I have tried using bezierPathWithArcCenter and filling it but that only result in a pie shape (image 3) and that's not what i'm after. I want to draw what you see in image 1 and 2.

Maybe I can clip a full circle somehow? The area around the circle needs to be transparent.

Circles

Upvotes: 3

Views: 1475

Answers (2)

picknick
picknick

Reputation: 4007

TompaLompas answer pointed me in the right direction (with the arc drawing part). However the complete solution and answer is like this:

#define   DEGREES_TO_RADIANS(degrees)  ((M_PI * degrees)/ 180)
- (void)drawRect:(CGRect)rect
{
    [super drawRect:rect];

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    int radius = self.frame.size.width / 2;
    CGPoint center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
//Image 2 
    CGContextSetFillColorWithColor(ctx, [UIColor redColor].CGColor);
    CGContextAddArc(ctx, center.x, center.y, radius, DEGREES_TO_RADIANS(225), DEGREES_TO_RADIANS(315), NO);
    CGContextDrawPath(ctx, kCGPathFill);
}

Upvotes: 3

TompaLompa
TompaLompa

Reputation: 949

try overriding drawRect with this:

- (void)drawRect:(CGRect)rect
{
    [super drawRect:rect];
    CGContextRef context = UIGraphicsGetCurrentContext();
    float radius = 50.0f;
    float x_left = rect.origin.x;
    float x_left_center = x_left + radius;
    float y_top = rect.origin.y;
    float y_top_center = y_top + radius;
    /* Begin path */
    CGFloat white[4] = {0.0f, 204.0f/255.0f, 1.0f, 0.8f};
    CGContextSetFillColor(context, white);
    CGContextSetLineWidth(context, 1.0);
    CGContextBeginPath(context);
    CGContextMoveToPoint(context, x_left, y_top_center);
    CGContextAddArcToPoint(context, x_left, y_top, x_left_center, y_top, radius);
    CGContextAddLineToPoint(context,x_left, y_top + radius);

    CGContextFillPath(context);
}

It will draw a rotated image number 2

Upvotes: 2

Related Questions