Question

While drawing rectangles in a UIView for ios I keep having the same issue: the rectangle margins blend their color with the background. I tried several rectangle drawing methods with the same results — using a bezier path, drawing line by line, drawing the margins and filling up the insides of the rectangle.

The view’s frame’s themselves are always correctly draw. I’ve even considered using views whenever I need a rectangle, but that doesn’t seem like the correct way to do things specially because I need to draw many of them.

Here is an example of my problem. For comparison, I’m drawing a rectangular green view with the same dimensions:

CGRect horizontalBar = CGRectMake(2, 2, 10, 6);

UIView* horizontalBarSubView = [[UIView alloc] initWithFrame:horizontalBar];
horizontalBarSubView.backgroundColor = [UIColor greenColor];
[self addSubview:horizontalBarSubView];
[horizontalBarSubView release];

And for the rectangle itself:

CGRect horizontalBar = CGRectMake(2, 20, 10, 6);

UIBezierPath* horizontalBarPath = [UIBezierPath bezierPathWithRect:horizontalBar];
[[UIColor greenColor] set];
[horizontalBarPath fill];

This wields the following result (10x zoom):

What is causing the colors to blend?

How can I avoid this?

Answer 1

@Almo is correct that your problem is antialiasing, but are you sure this is the actual code and values? This shouldn’t anti-alias, and my tests show it doesn’t. To get your result, I have to change your path to this:

CGRect horizontalBar = CGRectMake(2.5, 20.5, 10, 6);

Filling to a path on a fractional pixel will give you the effect you’re seeing. Also, stroking a path on integral pixels with an odd width will anti-alias this way. (All on a non-Retina display; Retina is slightly different.)

I do not generally recommend turning off anti-aliasing as @Almo suggests. Instead, you just need to make sure your paths draw or fill whole pixels.

This is covered in more detail in Chapter 6 of iOS 5 Programming Pushing the Limits, page 114.