ios - Rectangles with borders overlapping

Question

I have a strange problem when I try to draw rectangles which overlap one another. See the image below:

As you can see, the top line is ticker than others (bottom and vertical ones), in particular ticker than the line separating the rectangles. I used the following code:

for (int i = 0; i < 7; i++)
{

    (...)
    CGContextBeginPath(context);
    CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
    CGContextSetLineWidth(context, self.cellBorder);
    CGRect dayRect;
    if (i > 0)
        dayRect   = CGRectMake(i*cellWidth+self.marginX - 1, 0, cellWidth, cellHeight);
    else
        dayRect   = CGRectMake(i*cellWidth+self.marginX , 0, cellWidth, cellHeight);
    CGContextStrokeRect(context, dayRect);

}

Any suggestion?

Answer 1

The reason the top line is thinner than the other ones is that you have a self.cellBorder line thickness that is greater than 0 and you are drawing that on a line where y = 0. When you do this, you will only see half of the line's thickness since the other half is above the drawing rect. To fix this, you simply need to draw your top lines at the y-position self.cellBorder / 2. Here's how the code would change:

for (int i = 0; i < 7; i++) {
    // ...
    CGContextBeginPath(context);
    CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
    CGContextSetLineWidth(context, self.cellBorder);
    CGRect dayRect;
    if (i > 0)
        dayRect = CGRectMake(i*cellWidth+self.marginX - 1, self.cellBorder / 2, cellWidth, cellHeight);
    else
        dayRect = CGRectMake(i*cellWidth+self.marginX , self.cellBorder / 2, cellWidth, cellHeight);
    CGContextStrokeRect(context, dayRect);
}