Erase function in UIView on UITouch

Question

I have two UIView one over the other, where the first one has RED COLOR as backgroundColor, and the upper one has WHITE COLOR as backgroundColor, when user touches and shades the upper UIVIEW the lower UIView has to be visible.. is it possible here...??

Answer 1

Yes this is possible, I have also done this in my project. Have a look at this link

Hope this helps you with what you want to do ;-)

Answer 2

I have code with class for your this requirement.. just try to understand the flow

Create one UIView class like bellow...

see TouchView.h file bellow..

   //
//  TouchView.h
//
//  Created by Paras Joshi on 23/08/12..
//

#import <UIKit/UIKit.h>

@interface TouchView : UIView {

    // array of all the touch locations
    NSMutableArray *points;

    // image to mask on user gesture
    UIImage *maskImage;

}
@property (nonatomic, retain) UIImage *maskImage;
@property (nonatomic, retain) NSMutableArray *points;
-(void)drawPic:(UIImage *)thisPic;
@end

and also TouchView.m file like bellow..

 //  TouchView.m
//
//  Created by Paras Joshi on 23/08/12..

#import "TouchView.h"

// Define method POINT to return the CGPoint value of the object at self.points[index] 

#define POINT(index)    [[self.points objectAtIndex:index] CGPointValue];




@interface TouchView (PrivateMethods)

    -(void)clipImage;

    @end


    @implementation TouchView
    @synthesize points,maskImage;

    // mask will be a sphere of maskWidth X maskHeight
    float maskWidth = 30.0f;
    float maskHeight = 30.0f;


    - (id)initWithFrame:(CGRect)frame {

        self = [super initWithFrame:frame];
        if (self) {
            // Initialization code.
            self.backgroundColor = [UIColor clearColor];
            self.points = [NSMutableArray array];

            // set the 'maskImage'
            maskImage = [[UIImage alloc]init];
    //      maskImage = [UIImage imageNamed:@"house1.jpeg"];

            // listen for 'reset' notification event
    //      [[NSNotificationCenter defaultCenter] addObserver:self
    //                                               selector:@selector(reset:)
    //                                                   name:ResetNotification
    //                                                 object:nil];

        }
        return self;
    }

    -(void)drawPic:(UIImage *)thisPic {

        maskImage = thisPic;

        [maskImage retain];
        [self setNeedsDisplay];
    }

    -(void)reset:(NSNotification *)notification{

        [self.points removeAllObjects];
        [self setNeedsDisplay];

    }
    -(void)drawRect:(CGRect)rect{

        // break if there are no points to mask
        if (!self.points || self.points.count < 2) return; 

        // mask the image
        [self clipImage];
    }

    // clipImage handles creating and adding a path of masks (ellipses), to our drawing context (display) based on gesture input
    - (void) clipImage{

        // grab a reference to the image we're going to mask
        UIImage *image = maskImage;

        // determine the extents of the image so that we do not 
        // do unnecessary drawing ouside the image bounds
    //  CGRect bounds = CGRectMake(0.0f, 0.0f, maskImage.size.width, maskImage.size.height);
        CGRect bounds = CGRectMake(0.0f, 0.0f, 1024, 694);  
        // get the graphics context and init a path to draw our mask to
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGMutablePathRef path = CGPathCreateMutable();

        // add ellipses to every CGPoint in self.points
        for(int i = 0; i < self.points.count - 1; i++){

            // get the CGPoint value stored in self.points[i]
            CGPoint pt = POINT(i);

            // add the ellipse at that point
            CGPathAddEllipseInRect(path, NULL, CGRectMake(pt.x - (maskWidth / 2), pt.y - (maskHeight / 2), maskWidth, maskHeight));
        }

        // add the path of ellipses to our drawing context
        CGContextAddPath(context, path);

        // clip the Core Graphics drawing context to our display
        CGContextClip(context);

        // now add the image to our display (it will only appear wherever the CGPoints of self.points are located)
        [image drawInRect:bounds];

        // finalize drawing
        CGContextClosePath(context);

    }


    - (void)dealloc {
        points = nil;

        // remove event listener
        [[NSNotificationCenter defaultCenter] removeObserver:self];
        [super dealloc];
    }


    #pragma mark -
    #pragma mark Gesture Methods

    -(BOOL) isMultipleTouchEnabled{ return NO; };       

    -(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{

        // get the location of the touch
        CGPoint pt = [[touches anyObject] locationInView:self];

        // puch the touch location (pt) onto our array of points
        [self.points addObject:[NSValue valueWithCGPoint:pt]];

        // update display by calling it's 'drawRect' method
        [self setNeedsDisplay];

    }

    -(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{

        // get the location of the touch
        CGPoint pt = [[touches anyObject] locationInView:self];

        // puch the touch location (pt) onto our array of points
        [self.points addObject:[NSValue valueWithCGPoint:pt]];

        // update display by calling it's 'drawRect' method
        [self setNeedsDisplay]; 


    }
    @end

just add this view as a subview of your mainview like bellow...

First add class in .h file..

@class TouchView;

and then create object like bellow in .h file..

TouchView *viewScratch;

and in .m file add this code

 - (void)viewDidLoad
   {
     viewScratch = [[TouchView alloc]initWithFrame:CGRectMake(0, 0, 1024, 694)];// set frame which you want...
    [viewScratch clipsToBounds];
    [viewScratch drawPic:[UIImage imageNamed:@"yourImageName"]];
    [self.view addSubview:viewScratch];
   }