在for循环中，UIImageView不会更新图像

Question

I have an Array of CGRect arr , and I want to draw those rectangles onto an image in a for loop. This is the code:

 __block UIImage *procImage=image;


for(int i=0;i<arr.count;i++){
    CGRect rect=[[arr objectAtIndex:i] CGRectValue];
    procImage=[self drawText:[NSString stringWithFormat:@"%d",i] inImage:procImage atPoint:CGPointMake(rect.origin.x,rect.origin.y-rect.size.height) withRect:rect];

    [self.imageView setImage:procImage];

    [[NSOperationQueue mainQueue] addOperationWithBlock:^{

        procImage=[self drawText:[NSString stringWithFormat:@"%d",i] inImage:procImage atPoint:CGPointMake(rect.origin.x,rect.origin.y-rect.size.height) withRect:rect];

        [self.imageView setImage:procImage];


    }];
}

This is the drawText: function

-(UIImage*) drawText:(NSString*) text
         inImage:(UIImage*)  image
         atPoint:(CGPoint)   point
        withRect:(CGRect)rectangle
{

UIGraphicsBeginImageContext(image.size);
[image drawInRect:CGRectMake(0,0,image.size.width,image.size.height)];
CGRect rect = CGRectMake(point.x, point.y, image.size.width, image.size.height);

[text drawInRect:CGRectIntegral(rect) withAttributes:@{NSForegroundColorAttributeName: [UIColor greenColor],
                                                       NSFontAttributeName:[UIFont boldSystemFontOfSize:50]}
 ];
CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
CGContextStrokeRect(context, rectangle);

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

return newImage;
}

The problem is the imageView only update its image when the for loop finished. I want to create a nice animation that updates the image for everytime a new rectangle is drawn during the for loop.

Edit

I had simplified the code. In my case, I was performing an OCR process for each text block so it would take a lot of time (maybe several minutes). During that time I want to show the users something of the process instead of a dead interface for each time a text block is done.

Answer 1

Create your images array and cache it. Then use UIImageView animationImages property to store the array of images you have created and let UIImageView handle the animation. Constructing an image every single time is process intensive.

Apple Documentation:

https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/UIImageView_Class/index.html#//apple_ref/occ/instp/UIImageView/animationImages

Answer 2

It isn't clear what effect you are after. Do you want a short delay between drawing each image and text in it's target rectangle so they stack up?

You have 2 problems. First, nothing is actually rendered to the screen until your code returns. Thus when you run a loop like that, the drawing calls just stack up, you return from your code, and then everything gets rendered to the screen.

Even if you fix that, your second problem is that drawing image after image after image to the screen will be so fast that the user's eyes won't see the individual steps.

If I'm right about what you're trying to do, you could do it this way instead.

Add an instance variable to keep track of the index of the current image. Set it to zero.

Write a method that draws the current image and text at the current rectangle, then increments the index instance variable. If there are more entries in your array of images/rectangles, have the method call itself on the main thread after a short delay using the GCD call dispatch_after. That would return control to the main thread and let the new drawing render to the screen, and give the user time to see that drawing before the next one is drawn.

EDIT:

As @Paulw11 says in his comment you could also re-invoke your method using a repeating timer and simply invalidate it once you run out of entries in your array.