iPhone - trying to create hairlines in quartz

Question

I have this picture, represented in red on the following image. I am trying to create this "hairlines" on the corners of the picture. When printed, the lines are intended to have 1 point of width and 15 points of length.

this is the code I am using...

1) the first thing I do is to create a context that is 60 points larger horizontally and vertically, so I can draw the black lines.

CGFloat newWidth = 60.0f + redImage.size.width;
CGFloat newHeight = 60.0f + redImage.size.height;

UIGraphicsBeginImageContextWithOptions(CGSizeMake( newWidth, newHeight),
                                       YES,
                                       [redImage scale]);

Then, I define the lines start...

NSArray *startOfPoints = [NSArray arrayWithObjects:
                   [NSValue valueWithCGPoint:CGPointMake(15, 0)],
                   [NSValue valueWithCGPoint:CGPointMake(15 + redImage.size.width, 0.0f)],
                   [NSValue valueWithCGPoint:CGPointMake(15, 15 + redImage.size.height)],
                   [NSValue valueWithCGPoint:CGPointMake(15 + redImage.size.width, 15 + redImage.size.height)],
                   [NSValue valueWithCGPoint:CGPointMake(0, 15)],
                   [NSValue valueWithCGPoint:CGPointMake(15 + redImage.size.width,15)],
                   [NSValue valueWithCGPoint:CGPointMake(0, 15 + redImage.size.height)],
                   [NSValue valueWithCGPoint:CGPointMake(15 + redImage.size.width, 
                                                         15 + redImage.size.height)],
                   nil];

// these points define, in order, the start of each of the four vertical line and the start of each of the horizontal lines

Then, I draw the lines

    CGContextRef c = UIGraphicsGetCurrentContext();

// go to the beginning of each vertical line and draw the line down
    for (int i=0; i<4; i++) {
        CGPoint aPoint = [[startOfPoints objectAtIndex:i] CGPointValue];
        CGContextBeginPath(c);
        CGContextSetStrokeColorWithColor(c, [UIColor blackColor].CGColor);
        CGContextSetLineWidth(c, 1.0f);
        CGContextMoveToPoint(c, aPoint.x, aPoint.y);
        CGContextAddLineToPoint(c, aPoint.x, aPoint.y + 15.0f);
        CGContextStrokePath(c);
    }

// go to the beginning of each horizontal line and draw the line right
    for (int i=5; i<9; i++) {
        CGPoint aPoint = [[startOfPoints objectAtIndex:i] CGPointValue];
        CGContextBeginPath(c);
        CGContextSetStrokeColorWithColor(c, [UIColor blackColor].CGColor);
        CGContextSetLineWidth(c, 1.0f);
        CGContextMoveToPoint(c, aPoint.x, aPoint.y);
        CGContextAddLineToPoint(c, aPoint.x + 15.0f, aPoint.y );
        CGContextStrokePath(c);
    }

but I end with a huge black square...

what am I missing?

NOTE: this code doesn't show the red image being drawn, this because I want to get the lines right. I am obtaining a huge black square, instead of the lines. The huge square has the size of the context and is the same I would obtain if I simply create the context and fill it with black... :(

Answer 1

When you create a bitmap graphics context using UIGraphicsBeginImageContextWithOptions, every pixel in the bitmap is initialized to all zeros, which is black (if you set opaque to YES, which you did) or transparent (if you set opaque to NO).

You can fill the bitmap with white before drawing anything else by doing this right after UIGraphicsBeginImageContextWithOptions returns:

[[UIColor whiteColor] setFill];
UIRectFill(CGRectMake(0, 0, newWidth, newHeight));