Saving CGContextRef

Question

I have a drawing app in which I would like to create an undo method. The drawing takes place inside the TouchesMoved: method.

I am trying to create a CGContextRef and push it to the stack OR save it in a context property that can be restored later but am not having any luck. Any advice would be great. Here is what I have ...

UIImageView      *drawingSurface;
CGContextRef       undoContext;


- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
 UIGraphicsBeginImageContext(self.view.frame.size);
 CGContextRef context = UIGraphicsGetCurrentContext();
 [drawingSurface.image drawInRect:CGRectMake(0, 0, drawingSurface.image.size.width, drawingSurface.image.size.height)]; 
 UIGraphicsPushContext(context);

        // also tried but cant figure how to restore it
        undoContext = context;

 UIGraphicsEndImageContext();
}

Then I have a method triggered by my undo button ...

- (IBAction)restoreUndoImage {
 UIGraphicsBeginImageContext(self.view.frame.size);
 UIGraphicsPopContext();
 drawingSurface.image = UIGraphicsGetImageFromCurrentImageContext();
 UIGraphicsEndImageContext();
}

When I run this, I believe my drawingSurface is being assigned nil because it just erases everything in the image.

My guess is I can't use pop and push this way. But I can't seem to figure out how to just save the context and then push it back onto the drawingSurface. Hmmmm. Any help would be ... well ... helpfull. Thanks in advance -

And, just for reference, here is what I am doing to draw to the screen, which is working great. This is inside my TouchesMoved:

 UIGraphicsBeginImageContext(self.view.frame.size);
 CGContextRef context = UIGraphicsGetCurrentContext();
 [drawingSurface.image drawInRect:CGRectMake(0, 0, drawingSurface.image.size.width, drawingSurface.image.size.height)]; 

 CGContextSetLineCap(context, kCGLineCapRound); //kCGLineCapSquare, kCGLineCapButt, kCGLineCapRound
 CGContextSetLineWidth(context, self.brush.size); // for size

 CGContextSetStrokeColorWithColor (context,[currentColor CGColor]);

 CGContextBeginPath(context);
 CGContextMoveToPoint(context, lastPoint.x, lastPoint.y);
 CGContextAddLineToPoint(context, currentPoint.x, currentPoint.y);
 CGContextStrokePath(context);
 drawingSurface.image = UIGraphicsGetImageFromCurrentImageContext();
 UIGraphicsEndImageContext();

Answer 1

I think you're approaching the problem the wrong way and confusing contexts.

In an immediate mode API you save the 'state' of objects with push/pop, not the graphical representation. The state consists of things like line widths, colours and positions. The graphical representation is the result of a paint operation (a bitmap) and generally something you don't want to save.

Instead try to save 'information' you use to create the drawing.

My initial suggestion would be to decouple your shape creation and painting. On OSX you can use NSBezierPath, but for iOS we have to use an array of points.

For example given this protocol:

// ViewController.h
@protocol DrawSourceProtocol <NSObject>
- (NSArray*)pathsToDraw;
@end

@interface ViewController : UIViewController<DrawSourceProtocol>
@end

You can implement these functions:

// ViewController.m
@interface ViewController () {
  NSMutableArray *currentPath;  
  NSMutableArray *allPaths;
  MyView *view_;
}
@end

...

- (void)viewDidLoad {
  [super viewDidLoad];
  currentPath = [[NSMutableArray alloc] init];
  allPaths = [[NSMutableArray alloc] init];    
  view_ = (MyView*)self.view;
  view_.delegate = self;
}

- (NSArray*)pathsToDraw {  
  // Return the currently draw path too
  if (currentPath && currentPath.count) {
    NSMutableArray *allPathsPlusCurrent = [[NSMutableArray alloc] initWithArray:allPaths];
    [allPathsPlusCurrent addObject:currentPath];
    return allPathsPlusCurrent;
  }  
  return allPaths;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
  currentPath = [[NSMutableArray alloc] init];
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
  // When a touch ends, save the current path
  [allPaths addObject:currentPath];
  currentPath = [[NSMutableArray alloc] init];
  [view_ setNeedsDisplay];    
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
  UITouch *touch = [touches anyObject];   
  CGPoint currentPoint = [touch locationInView:self.view];

  // We store the point with the help of NSValue
  [currentPath addObject:[NSValue valueWithCGPoint:currentPoint]];  

  // Update the view
  [view_ setNeedsDisplay];  
}

Now subclass your view (I call mine MyView here) and implement something like this:

// MyView.h
#import "ViewController.h"

@protocol DrawSourceProtocol;

@interface MyView : UIView {
   __weak id<DrawSourceProtocol> delegate_; 
}
@property (weak) id<DrawSourceProtocol> delegate;
@end

// MyView.m

@synthesize delegate = delegate_;

...

- (void)drawRect:(CGRect)rect { 
  NSLog(@"Drawing!");

  // Setup a context
  CGContextRef context = UIGraphicsGetCurrentContext();   
  CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
  CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
  CGContextSetLineWidth(context, 2.0);

  // Get the paths
  NSArray *paths = [delegate_ pathsToDraw];

  for (NSArray *aPath in paths) {
    BOOL firstPoint = TRUE;
    for (NSValue *pointValue in aPath) {
      CGPoint point = [pointValue CGPointValue];

      // Always move to the first point
      if (firstPoint) {
        CGContextMoveToPoint(context, point.x, point.y);
        firstPoint = FALSE;
        continue;
      }

      // Draw a point
      CGContextAddLineToPoint(context, point.x, point.y);
    }
  }

  // Stroke!
  CGContextStrokePath(context);
}

The only cavet here is that setNeedsDisplay isn't very performant. It's better to use setNeedsDisplayInRect:, see my last post regarding an efficient way of determining the 'drawn' rect.

As for undo? Your undo operation is merely popping the last object from the allPaths array. This exercise I'll leave you to :)

Hope this helps!