Write in rectangle and fill it with a color

Question

I want to draw a rectangle, fill the rectangle with a chosen color from a palette and then write into it. I am able to draw and write into it but when I fill the rectangle, the written text gets covered. and I can't see anything. I am Developing a minesweeper game in IOS and setting cell colors for Opened and closed cells.

        UIFont *font = [UIFont systemFontOfSize: .75*self.dh];
        for(int i = 0 ; i < 16; i ++){
            for(int j = 0;j < 16;j ++){
                if(mineMatrix[i][j] == -2 || mineMatrix[i][j] == -4){
                    //                    NSString *mine = @"F";
                    //                    CGPoint xy = { (i+0.17)*self.dw, j*self.dh};
                    //                    [mine drawAtPoint: xy withFont: font];


                    // establish bounding box for image
                    CGPoint tl = { (i)*self.dw, j*self.dh + 103};
                    CGRect imageRect = CGRectMake(tl.x, tl.y, dw, dh);

                    // place appropriate image where dragging stopped
                    UIImage *img;
                    img = [UIImage imageNamed:@"flags.png"];
                    [img drawInRect:imageRect];


                }else{
                    CGPoint tl = { (i)*self.dw, j*self.dh + 103};
                    CGRect imageRect = CGRectMake(tl.x, tl.y, dw, dh);
                    CGContextRef context = UIGraphicsGetCurrentContext();
                    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
                    CGContextFillRect(context, imageRect);
                }
                if(mineMatrix[i][j] != -3 && mineMatrix[i][j] != 0 && mineMatrix[i][j] != -2 && mineMatrix[i][j] != -1 && mineMatrix[i][j] != -4){
                    NSString *mine = [[NSNumber numberWithInt: mineMatrix[i][j]] stringValue];
                    CGPoint xy = { (i+0.17)*self.dw, j*self.dh + 103};
                    [mine drawAtPoint: xy withFont: font];
                }
                if(mineMatrix[i][j] == 0 || mineMatrix[i][j] == -1){
                    UIImage *img;
                    CGPoint tl = { (i)*self.dw, j*self.dh + 103};
                    CGRect imageRect = CGRectMake(tl.x, tl.y, dw, dh);
                    [img drawInRect:imageRect];
                }


            }

        }

    }

Answer 1

The problem is that by the time you draw the text, you have already set the fill color of the context in order to draw the background. So then the text is drawn in the same color as the background and you don't see anything.

So just change the fill color to something else just before drawing the text, like this:

[[UIColor blackColor] set]; // or whatever color you like
[mine drawAtPoint: xy withFont: font];

Or, even better, draw attributed text that has its own color.

Answer 2

Have you considered creating a subclass of UIView for each of your cells. Since you are creating a minesweeper game I believe each of your cells would need to have the following functions:

1. Have 2 states - opened and closed
2. Respond to touches - for flagging or opening
3. Have a label - representing number of mines
4. Have an image - if it is a mine or flag
5. Ability to change rectangle color

All of this can be achieved by the UIView method. For example your exampleMine.h:

#import <UIKit/UIKit.h>

@interface exampleMine :UIView{
    UIImageView *backgroundImage; //used for either flags or mines
    UIButton* cellButton; //used for flagging or opening actions
    UILabel* numMineLabel;
    BOOL isMine, isOpen, isFlagged;
    int numSurroundingMines;
}

And in your exampleMine.m have the following functions

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if(self){
        backgroundImage = [[UIImageView alloc] initWithFrame: self.bounds];
        backgroundImage.hidden = YES; //You don't need this image to be shown at the start
        backgroundImage.backgroundColor = [UIColor clearColor];
        numMineLabel = [[UILabel alloc] initWithFrame: self.bounds];
        numMineLabel.hidden = YES; //You don't need this label at the start either
        numMineLabel.textAlignment = NSTextAlignmentCenter;
        numMineLabel.backgroundColor = [UIColor clearColor];
        cellButton = [UIButton buttonWithType: UIButtonTypeCustom];//you can add a target and selector for touch responses in your main view
        cellButton.frame = self.bounds;
        cellButton.backgroundColor = [UIColor clearColor];
        cellButton.enabled = YES;
        cellButton.hidden = NO:
        [self addSubview: backgroundImage];
        [self addSubview: numMineLabel];
        [self addSubview: cellButton];
        self.backgroundColor = [UIColor blueColor];//I've set blueColor as default for closed cell - you can choose any color
        isMine = isOpen = isFlagged = NO;
    }
    return self;
}

This is to initialize a new cell. The following functions would help set up the rest of the details.

- (void) setMine{ //Called only if given cell is a mine
    isMine = YES;
}

- (void) setNumSurroundingMines: (int) numSurrMines{
    numSurroundingMines = numSurrMines;
    numMineLabel.text = [NSString stringWithFormat: @"%d", numSurroundingMines];
}

- (void) setOpen{
    if(isMine){
        backgroundImage.image = [UIImage imageNamed: @"mine.png"]; //or whichever image you would use
        backgroundImage.hidden = NO;
        self.backgroundColor = [UIColor redColor];
    }
    else{
        numMineLabel.hidden = NO;
    }
    cellButton.hidden = YES; //You would not need the button any longer
    isOpen = YES;
}

- (void) setFlagged{
    if(isFlagged){
        backgroundImage.hidden = YES;
    }
    else{
        backgroundImage.image = [UIImage imageNamed: @"flags.png"]; //or whichever image you would use
        backgroundImage.hidden = NO;
    }
}

I realise this is a long answer, and it may not directly answer your question. However, it might be an alternative approach to solving your problem. I have tried this approach once using java swing, and it works very well, and makes event handling very easy.