Drawing a small square on a zoomable UIImageView each time the User Taps the image. and scaling the squares

Question

I have a UIImageView that contains an image. In this case the image is of bacteria cells. I would like to modify the app so that each time the user taps on the imageView a small colored square is drawn in the UIImageView. In order to count the cells. In addition I would like the imageView to be zoomable with pinch gestures. So far I have been able to place a UIImageView within a UIScrollView in order to allow for the zooming, but I am not sure how to draw the squares onto the image and have them scale with the scrolling.

Answer 1

If you attach the tap gesture recognizer to the image view, you can add squares as subviews of that image view like so,

- (IBAction)handleTap:(UITapGestureRecognizer *)sender {

    CGPoint touchPoint = [sender locationInView:sender.view];
    UIView *square = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 60, 60)];
    square.center = touchPoint;
    square.backgroundColor = [UIColor colorWithWhite:1 alpha:0.4];
    [sender.view addSubview:square];
}

When you pinch to zoom, the squares will scale along with the image view.