Erasing part of an image that overlaps with text f

Question

I have it where a user can move an image and uilabel around the screen. Say it is a black image and black text. I want the portion of the text that overlaps with the image to become transparent so that the background shows through and you can still read the text even though they were originally the same color. Hopefully this makes sense.

I've found some links on erasing with touch. I'm not sure how to go about automating this with the portion of the text that overlaps.

Maybe something like this "Masking an image with an image"? https://developer.apple.com/library/mac/#documentation/graphicsimaging/conceptual/drawingwithquartz2d/dq_images/dq_images.html

Here is how I move the image (and also the text)

-(void)graphicMoved:(UIPanGestureRecognizer *)recognizer
{
CGPoint translation = [recognizer translationInView:self.view];
recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
                                     recognizer.view.center.y + translation.y);
[recognizer setTranslation:CGPointMake(0, 0) inView:self.view];


}

---

Added Code I'm calling the creatAlphaClippedImage on a button click after I place the text and image partially overlapping. The image is imageMerge and the label is labelTest.

All I do is assign them at the beginning and then at the end, take the output impage and assign it to imageMerge.image which is added to my view with interface builder in the corner just to test. I don't know what a nslog should show, but its not empty.

-(void)createAlphaClippedImage {
UIImageView *imageView = nil;//this will b your imageView, property that u are holding to
UILabel *label = nil;//this will be your label, property that u are holding to


imageView=imageMerge;
label=labelTest;


if (CGRectIntersectsRect(imageView.frame, label.frame)) {
    UIImage *bottomImage = imageView.image;

    UIImage *image = nil;
    UIGraphicsBeginImageContextWithOptions(bottomImage.size, NO, 0.0);
    CGRect imageRect = CGRectMake(0.0f, 0.0f, bottomImage.size.width, bottomImage.size.height);
    [bottomImage drawInRect:imageRect];
    //the color that u want the text to have
    [[UIColor clearColor] set];
    //change this textRect to change the position of text on image
    CGRect textRect = CGRectMake(CGRectGetMinX(label.frame) - CGRectGetMinX(imageView.frame), CGRectGetMinY(label.frame) - CGRectGetMinY(imageView.frame), CGRectGetWidth(label.frame), CGRectGetHeight(label.frame));
    [label.text drawInRect:textRect withFont:label.font];
    image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    imageView.image = image;


    imageMerge.image=image;

    NSLog(@"ImageMerge %@\n",imageMerge.image);
}
}

Answer 1

Assuming you are already through with moving your imageView around the screen. Let me proceed with what to do.

1. When you touch the imageView. Change the Image in it using the code that I am going to provide.
2. Once you are done moving the imageView, replace the new image with the old Image

new image = one with black image + black text; old image = one with black image + transparent text;

-(UIImage *)customImage:(NSString *)cellImageName withText:(NSString *)badgeText textColor:(UIColor*)color {
    UIImage *bottomImage = [UIImage imageNamed:cellImageName];
    //Change the font size to change text size
    CGSize stringSize = [badgeText sizeWithFont:[UIFont systemFontOfSize:[UIFont systemFontSize]]];

    UIImage *image = nil;
    UIGraphicsBeginImageContextWithOptions(bottomImage.size, NO, 0.0);
    CGRect imageRect = CGRectMake(0.0f, 0.0f, bottomImage.size.width, bottomImage.size.height);
    [bottomImage drawInRect:imageRect];
    //the color that u want the text to have
    [color set];
    //change this textRect to change the position of text on image
    CGRect textRect = CGRectMake((bottomImage.size.width - stringSize.width)/2.0f, bottomImage.size.height - stringSize.height, stringSize.width, stringSize.height);
    [badgeText drawInRect:textRect withFont:[UIFont systemFontOfSize:[UIFont systemFontSize]]];
    image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

now before you start, throw away the label and for convenience sake (you can replace the UIImageView with CALayer, if you want to) i.e. instead of

imageView.image = image you can write layer.contents = (id)image.CGImage

Now, when u setup ur ImageView or Layer then first get the image as

UIImage *image = [self customImage:@"Image Name" withText:@"Text" textColor:[UIColor blackColor]];

and put this image into the imageView or layer

Now, when you start moving your imageview or layer. In touchesBegan or whichever method is Your first responder for the touch. Replace the image again as

UIImage *image = [self customImage:@"Image Name" withText:@"Text" textColor:[UIColor clearColor]];

And in touchesEnded replace the image again with first call of black color text.

This should get you going. Let me know in case of issues.

The above method provide write the text on top of your image, and creates a new image with text in it. Hence you can throw away the label.

Cheers, have fun.

EDIT

try this, have not tried it myself but should work

-(void)createAlphaClippedImage {
    UIImageView *imageView = nil;//this will b your imageView, property that u are holding to
    UILabel *label = nil;//this will be your label, property that u are holding to

    if (CGRectIntersectsRect(imageView.frame, label.frame)) {
        UIImage *bottomImage = imageView.image;

        UIImage *image = nil;
        UIGraphicsBeginImageContextWithOptions(bottomImage.size, NO, 0.0);
        CGRect imageRect = CGRectMake(0.0f, 0.0f, bottomImage.size.width, bottomImage.size.height);
        [bottomImage drawInRect:imageRect];
        //the color that u want the text to have
        [[UIColor clearColor] set];
        //change this textRect to change the position of text on image
        CGRect textRect = CGRectMake(CGRectGetMinX(label.frame) - CGRectGetMinX(imageView.frame), CGRectGetMinY(label.frame) - CGRectGetMinY(imageView.frame), CGRectGetWidth(label.frame), CGRectGetHeight(label.frame));
        [label.text drawInRect:textRect withFont:label.font];
        image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        imageView.image = image;
    }
}

call this method in touchesBegan and touchesMoved. if the animation stutters (which shud not happen), try calling it inside an animation block.

try this and let me know.

EDIT: LINK TO SAMPLE APP

I have created a sample app showing how to clear overlapping areas. Check it. https://www.dropbox.com/sh/5z45gkwgmstfyvu/lwzbUyh6IR