Draw bezier path over an UIImageView image using a pangesture

Question

I have a:

1. CustomView which is a subclass of UIView.
2. CustomImageView which is a subclass of UIImageView
   • CustomImageView is a sub-view of CustomView
3. UIPanGestureRecognizer applied to the another UIImageView called panImage
   • panImage is a sub-view of CustomImageView

Now, I need to draw as I move panImage in the CustomImageView but it should not draw in CustomView.

Below is the code i have written, but does not work.
Need help.

CustomImageView

#import <UIKit/UIKit.h>
#import "CustomImageView.h"
@interface CustomView : UIView
@property (nonatomic,strong) UIPanGestureRecognizer *panGesture;
@property (nonatomic,strong) UIImageView *panImage;
@property (nonatomic,strong) CustomImageView *backgroundImage;
@end

#import "CustomView.h"
@implementation CustomView

-(void) awakeFromNib {
    // inserting a background image
    self.backgroundImage = [[CustomImageView alloc] initWithImage:[UIImage imageNamed:@"ef-06-chartkey-yellow.jpg"]];
    CGRect imageFrame = CGRectMake(20,14, 450,450);
    self.backgroundImage.userInteractionEnabled = YES;
    self.backgroundImage.exclusiveTouch = YES;
    self.backgroundImage.frame = imageFrame;
    [self addSubview:self.backgroundImage];

    if (nil == self.panGesture) {
        self.panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self.backgroundImage
                                                                  action:@selector(handlePanGesture:)];
    }

    self.panImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"slider_thumb.png"]];
    CGRect panFramePoint = CGRectMake(10,10, self.panImage.frame.size.width, self.panImage.frame.size.height);
    self.panImage.frame = panFramePoint;
    self.panImage.userInteractionEnabled = YES;
    [self.panImage addGestureRecognizer:self.panGesture];
    [self.backgroundImage addSubview:self.panImage];
}
@end

---

CustomImageView

#import <UIKit/UIKit.h>
@interface CustomImageView : UIImageView
@property (nonatomic,strong) UIBezierPath *path;
@end

#import "CustomImageView.h"
@implementation CustomImageView

-(id) initWithImage:(UIImage *)image {
    self = [super initWithImage:image];
    if (self) {
        self.image = image;
        self.path = [[UIBezierPath alloc] init];
        self.path.lineWidth = 25;
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    // Drawing code
    [[UIColor redColor] setFill];
    [self.path stroke];
}

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

    //NSLog(@"[recognizer locationInView:self] %f, %f",[recognizer locationInView:self.customLetterImage].x, [recognizer locationInView:self.customLetterImage].y);
    [recognizer setTranslation:CGPointMake(0, 0) inView:self];
    [self.path addLineToPoint:[recognizer locationInView:self]];
    [self setNeedsDisplayInRect:self.frame];
}

-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    NSLog(@"CustomImageView touchesBegan");
    UITouch *mytouch = [touches anyObject];
    [self.path moveToPoint: [mytouch locationInView:self]];
    [self setNeedsDisplay];
}

-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    NSLog(@"CustomImageView touchesMoved");
}

-(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    NSLog(@"CustomImageView touchesEnded");
}

-(void) touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
    NSLog(@"CustomImageView touchesCancelled");
}

@end

Answer 1

i resolved this problem by creating a custom view above the customImageView. Such that using a pangesture i draw on the view above the customImageView.