Displaying a view over an imageview which is moveable

Question 1

I understand from the question that you know how to do the movement of the overlay, so what I meant is just that you can simply use image views big enough to make sure that their border isn't visible.

Let's say the UIImageView would be called

UIImageView *photoImageView;

And the overlay with translucent and semi-translucent areas would be

UIImageView *imageOverlayView;

The way I see it, you need 3 different images for that imageOverlayView, depending on the device it's running on - 1 for iPad, 1 for iPhone 5 and 1 for other iPhones. Width of that image should be equal to (screen width - circle radius) * 2, height should

CGFloat circleRadius; //this would be the radius of translucent circle

So if you set the frame of the overlay properly:

CGRect imageFrame = photoImageView.frame;
imageOverlayView.frame = CGRectMake(circleRadius - imageFrame.size.width/2, circleRadius - imageFrame.size.height/2, (imageFrame.size.width - circleRadius)*2, (imageFrame.size.height - circleRadius)*2); //origin is set to the middle of the image.

you'd never see the edge of the grey area. MZimmerman6's answer for implementation of the movement is good, but you should also make sure you block the circle from getting out of the borders of underlying image.

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint new = [touch locationInView:imageOverlayView];
    delX = new.x - prevPoint.x;
    delY = new.y - prevPoint.y;
    CGRect overFrame = imageOverlayView.frame;
    overFrame.origin.x += delX;
    if (overFrame.origin.x < -imageFrame.size.width) {
        overFrame.origin.x = -imageFrame.size.width;
    }
    else if (overFrame.origin.x > 0) {
        overFrame.origin.x = 0;
    }
    overFrame.origin.y += delY;
    if (overFrame.origin.y < -imageFrame.size.height) {
        overFrame.origin.y = -imageFrame.size.height;
    }
    else if (overFrame.origin.y > 0) {
        overFrame.origin.y = 0;
    }
    [overlayView setFrame:overFrame];
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint new = [touch locationInView:imageOverlayView];
    delX = new.x - prevPoint.x;
    delY = new.y - prevPoint.y;
    CGRect overFrame = imageOverlayView.frame;
    overFrame.origin.x += delX;
    if (overFrame.origin.x < -imageFrame.size.width) {
        overFrame.origin.x = -imageFrame.size.width;
    }
    else if (overFrame.origin.x > 0) {
        overFrame.origin.x = 0;
    }
    overFrame.origin.y += delY;
    if (overFrame.origin.y < -imageFrame.size.height) {
        overFrame.origin.y = -imageFrame.size.height;
    }
    else if (overFrame.origin.y > 0) {
        overFrame.origin.y = 0;
    }
    [overlayView setFrame:overFrame];
}

EDIT With your pan gesture recognizer, checking if you aren't going too far needs a little change to the handlePan: method.

-(void)handlePan:(UIPanGestureRecognizer *)gesture {
    CGPoint newCenter = [gesture locationInView:self.view];
    if (newCenter.x < 50) {
        newCenter.x = 50;
    }
    else if (newCenter.x > self.view.frame.size.width - 50) {
        newCenter.x = self.view.frame.size.width - 50;
    }
    if (newCenter.y < 50) {
        newCenter.y = 50;
    }
    else if (newCenter.y > self.view.frame.size.height - 50) {
        newCenter.y = self.view.frame.size.height - 50;
    }
    gesture.view.center = newCenter;
}

If that 50 points margin is equal to circle radius, this will make sure your circle able to touch the edges of the screen, but unable to go beyond them.

Question 2

I would first initialize some UIImageView with a png image in it that will easily handle this moving frame with a hole in the center. You can the add this to your screen. Once this is done, use the touchesBegan, touchesMoved and other touch commands to find whether a user is touching that box and from that determine how far the user has moved from the previous point. Use this difference to then add or subtract values from the images current frame origin or center, and voila you have a moving box.

EDIT

In View.h

CGPoint prevPoint;
float delX;
float delY;
UIView *overlayView;

In View.m

-(void) viewDidLoad {
    overlayView = [UIView alloc] initWithFrame:CGRectMake(100,100,100,100)];
    [overlayView setBackgroundColor:[UIColor clearColor]];
    [self.view addSubview:overlayView];
    UIImageView *circImage = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,overlayView.frame.width,overlayView.frame.height)];
    [circImage setImage:[UIImage imageNamed:@"SomeImage.png"]];
    [overlayView addSubview:circImage];
    [self.view setNeedsDisplay];
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    prevPoint = [touch locationInView:overlayView];
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint new = [touch locationInView:overlayView];
    delX = new.x - prevPoint.x;
    delY = new.y - prevPoint.y;
    CGRect overFrame = overlayView.frame;
    overFrame.x += delX;
    overFrame.y += delY;
    [overlayView setFrame:overFrame];
    [self.view setNeedsDisplay];
}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint new = [touch locationInView:overlayView];
    delX = new.x - prevPoint.x;
    delY = new.y - prevPoint.y;
    CGRect overFrame = overlayView.frame;
    overFrame.x += delX;
    overFrame.y += delY;
    [overlayView setFrame:overFrame];
    [self.view setNeedsDisplay];
}