How can I draw one circle around each touch location on a device?

Question

New programmer here trying to take things step by step. I am trying to find a way to draw a circle around each currently touched location on a device. Two fingers on the screen, one circle under each finger.

I currently have the working code to draw a circle at one touch location, but once I lay another finger on the screen, the circle moves to that second touch location, leaving the first touch location empty. and when I add a third, it moves there etc.

Ideally I would like to be able to have up to 5 active circle on the screen, one for each finger.

Here is my current code.

@interface TapView ()
@property (nonatomic) BOOL touched;
@property (nonatomic) CGPoint firstTouch;
@property (nonatomic) CGPoint secondTouch;
@property (nonatomic) int tapCount;
@end

@implementation TapView

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesBegan:touches withEvent:event];

NSArray *twoTouch = [touches allObjects];
    if(touches.count == 1)
    {
        self.tapCount = 1;
        UITouch *tOne = [twoTouch objectAtIndex:0];
        self.firstTouch = [tOne locationInView:[tOne view]];
        self.touched = YES;
        [self setNeedsDisplay];
    }
    if(touches.count > 1 && touches.count < 3)
    {
        self.tapCount = 2;
        UITouch *tTwo = [twoTouch objectAtIndex:1];
        self.secondTouch = [tTwo locationInView:[tTwo view]];
        [self setNeedsDisplay];
    } 
}
-(void)drawRect:(CGRect)rect
{
        if(self.touched && self.tapCount == 1)
        {
            [self drawTouchCircle:self.firstTouch :self.secondTouch];
        }
}
-(void)drawTouchCircle:(CGPoint)firstTouch :(CGPoint)secondTouch
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextSetRGBStrokeColor(ctx,0.1,0.1,0.1,1.0);
    CGContextSetLineWidth(ctx,10);
    CGContextAddArc(ctx,self.firstTouch.x,self.firstTouch.y,30,0.0,M_PI*2,YES);
    CGContextStrokePath(ctx);
}

I do have setMultipleTouchEnabled:YES declared in my didFinishLaunchingWithOptions method in the appDelegate.m.

I have attempted to use an if statement in the drawTouchCircle method that changes the self.firstTouch.x to self.secondTouch.x based on a self.tapCount but that seems to break the whole thing, leaving me with no circles at any touch locations.

I'm having an immensely hard time trying to find my issue, and I am aware that it might be something quite simple.

Answer 1

I just wrote some code that seems to work. I've added an NSMutableArray property called circles to the view, which contains a UIBezierPath for each circle. In -awakeFromNib I setup the array and set self.multipleTouchEnabled = YES - (I think you did this using a reference to the view in your appDelegate.m).

In the view I call this method in the -touchesBegan and -touchesMoved methods.

-(void)setCircles:(NSSet*)touches
{   
    [_circles removeAllObjects]; //clear circles from previous touch

    for(UITouch *t in touches)
    {
        CGPoint pt= [t locationInView:self];
        CGFloat circSize = 200; //or whatever you need
        pt = CGPointMake(pt.x - circSize/2.0, pt.y - circSize/2.0);
        CGRect circOutline = CGRectMake(pt.x, pt.y, circSize, circSize);
        UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:circOutline];
        [_circles addObject:circle];
    }
    [self setNeedsDisplay];
}

Touches ended is:

-(void)touchesEnded:(NSSet*)touches withEvent:(UIEvent*)event
{ 
    [_circles removeAllObjects];
    [self setNeedsDisplay];

}

Then I loop over circles in -drawRect and call [circle stroke] on each one