Question

My app’s requirement is that it needs to take a picture and then divide it into pieces. Say for example there are 8 rows and eight columns. I might name the rows to A through H while i might name the colums to be from 1 through 8. Suppose the user after clicking the picture were to select A1, the code should be able to zoom A1 and provide him with options to do a couple of things like placing some symbols or marking a few things from the available options. How do i achive the 1)splitting 2)zooming 3)providing various symbols to the user in the form of small logos ? I am quite new to iphone programming and found out that there exists a class called UIImagePickerController to help you with that but i do not know how to achieve 1,2 and 3. Please help me.

Answer 1

Well, for dividing image into pieces you should use the following code (place it in UIImage category):

- (UIImage *)imageCroppedWithRect:(CGRect)rect
{
    if (self.scale > 1.0f) {
        rect = CGRectMake(rect.origin.x * self.scale,
                          rect.origin.y * self.scale,
                          rect.size.width * self.scale,
                          rect.size.height * self.scale);
    }

    CGImageRef imageRef = CGImageCreateWithImageInRect(self.CGImage, rect);
    UIImage *result = [UIImage imageWithCGImage:imageRef scale:self.scale orientation:self.imageOrientation];
    CGImageRelease(imageRef);
    return result;
}

Now you’ll have some images and should create appropriate amount of UIImageViews with those images. Then depending of how you want to let the user zoom it add UITapGestureRecognizer, e.q.. For zooming you could add hidden UIImageView and when the piece is tapped use the following code:

- (void)pieceTapped:(UITapGestureRecognizer *)recognizer
{
    UIImageView *piece = recognizer.view;
    self.zoomedImageView.frame = piece.frame;
    self.zoomedImageView.image = piece.image;
    self.zoomedImageView.hidden = NO;
    [UIView animationWithDuration:0.3 animation:^{
        self.zoomedImageView.frame = self.view.frame;
    }];
}

And now you should only place your symbols to that image. But how you want to do that? Drag & drop image from somewhere or automatically? Place symbols to the image permanently or just place over it?