Drawing arc and rectangle in CALayer in Objective-C

Question

I am having a issue to present to user an arc and then rectangle in the same CALayer. I success to draw both but only is displayed the rectangle when the arc is a the same or draw above of rect coords.

Any idea what I missing?

-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)p_contex
{
    CGMutablePathRef thePath = CGPathCreateMutable();
    CGPathMoveToPoint(thePath,NULL,mReference.x,mReference.y);
    CGPathAddArc(thePath,NULL,
                 mReference.x, mReference.y,
                 S_RADIO, lStartAngle, lStopAngle ,
                 0); 
    CGPathCloseSubpath(thePath);

    CGContextSetRGBFillColor(p_contex, lRed,lGreen,lBlue,lAlpha);
    CGContextSetRGBStrokeColor(p_contex, lRed,lGreen,lBlue,lAlpha);
    CGContextAddPath(p_contex, thePath );

    CGContextSaveGState(p_contex);
    CGContextClip(p_contex);
    CGContextDrawRadialGradient(p_contex, 
                                [self buildGradientColor], 
                                mReference , 5, mReference, S_RADIO, 0);

    CGContextSaveGState(p_contex);

    // release the path
    CFRelease(thePath);
    CGGradientRelease(mGradient);


    CGMutablePathRef retPath = CGPathCreateMutable();
    CGRect rect = CGRectMake(0,300, 200, 40);
    float radius = 10;
    CGRect innerRect = CGRectInset(rect, radius, radius);

    CGFloat inside_right = innerRect.origin.x + innerRect.size.width;
    CGFloat outside_right = rect.origin.x + rect.size.width;
    CGFloat inside_bottom = innerRect.origin.y + innerRect.size.height;
    CGFloat outside_bottom = rect.origin.y + rect.size.height;

    CGFloat inside_top = innerRect.origin.y;
    CGFloat outside_top = rect.origin.y;
    CGFloat outside_left = rect.origin.x;

    CGPathMoveToPoint(retPath, NULL, innerRect.origin.x, outside_top);

    CGPathAddLineToPoint(retPath, NULL, inside_right, outside_top);
    CGPathAddArcToPoint(retPath, NULL, outside_right, outside_top, outside_right, inside_top, radius);
    CGPathAddLineToPoint(retPath, NULL, outside_right, inside_bottom);
    CGPathAddArcToPoint(retPath, NULL,  outside_right, outside_bottom, inside_right, outside_bottom, radius);

    CGPathAddLineToPoint(retPath, NULL, innerRect.origin.x, outside_bottom);
    CGPathAddArcToPoint(retPath, NULL,  outside_left, outside_bottom, outside_left, inside_bottom, radius);
    CGPathAddLineToPoint(retPath, NULL, outside_left, inside_top);
    CGPathAddArcToPoint(retPath, NULL,  outside_left, outside_top, innerRect.origin.x, outside_top, radius);

    CGPathCloseSubpath(retPath);


    CGContextAddPath(p_contex, retPath );
    CGContextFillPath(p_contex); 
   }

Answer 1

The problem here is that you are drawing an arc then a filled rectagle so the arc is getting drawn behind this filled rectangle

A quick fix is to move the drawing of the arc after the drawing of the rectangle Move the drawing of the Arc after the drawing of the rectangle