Question

I’m having trouble with my bingo application,I tried drawing a circle programmatically whenever a number is picked in my number generator.

I tried this code, that draws the circle in image then save it to the documentsDirectory. I also have a load implementation that I load it in the view when I call it.

//draw

-(void)draw
{
    UIImage *image = [UIImage imageNamed:@"GeneralBingoResult.png"];
    UIImage *imageWithCircle1 = [self imageByDrawingCircleOnImage1:image];

    // save it to documents

    NSString *documentsPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,
                                                                   NSUserDomainMask, YES) lastObject];
    NSString *filePath = [documentsPath stringByAppendingPathComponent:@"Output.png"];
    NSData *imageData = UIImagePNGRepresentation(imageWithCircle1);
    [imageData writeToFile:filePath atomically:YES];
    NSLog(@"Saved new image to %@", filePath);

UIImage *image1 = [self loadImage];
    [imageToDisplay setImage:image1];

}

//draws the circle in the image

- (UIImage *)imageByDrawingCircleOnImage1:(UIImage *)image
{
    // begin a graphics context of sufficient size
    UIGraphicsBeginImageContext(image.size);
    // draw original image into the context
    [image drawAtPoint:CGPointZero];
    // get the context for CoreGraphics
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // set stroking color and draw circle
    [[UIColor redColor] setStroke];

    // make circle rect 5 px from border
    CGRect circleRect = CGRectMake(420,40,
                                   90,
                                   90);
    circleRect = CGRectInset(circleRect, 5, 5);

    // draw circle
    CGContextStrokeEllipseInRect(ctx, circleRect);

    // make image out of bitmap context
    UIImage *retImage = UIGraphicsGetImageFromCurrentImageContext();
    // free the context
    UIGraphicsEndImageContext();
    return retImage;
}

//loads from doc directory

- (UIImage*)loadImage
{
    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, 
                                                         NSUserDomainMask, YES);
    NSString *documentsDirectory = [paths objectAtIndex:0];
    NSString* path = [documentsDirectory stringByAppendingPathComponent: 
                      [NSString stringWithString: @"Output.png"] ];
    UIImage* image = [UIImage imageWithContentsOfFile:path];
    return image;
}

I successfully draw a circle in my image, but my problem is when I save the image with the circle in documentsDirectory I want to be able to load the saved image and draw with that image again. Or rather how am I going to implement it like a bingo app, like this:

Example:
First,Number 7 is picked in the number generator.
Output:

Next, number 55 is picked. It adds another circle to the number.
Output:

By the way, I’m using a UIScrollview. And I am implementing it in the ScrollViewDidEndScrolling. Thanks.

I also tried this code, but it only shows one circle every time the UIScrollView stops.

 - (void) scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollview{

    if ([[images objectAtIndex:index] intValue] == 1){
                [circle setFrame:CGRectMake(420,40,90,90)];
                [self.view addSubview:circle];       
    }else if([[images objectAtIndex:index] intValue] == 2){
                [circle setFrame:CGRectMake(460,40,90,90)];
                [self.view addSubview:circle];   
     }
}

Answer 1

Your easiest option is to create an image in photoshop or other similar program which is the required size and which has a transparent background. Save this as a .png file. Then, when you want to add the circles over the board, you just have to add a new UIImageView over the correct location in the grid:

UIImageView *circle;
circle = [[UIImageView alloc] initWithFrame:CGRectMake(xLocation, yLocation, myCircleWidth, myCircleHeight)];
circle.image = [UIImage imageNamed:@"myCircle.png"];
[self.view addSubview:circle];

An alternate option is to create a view that inherits from UIView. You can add methods to this class which allow you to set locations as circled. Then inside the drawRect code you just draw circles over all the locations which have been marked.

- (void)drawRect:(CGRect)rect {
// Circle your marked locations here
}

The final step in this case is to add your new view over your original view which contains the BINGO board.

EDIT:

Here is extended sample code for doing a view overlay. First, OverlayView.h:

@interface OverlayView : UIView {

}

- (void)clearPoints;
- (void)addPointX:(int)whichX Y:(int)whichY;
@end

Note that I use the C++ vector here, so this is in OverlayView.mm file:

#import "OverlayView.h"
#import <UIKit/UIKit.h>
#include <vector>

@implementation OverlayView

std::vector<int> points;

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

- (void)drawRect:(CGRect)rect {
    if (points.size() == 0)
        return;
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSetLineWidth(context, 15.0);

    CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0, 0.5);
    for (int x = 0; x < points.size(); x++)
        CGContextStrokeEllipseInRect(context, CGRectMake(points[x]%width-resolution/2,
                                                         points[x]/width-resolution/2,
                                                         resolution, resolution));

}

- (void)dealloc {
    //printf("Deallocating OverlayView\n");
    [super dealloc];
}


- (void)clearPoints {
    points.resize(0);
    [self setNeedsDisplay];
}

- (void)addPointX:(int)whichX Y:(int)whichY {
    points.push_back(whichX+whichY*width);

    [self setNeedsDisplay];
    printf("Adding point (%d,%d)\n", whichX, whichY);
}

You just need to add this view inside the same view as your board. Call the addPoint function to add a circle centered at that point. You’ll need to defined the resolution and width of your view for yourself.