How to draw circles where ever someone taps your screen – iPhone, iPad, iOS

Here’s a quick example of how to detect where a user taps your screen, and then draw a circle at the point.

Step 1: Detect the touch event.

To detect touch events we are going to need our own UIView. We do all our work here and don’t need to touch the ViewController.

Drag out a generic UIView onto your ViewController.

Create a UIView subclass (i.e. MyView).

Associate the UIView with the subclass.

Then use this code to detect the touch event (you don’t need all this code, but I wanted you to see also how to detect double tap).

MyView.m

//---fired when the user finger(s) touches the screen---
-(void) touchesBegan: (NSSet *) touches withEvent: (UIEvent *) event
{
    //---get all touches on the screen---
    NSSet *allTouches = [event allTouches];

    //---compare the number of touches on the screen---
    switch ([allTouches count])
    {
        //---single touch---
        case 1: {
            
            //---get info of the touch---
            UITouch *touch = [[allTouches allObjects] objectAtIndex:0];
            CGPoint point = [touch locationInView:self];
            NSLog(@"x=%f", point.x);
            NSLog(@"y=%f", point.y);

            //---compare the touches---
            switch ([touch tapCount])
            {
                //---single tap---
                case 1: {
                    NSLog(@"Single tap");
                } break;
 
                //---double tap---
                case 2: {
                    NSLog(@"Double tap");

                } break;
                    
            }
            
        }  break;
    }
}

If you run this, you should now see output in the console showing you where you’ve tapped.

Step 2: Draw the circle.

To draw a circle we will create a property for the tap point (myPoint) and then trigger a redraw by calling setNeedsDisplay when the property value changes.

MyView.m

@interface MyView()
@property (nonatomic) CGPoint myPoint;
@end

@implementation MyView

@synthesize myPoint = _myPoint;

- (void)setMyPoint:(CGPoint)myPoint
{
    _myPoint = myPoint;
    [self setNeedsDisplay];
}

This is important because we never want to call drawRect directly (there’s stuff that needs to be coordinated and handled with a redraw and it’s better to let Cocoa handle this).

Then we just need to set our property when based on where they tapped.

...
NSLog(@"x=%f", point.x);
NSLog(@"y=%f", point.y);
self.myPoint = point;
...

Now all we need is a drawRect method to draw a circle at our point.

- (void)drawRect:(CGRect)rect
{
    CGContextRef contextRef = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(contextRef, 2.0);
    CGContextSetRGBFillColor(contextRef, 0, 0, 1.0, 1.0);
    CGContextSetRGBStrokeColor(contextRef, 0, 0, 1.0, 1.0);
    CGRect circlePoint = (CGRectMake(touchPos.x, touchPos.y, 10.0, 10.0));

    CGContextFillEllipseInRect(contextRef, circlePoint);
}

Run that – and voila. Lovely blue circles appearing where you user clicks.

Here is the code in it’s entirety (it’s just one class – MyView).

MyView.m

#import "MyView.h"

@interface MyView()
@property (nonatomic) CGPoint myPoint;
@end

@implementation MyView

@synthesize myPoint = _myPoint;

- (void)setMyPoint:(CGPoint)myPoint
{
    _myPoint = myPoint;
    [self setNeedsDisplay];
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

//---fired when the user finger(s) touches the screen---
-(void) touchesBegan: (NSSet *) touches withEvent: (UIEvent *) event
{
    //---get all touches on the screen---
    NSSet *allTouches = [event allTouches];
    
    //---compare the number of touches on the screen---
    switch ([allTouches count])
    {
            //---single touch---
        case 1: {
            
            //---get info of the touch---
            UITouch *touch = [[allTouches allObjects] objectAtIndex:0];
            CGPoint point = [touch locationInView:self];
            NSLog(@"x=%f", point.x);
            NSLog(@"y=%f", point.y);
            
            self.myPoint = point;
            
            //---compare the touches---
            switch ([touch tapCount])
            {
                    //---single tap---
                case 1: {
                    NSLog(@"Single tap");
                } break;
                    
                    //---double tap---
                case 2: {
                    NSLog(@"Double tap");
                    
                } break;
                    
            }
            
        }  break;
    }
}

- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(ctx, 2.0);
    CGContextSetRGBFillColor(ctx, 0, 0, 1.0, 1.0);
    CGContextSetRGBStrokeColor(ctx, 0, 0, 1.0, 1.0);
    CGRect circlePoint = CGRectMake(self.myPoint.x, self.myPoint.y, 50.0, 50.0);
    
    CGContextFillEllipseInRect(ctx, circlePoint);
}

@end

Advertisement