Question

Below is a flag that I would like to draw in core graphic.

What I do is :

Flag.m
- (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetLineWidth(context, 1.0);

    CGContextMoveToPoint    (context, 20, 10);
    CGContextAddLineToPoint (context, 50, 10);
    CGContextAddLineToPoint (context, 50, 90);
    CGContextAddLineToPoint (context, 45, 90);
    CGContextAddLineToPoint (context, 45, 95);
    CGContextAddLineToPoint (context, 40, 92);
    CGContextAddLineToPoint (context, 35, 90);
    CGContextAddLineToPoint (context, 30, 92);  
    CGContextAddLineToPoint (context, 25, 95);
    CGContextAddLineToPoint (context, 25, 90); 
    CGContextAddLineToPoint (context, 20, 90);  
    CGContextAddLineToPoint (context, 20, 10);    

    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
    CGContextFillPath(context);

}

What I am ending up is below

My question :

How can I add the shadow so that my flag seems to be folded and curled at its tails (like the red flag above)

Answer 1

This is a relatively simplified version. I commented out a few of the points to build it in two parts. The tail part is drawn first. Then, the main ribbon is drawn above. A nice shadow effect can be drawn with a [UIColor colorWithWhite:0.0 alpha:0.4]

If you want to get a bit fancier, you would draw the bottom few points of the main area as another rectangle with a gradient. Make sure to turn the shadow off before drawing that last rect.

/*CGContextMoveToPoint    (context, 20, 10);
CGContextAddLineToPoint (context, 50, 10);*/
CGContextMoveToPoint    (context, 48, 85);
CGContextAddLineToPoint (context, 48, 90);
CGContextAddLineToPoint (context, 45, 90);
CGContextAddLineToPoint (context, 45, 95);
CGContextAddLineToPoint (context, 40, 92);
CGContextAddLineToPoint (context, 35, 90);
CGContextAddLineToPoint (context, 30, 92);
CGContextAddLineToPoint (context, 25, 95);
CGContextAddLineToPoint (context, 25, 90);
CGContextAddLineToPoint (context, 22, 90);
CGContextAddLineToPoint (context, 22, 85);
//CGContextAddLineToPoint (context, 20, 10);
CGContextSetShadowWithColor(context, CGSizeMake(0, 5.), 3., [UIColor colorWithWhite:0 alpha:.4].CGColor);
CGContextSetFillColorWithColor(context, [UIColor colorWithWhite:.95 alpha:1].CGColor);
CGContextFillPath(context);
CGContextSetShadowWithColor(context, CGSizeMake(0, 2.), 1.5, [UIColor colorWithWhite:0 alpha:.3].CGColor);
CGContextMoveToPoint    (context, 20, 88);
CGContextAddLineToPoint (context, 20, 10);
CGContextAddLineToPoint (context, 50, 10);
CGContextAddLineToPoint (context, 50, 88);
CGContextFillPath(context);