Question

I want to make my app to draw a circle centered at the touch coordinates.

Here’s the code I have right now, it is messed up for sure, I haven’t had any practice with drawing things and working with context. What am I missing here? Thanks in advance.

View controller is a subclass of UIViewController

@implementation ViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
    // Custom initialization
}
return self;
}

- (void)viewDidLoad
{
[super viewDidLoad];
}

- (void)viewDidUnload
{
[super viewDidUnload];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *theTouch = [touches anyObject];

[self doSomething];

//[self.view setNeedsDisplay];

}

- (void) drawCircleAtPoint:(CGPoint)point withRadius:(CGFloat)radius inContext:(CGContextRef)context{
UIGraphicsPushContext(context);
CGContextBeginPath(context);
CGContextAddArc(context, point.x, point.y, radius, 0, 2*M_PI, YES);
CGContextFillPath(context);
UIGraphicsPopContext();
}

- (void)drawRect:(CGRect)rect
{
CGPoint point;
CGContextRef context = UIGraphicsGetCurrentContext();
point.x = self.view.bounds.origin.x + self.view.bounds.size.width/2;
point.y = self.view.bounds.origin.y + self.view.bounds.size.height/2;
CGContextSetLineWidth(context, 5.0);
[[UIColor whiteColor] setFill];
[self drawCircleAtPoint:point withRadius:50 inContext:context];

}

@end

Here I wanted it to draw the circle at least on the center of the screen, but I can’t do even this.

Answer 1

drawRect is a method of UIView class.
It won’t be available in a ViewController and hence wont be called.

ideally what you should do is to place the drawRect and drawCircleAtPoint in a UIView subclass.
Also add the touches Methods in that view class.
You can call it, DrawCircleView or something.

Now create an object of this custom view and add it as a subview to your viewcontroller’s view in viewDidLoad.

call setNeedsDisplay in the touches method and store the point of touvh in a CGPoint instance variable and access it in drawRect.

UPDATE

You may want to save the previously drawn circles.

There are many possibilities, choose whatever suits you the best , I have not given you detailed explanation on each but enough info to get you going.

• If you want circles to be editable then you will have to continue adding the circle info regarding the center and radius as one object in an NSMutableArray.
  and in the beginning of your drawRect you will have to redraw all of them in a loop.

  Infact I would suggest you to use CGPath and keep adding circles to that path and add the path to cgcontext in drawRect keep CGPath as an instance var so that it retains previous information from last drawRect call.
  But again If you want to be able to have circles drawn with different color then they will have to be in different CGPaths
  then you can add these CGPath with color info in an object into an mutable Array again.

OR

• saving and redrawing all those circles will hinder the performance if the array keeps growing. If you dont want undo capabilities or you dont want to edit previous circles.
  Then you can save whatever is drawn in the end of drawRect as imageData and then keep it as an instance var and redraw it every-time drawRect is called and then draw a circle on top of it and save image again into the same instance.

For example: at the end of drawRect you can save image of your screen into instance-variable
_savedImage.

  _savedImage = UIGraphicsGetImageFromCurrentImageContext(); 

and while redrawing in the beginning of drawRect,if _savedImage is not nil then,

 [_savedImage drawInRect:rect];

then you can draw the circle around the point you tapped on.
Also If you want then you can save the drawing into actual image file anytime you want with:

 NSData *imageData = UIImagePNGRepresentation(_savedImage);
[imageData writeToFile:@"imageName.png"];

OR

• If you want you can explore CGContextSaveGState() and CGContextRestoreGState()
  They are used to push and pop context to stack respectively.
  So you can get last context and redraw it and in between restoring and saving you can draw your circle. Checkout this stackOverflow post on the same: Saving and restoring CGContext