Overlapping and touching CoreGraphics rectangles have a .5px border

Question

My core graphics fills are acting strange when the get close together, touching or overlapping. This issue is on the iPhone Simulator and iPhone OS 2.2.

Here we have two labels and a custom view with two CGContextFillRect():

overlap problem

When the blue and red are brought together they develop this irritating .5px merging line. I can't seem to get rid of this, or even change its colour.

This version has a 1px gap between the rectangles and it is of course filled with the background black:

pixel gap

I've tried disabling anti-aliasing but that doesn't fix the issue.

- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetAllowsAntialiasing(context, false);

CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
CGContextFillRect(context, CGRectMake(20.0, 35.0 + 40 + 20 , 100, 40));

CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);
CGContextFillRect(context, CGRectMake(20.0 + 100 , 35.0 + 40 + 20 , 100, 40));

CGContextSetAllowsAntialiasing(context, true);

}

Any ideas?

Answer 1

There's no defect. It's an optical illusion. Your eye is integrating the R&B values close together and inferring the white overlap.

Have a look at the graphics with pixie (part of Xcode) or xscope (a paid upgrade from iconfactory).

http://www.freeimagehosting.net/uploads/th.e015daef50.png>