Understanding the Issue with CGContextRef and Drawing Rectangles in iOS

In our quest for creating interactive user interfaces, we often encounter situations where we need to draw shapes or lines on the screen. In this case, we’re dealing with a specific issue involving CGContextRef and drawing rectangles in iOS.

The problem arises when we try to erase a previously drawn rectangle by modifying the array of points that were used to draw it. Instead of successfully removing the old rectangle, the drawing appears to ignore the changes made to the array, resulting in unexpected behavior.

Background Information

Before diving into the solution, let’s briefly discuss some background information on how graphics work in iOS using Quartz.

Quartz is a 2D graphics framework that allows us to render graphical elements on the screen. When we call drawRect:, it determines which part of the view needs to be redrawn and uses the current graphics context to do so. The graphics context is essentially a representation of the current state of the drawing, including any transformations applied, colors used, and paths defined.

In our case, we’re using CGContextRef to manipulate this graphics context and draw rectangles on the screen.

The Problem with Not Clearing Previous Content

The issue at hand arises because we’re not explicitly clearing the previous content before drawing new shapes. When we call drawRect:, it simply draws over any existing content, including previously drawn rectangles. This can lead to unexpected behavior when trying to erase old rectangles.

Let’s take a closer look at how this works:

[[UIColor whiteColor] setFill]; // Set the fill color to white
UIRectFill([self bounds]); // Fill the view with white

// Later on...

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(context, x, y);
CGContextAddLineToPoint(context, x+scale, y);
CGContextAddLineToPoint(context, x+scale, y+scale);
CGContextAddLineToPoint(context, x, y+scale);
CGContextAddLineToPoint(context, x, y);

// ... (rest of the drawing code)

As you can see, we’ve explicitly cleared the view by filling it with white before drawing new shapes. This ensures that any existing content is removed and replaced with the new drawing.

The Solution

So, how do we fix the issue in our original code? Here’s the modified drawRect: method:

- (void)drawRect:(CGRect)rect {
    [[UIColor whiteColor] setFill]; // Clear the view by filling it with white
    
    // Save the graphics context so we can restore its state later
    CGContextSaveGState(context);
    
    NSLog(@"drawrect current array %@", pointArray);
    for (NSValue *pointValue in pointArray){
        CGPoint point = [pointValue CGPointValue];
        [self drawSquareAt:point];
    }
    
    // Restore the graphics context to its previous state
    CGContextRestoreGState(context);
}

By adding these two lines, we save the graphics context before drawing and restore it later. This ensures that any transformations applied during the drawing process are preserved, which is essential for correctly erasing previously drawn rectangles.

Additional Considerations

As a side note, you should also consider using clearsContextBeforeDrawing:YES on your UIView. This property tells Quartz to clear the graphics context before drawing new shapes, which can help improve performance and reduce flicker in complex graphics.

myView.clearsContextBeforeDrawing = YES;

Conclusion

In conclusion, the issue with CGContextRef and drawing rectangles in iOS arises from not explicitly clearing previous content. By understanding how graphics work in Quartz and using the right techniques to clear and restore the graphics context, we can fix this problem and ensure that our drawings appear as expected.

Remember to always follow best practices when working with graphics in iOS, such as saving and restoring the graphics context, and consider using clearsContextBeforeDrawing:YES on your views to improve performance.

Last modified on 2025-03-19