How to redraw a certain rect in drawRect

Question

Here is my problem. I am planning to draw 999 circles inside a view at the time of setup, which is done successfully in drawRect. After that, I am planning to edit the color of each circle when user touches (which i am handling using the tap gesture in the view controller). The problem is, when I call [self.pegView setNeedsDisplay]; the drawRect is getting called and goes to the else part of the if in drawRect (which it should), but all the other beads are removed, and I see only 1 bead instead of 999 beads.

Below is my code.

- (void)drawRect:(CGRect)rect
{

    if(!self.isEditingHappening) // For the initial setup
    {
        CGRect beadRect = CGRectMake(BEAD_ORIGIN_X, BEAD_ORIGIN_Y, BEAD_VIEW_SIZE, BEAD_VIEW_SIZE);
        self.ctx = UIGraphicsGetCurrentContext();

        for(int i = 0 ; i < 999 ; i++)
        {
            // To set up the bead view for each column
            if (i !=0 && i % 37 !=0)
            {
                beadRect.origin = CGPointMake((beadRect.origin.x + BEAD_VIEW_SIZE), beadRect.origin.y);
            }

            // To set up bead view for each row
            if (i !=0 && i %37 ==0 )
            {
                beadRect.origin.y += BEAD_VIEW_SIZE;
                beadRect.origin = CGPointMake(BEAD_ORIGIN_X, beadRect.origin.y);
            }

            BeadPattern *pattern = [self.beadPatternsArray objectAtIndex:(i/37)];

            int beadType=[[pattern.eachRowPattern objectAtIndex:i%37] intValue];
            BeadColor *color=[self.beadColorsArray objectAtIndex:beadType];


            CGPoint center;
            center.x = beadRect.origin.x + beadRect.size.width / 2.0;
            center.y = beadRect.origin.y + beadRect.size.height / 2.0;

            CGRect newInnerRect;
            newInnerRect.size.width =  beadRect.size.width * 0.6;
            newInnerRect.size.height = beadRect.size.height * 0.6;
            newInnerRect.origin.x = center.x - newInnerRect.size.width/2;
            newInnerRect.origin.y = center.y - newInnerRect.size.height/2;



            [[UIColor whiteColor] set];
            UIRectFill(beadRect);

            // Adds the outer circle
            CGContextAddEllipseInRect(self.ctx, beadRect);

            // Fill the outer circle with any color
            CGContextSetRGBFillColor(self.ctx, color.redValue, color.greenValue, color.blueValue, 1);

            CGContextFillEllipseInRect(self.ctx, beadRect);

            //Add inner circle
            CGContextAddEllipseInRect(self.ctx, newInnerRect);


            //Fill inner circle with white color
            CGContextSetRGBFillColor(self.ctx, 1, 1, 1, 0.4);
            CGContextFillEllipseInRect (self.ctx, newInnerRect);

        }
    }
    else    // When editing is happening
    {
        NSLog(@"The redrawing rect is %@", NSStringFromCGRect(rect));
        CGContextSaveGState(self.ctx);
        CGRect beadRect;
        beadRect.size = CGSizeMake(BEAD_VIEW_SIZE, BEAD_VIEW_SIZE);
        beadRect.origin = CGPointMake(self.columnToBeUpdated * BEAD_VIEW_SIZE, self.rowToBeUpdated * BEAD_VIEW_SIZE);

        CGPoint center;
        center.x = beadRect.origin.x + beadRect.size.width / 2.0;
        center.y = beadRect.origin.y + beadRect.size.height / 2.0;

        CGRect newInnerRect;
        newInnerRect.size.width =  beadRect.size.width * 0.6;
        newInnerRect.size.height = beadRect.size.height * 0.6;
        newInnerRect.origin.x = center.x - newInnerRect.size.width/2;
        newInnerRect.origin.y = center.y - newInnerRect.size.height/2;

        CGContextRestoreGState(self.ctx);

        [[UIColor whiteColor] set];
        UIRectFill(beadRect);

        // Adds the outer circle
        CGContextAddEllipseInRect(self.ctx, beadRect);

        // Fill the outer circle with any color
        CGContextSetRGBFillColor(self.ctx, self.colorToBeShownWhileEdited.redValue, self.colorToBeShownWhileEdited.greenValue, self.colorToBeShownWhileEdited.blueValue, 1);

         CGContextFillEllipseInRect(self.ctx, beadRect);

        //Add inner circle
        CGContextAddEllipseInRect(self.ctx, newInnerRect);

        //Fill inner circle with white color
        CGContextSetRGBFillColor(self.ctx, 1, 1, 1, 0.4);
        CGContextFillEllipseInRect (self.ctx, newInnerRect);
     }
  }

What I intend to do is, keep all the 999 beads, but edit only one bead's color for which the user has touched. I tries using [setNeedsDisplayInRect] also, but the rect is not passed correctly. Please help me here.

score 0 · Answer 1 · answered Sep 10 '12 at 18:51

0

If I remember correctly, it clears off the other items on the canvas -so your initial setup stuff would need to run each time.

Or, you could create separate views for each bead that would allow you to just follow that one specifically. Each bead could contain its own logic.

answered Sep 10 '12 at 18:51

smcdrc

1,671
2
21
29

I tried having single view for each bead, but it is was too much of overhead, and it was lagging too much when we zoom the view inside scroll view (as it has to call 999 views for every zoom). So I went down the path of having one view for all 999 beads. – jeevangs Sep 10 '12 at 19:22

How to redraw a certain rect in drawRect

1 Answers1